dreamRs/shinyWidgets

materialSwitch won't align to end in flexbox

Aisling-Kinsella opened this issue · 1 comments

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)`

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