CODEWITHSUNDEEP
rshinyalignmentshinydashboard
Anakin Skywalker
Anakin Skywalker

Reputation: 2520

Align four elements on Shiny dashboard

I struggled with three elements, but resolved here

Now struggling with FOUR elements. I still do not see a simple tutorial, which can help me to understand this question and do not disturb SO community about this anymore.

What do I want? To align four elements properly. To put barchart below filters. Then it will be a perfect alignment.

My ui looks like this

# User interface
ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Crimes in Washington, DC (2017) </font></center></h1>")),
            # titlePanel("Crimes in Washington, DC (2017)", align = "center"), 
            fluidRow(column(4, align="center", 
                            selectInput("offenceInput", "Type of Offence",
                                        choices = sort(unique(incidents$Offense)),
                                        selected = sort(unique(incidents$Offense)),
                                        multiple = TRUE),
                            selectInput("methodInput", "Method of Offence",
                                        choices = sort(unique(incidents$Method)),
                                        selected = sort(unique(incidents$Method)),
                                        multiple = TRUE),
                            selectInput("shiftInput", "Police Shift",
                                        choices = sort(unique(incidents$Shift)),
                                        selected = sort(unique(incidents$Shift)),
                                        multiple = TRUE),
                            selectInput('background', 'Background',
                                        choices = providers,
                                        multiple = FALSE,
                                        selected = 'Stamen.TonerLite'),
                            dateRangeInput('daterangeInput',
                                             label = 'Date',
                                             start = as.Date('2017-01-01') , end = as.Date('2017-12-31')
                              )
            ),

            column(8,
                   leafletOutput(outputId = 'map', height = 600, width = 800),

            column(10, plotOutput("bar"),

            column(12,
                       dataTableOutput('my_table')
            )
            )

)))

But it looks messy on my screen.
Current status

Upvotes: 0

Views: 1227

Answers (1)

Anakin Skywalker
Anakin Skywalker

Reputation: 2520

Resolved with R Community. Requires additional work, but I achieved the desired result. 

# User interface
ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Crimes in Washington, DC (2017) </font></center></h1>")),
            fluidRow(column(4, align="center", 
                            selectInput("offenceInput", "Type of Offence",
                                        choices = sort(unique(incidents$Offense)),
                                        selected = sort(unique(incidents$Offense)),
                                        multiple = TRUE),
                            selectInput("methodInput", "Method of Offence",
                                        choices = sort(unique(incidents$Method)),
                                        selected = sort(unique(incidents$Method)),
                                        multiple = TRUE),
                            selectInput("shiftInput", "Police Shift",
                                        choices = sort(unique(incidents$Shift)),
                                        selected = sort(unique(incidents$Shift)),
                                        multiple = TRUE),
                            selectInput('background', 'Background',
                                        choices = providers,
                                        multiple = FALSE,
                                        selected = 'Stamen.TonerLite'),
                            dateRangeInput('daterangeInput',
                                             label = 'Date',
                                             start = as.Date('2017-01-01') , end = as.Date('2017-12-31')
                              ),
                            br(),
                            plotOutput("bar")
            ),

            column(8,
                   leafletOutput(outputId = 'map', height = 600, width = 800),

                       dataTableOutput('my_table')

            )

))

Result

Upvotes: 1

Related Questions