Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

materialSwitch won't align to end in flexbox #678

Closed
Aisling-Kinsella opened this issue Mar 19, 2024 · 1 comment
Closed

materialSwitch won't align to end in flexbox #678

Aisling-Kinsella opened this issue Mar 19, 2024 · 1 comment

Comments

@Aisling-Kinsella
Copy link

I'm using shiny.fluent and imola for layout and am unable to align the material switch to the right side/flex-end of a div.
Using ActionButton.shinyInput and Toggle.shinyInput it appears the flex css is working but I want to use your materialSwitch.
I've grabbed the CSS for materialSwitch but nothing I try is amending the issue, though I'm a novice CSS really. Could you take a look at this and if possible I'd like to also align it to the very bottom of the div aswell as to the end.

`library(shiny)
library(shiny.fluent)
library(imola)
library(shinyWidgets)

ui <- gridPage(

div(
  gridPanel(
  columns = "1fr 1fr",
  gap = "5px",
  
  div(class = "filter1",
      Stack(
        tokens = list(childrenGap = 10),
        horizontal = TRUE,
        DatePicker.shinyInput("fromDate", value = as.Date("2019/01/01"), label = "From date"),
        DatePicker.shinyInput("toDate", value = as.Date("2020/12/31"), label = "To date")
      )
  ),
  div(class = "filter2",
      style = "height: 50px; display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 0px;",
      ActionButton.shinyInput("button", iconProps = list("iconName" = "AddFriend"), text = "Line Chart"),
      Stack(
        tokens = list(childrenGap = 0),
        horizontal = TRUE,
        # align = "baseline",
        # Toggle.shinyInput("button", text = "Change Chart"),
        # materialSwitch(inputId = "switch", label = "")
      )
  )

)
)
)

server <- function(input, output, session) {

}

shinyApp(ui, server)`

@pvictor
Copy link
Member

pvictor commented Mar 27, 2024

Hello,
Maybe you can do something like this :

library(shiny)
library(shiny.fluent)
library(imola)
library(shinyWidgets)

ui <- gridPage(
  
  div(
    gridPanel(
      columns = "1fr 1fr",
      gap = "5px",
      
      div(class = "filter1",
          Stack(
            tokens = list(childrenGap = 10),
            horizontal = TRUE,
            DatePicker.shinyInput("fromDate", value = as.Date("2019/01/01"), label = "From date"),
            DatePicker.shinyInput("toDate", value = as.Date("2020/12/31"), label = "To date")
          )
      ),
      div(class = "filter2",
          style = "height: 50px; display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 0px;",
          ActionButton.shinyInput("button", iconProps = list("iconName" = "AddFriend"), text = "Line Chart"),
          Stack(
            tokens = list(childrenGap = 0),
            horizontal = TRUE,
            # align = "baseline",
            # Toggle.shinyInput("button", text = "Change Chart"),
            htmltools::tagAppendAttributes(
              materialSwitch(inputId = "switch", label = ""),
              style = "width: 60px; margin-top: 15px;"
            )
          )
      )
      
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Victor

@pvictor pvictor closed this as completed Apr 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants