Can we move the filter to the right side

Hi all,

I am trying to shift the filtering to the right hand side but not able to. Can anyone please help. please refer the expected output. Is it possible to achieve this?

reprex below

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
DT::DTOutput('SUMMARY_GENERAL_table')


output$SUMMARY_GENERAL_table <- DT::renderDT( datatable(iris) )
```

Expect Output :slight_smile:

This might be a solution you are looking for (surely there are others).
As I understood, you need to align your elements (selectInput, dateRangeInput) to the right. You may try different values for width and/or offset for better alignment.
Also, see what happens when you add argument filter = "top" to the function datatable.

fluidRow(
  column(width = 6, offset = 9,
         # width	The grid width of the column (must be between 1 and 12(max.))
         # offset	The number of columns to offset this column from the end of the previous column
         column(width = 3,
                selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
                ),
         column(width = 3,
                dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
                )))
DT::DTOutput('SUMMARY_GENERAL_table')

output$SUMMARY_GENERAL_table <- DT::renderDT(datatable(iris, filter = "top"))

Thanks it helped me. But sorry, another question strike to my mind. if I add submit button at the end, why it is not aligned. below is the code

fluidRow(
  column(width = 6, offset = 9,
         # width	The grid width of the column (must be between 1 and 12(max.))
         # offset	The number of columns to offset this column from the end of the previous column
         column(width = 2,
                selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
                ),
         column(width = 2,
                dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
                ),
         column(width = 2,
                actionButton("Submit","Submit")
                )))

I would change the value of offset = 8 and the value of actionButton arguement width = "130px".
I often find useful Shiny HTML tags like line break br(), using it above actionButton column turns aligment a bit smoother.
You may ignore actionButton's arguments icon and class if you don't like Bootsrap customization.
Does this look better?

fluidRow(
  column(width = 6, offset = 8,
         # width	The grid width of the column (must be between 1 and 12(max.))
         # offset	The number of columns to offset this column from the end of the previous column
         column(width = 3,
                selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
                ),
         column(width = 3,
                dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
                ),
         tags$br(), # or just br()
         column(width = 3,
                actionButton("Submit", "Submit", width = "130px", icon("refresh"), class = "btn btn-primary") 
                # you may try smaller button with: class = "btn btn-primary btn-sm"
                )))

Thanks radovan for your time. Will check on this. It should be good :slight_smile:

Hi, All looks good as me as I expected. But can we have daterange input in line ? If you observe carefully, it is not in line with Actionbutton and Filter box. Right

Hi, that fine tuning you can achieve by adding CSS chunk above {r}

```{css daterange-height}
.input-daterange input {
  min-height: 34px;
  }

or adding inline CSS with tags$style()

column(width = 3,
                dateRangeInput(inputId = "Date", 
                               label = "Date",
                               start = "2016-01-01", 
                               end = Sys.time(),
                               format = "yyyy-mm-dd"), 
                tags$style(".input-daterange input {min-height: 34px;}")),

Capturar

Very perfect. Can you refer some good website to learn CSS in R shiny?

There are so many resources...
In my opinion, you should check these:

  1. Mastering Shiny by Hadley Wickham (Chapter 13: Advanced UI about integration with HTML and CSS),
  2. Mozilla’s CSS resources page, starting with CSS basics,

and, one very promissing book comming in 2020, Building Big Shiny Apps - A Workflow by Colin Fay, Vincent Guyader, Cervan Girard and Sébastien Rochette (unfortunately, Chapter 8: A Gentle Introduction to CSS is currently under development); definitely worth keeping eye on it.

Thanks a lot for this

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.