Arranging the R shiny selectInput controls in the correct position

I am looking for help with adjusting the position of two selectInputs in my R Shiny script. Currently, the dropdown is not appearing clearly and I've tried using padding without success. I have attached a snapshot for reference. Any assistance would be greatly appreciated.

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "first Chart"),
dashboardSidebar(
width = 0),
dashboardBody(
box(
  splitLayout(

    cellArgs = list(style = "padding: 2px;padding-top:0px;"),

  selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
  "400"),
  selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
  "400")),
  title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
  T,
    plotlyOutput("first_plot"))))
    server <- function(input, output) 
    { 
    output$first_plot <- renderPlotly({
    p <- plot_ly(
    x = c("giraffes", "orangutans", "monkeys"),
    y = c(20, 14, 23),
    name = "SF Zoo",
    type = "bar"
    )
    })
    }
    shinyApp(ui, server)

https://i.sstatic.net/SebaE.png

cssrshinyshinydashboard

Answer №1

If you want to create your UI using fluidRow and column in a different way, which I believe resolves your problem - the dropdowns should now function correctly. I hope this solution helps!

https://i.sstatic.net/4H2Ksm.png

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
  dashboardHeader(title = "first Chart"),
  dashboardSidebar(
    width = 0),
  dashboardBody(
    box(      title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
                T,
fluidRow(width=12,
         column(width=6,
        selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
                      "400")),
        column(width=6,
        selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
                      "400"))),
fluidRow(
column(width=12,
      plotlyOutput("first_plot"))))))

server <- function(input, output) 
{ 
  output$first_plot <- renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
}
shinyApp(ui, server)

An alternative approach with reduced spacing between the box header and the selectInputs:

https://i.sstatic.net/QX62Am.png

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
  dashboardHeader(title = "first Chart"),
  dashboardSidebar(
    width = 0),
  dashboardBody(
    box(      title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
                T,
              div(id='my_div',style='margin-top:-20px;',
              fluidRow(width=12,
                       column(width=6,
                              selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
                                            "400")),
                       column(width=6,
                              selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
                                            "400")))),
              fluidRow(
                column(width=12,
                       plotlyOutput("first_plot"))))))

server <- function(input, output) 
{ 
  output$first_plot <- renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
}
shinyApp(ui, server)

Answer №2

To stick with your original method instead of using `fluidRow`, simply adjust the padding to only apply to the bottom portion.

library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "first Chart"),
dashboardSidebar(
width = 0),
dashboardBody(
box(
  splitLayout(

    cellArgs = list(style = "padding: 0px 0px 70px 0px;"),

  selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
  "400"),
  selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
  "400")),
  title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
  T,
    plotlyOutput("first_plot"))))
    server <- function(input, output) 
    { 
    output$first_plot <- renderPlotly({
    p <- plot_ly(
    x = c("giraffes", "orangutans", "monkeys"),
    y = c(20, 14, 23),
    name = "SF Zoo",
    type = "bar"
    )
    })
    }
    shinyApp(ui, server)

When you specify four values for padding instead of one, they are applied in this order: `top` `right` `bottom` `left`.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Ways to adjust the dimensions of a textarea based on character count

When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...

htmlcsstextarea

Show a concealed dropdown menu within a CSS grid column utilizing clip-path styling

Working on a Django admin header that makes use of CSS grid to create two columns. I have added a JavaScript dropdown effect to the user icon for displaying options like "Change Password" and "Log Out". However, encountering an issue where the dropdown rem ...

javascriptcssdjangogriddjango-admin

Create a dynamic HTML design with a resizable left panel and a static right panel. The left panel should not wrap text and display ellipsis if necessary

I am looking to display items in a list with a specific format: |Name | Some other val1| |Very very long no wrap line that...| Some other val2| The right side needs to have a fixed width. The left side should fill al ...

htmlcss

The CSS hover effect is not being implemented correctly. Can you identify the specific issue that is causing this problem?

I am working on creating a dynamic Search List for the Search Bar that changes color when hovered over and gets selected when clicked from the displayed item list. searchlist.jsx: import React from 'react' import { FaSearch } from 'react-ic ...

cssonclickhoverjsxbackground-color

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Navigating through a dynamic buffer in R to search for intersections within a spatial point grid

I'm facing a rather intricate problem and feeling unsure of how to approach it. I have a collection of spatial points with X, Y coordinates, along with Height information. set.seed(12345) X = runif(100, 0, 45) Y = runif(100, 0, 45) Height = runif(10 ...

rspatialraster

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss

"Displaying <canvas> at its true resolution even when zoomed in, thanks to Retina technology

I am currently working with a <canvas> element to create vector graphics and I want to ensure that it displays in the highest quality possible while using minimal resources across various viewing conditions. Specifically, I aim to achieve a 1:1 mappi ...

csshtmlcanvaszoomingretina-display

Error message encountered: "Element not located- Capybara unable to find element despite its existence

I’m currently in the process of writing a selenium test using capybara, and I’ve encountered an issue when trying to populate a pop-up box. Specifically, I am unable to input the element’s name using the fill_in method in capybara. Strangely, this me ...

cssseleniumcss-selectorscapybara

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

I'm trying to create a navbar link that will take me directly to a specific section of a page, but I'm having trouble getting it to work. Here's what I've tried: <a href="home#id" class="nav-link text on-hover"></a> Where ...

htmlcssangular

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

javascripthtmlcssinternet-explorerfirefox

Steps to modify the background color of an IconButton upon clicking in Material UI

After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...

csstypescriptmaterial-ui

Display the years within a data table utilizing R

I have a dataframe containing two different dates: Creation Date Last Visited My goal is to display all the unique years present in my data using a loop: 1989 2017 2018 2019 2020 2021 I attempted to write a code to achieve this, but I encountered an er ...

r

Adding ids dynamically to href elements in Vue.js

As a newcomer, I am facing an issue with dynamically adding an id to my href tag. Below is the code snippet: <div class="col-md-6" v-for="Product in data"> <div class="panel panel-default" > <div class="panel-heading"> ...

htmlcssvue.jsbootstrap-4

Troubleshooting with matTootip on Safari: Tips for avoiding input-text blockage

I am currently using the matTooltip feature from Angular Material for an input field. However, on Safari, the input field appears to be overlapping, making it impossible to type in. Despite my attempts to change the position of the toolTip, the issue pers ...

cssangularangular-material

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Looking for assistance with aligning a form in the center?

After spending the last hour trying to center a form for a name without success, I have decided to seek help here. Although I have searched extensively, I am still struggling at this point. Here is my HTML: <div id="main" class="main"> <tabl ...

htmlcssformsinputalignment

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

htmlcssreactjs

Image overlay on a hovering background

I'm currently facing a challenge with creating a hover effect for a background image while keeping the image in front unchanged. I would like the background to darken on hover, but I want the image in front of it to remain the same. Essentially, I ne ...

htmlcssimagebackgroundhover