Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it behave like a download button when the window is resized. Any assistance on this matter would be greatly appreciated.

Image display with wide sidebarPanel:

Image display with narrow sidebarPanel:

Below is the code snippet including the parts that were commented out in my adjusted fileInput for future reference:

library(shiny)

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){
  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")
  # div(class = "form-group shiny-input-container", style = if (!is.null(width)) 
  # paste0("width: ", validateCssUnit(width), ";"), #label %AND% 
  # tags$label(label), 
  #div(class = "input-group", 
  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )#, 
  #tags$label(class = "input-group-btn", type="button", span(class = "btn btn-default", buttonLabel, inputTag))#, 
  #tags$input(type = "text", class = "form-control", placeholder = placeholder, readonly = "readonly")
  #)
  # tags$div(id = paste(inputId, "_progress", sep = ""), class = "progress progress-striped active shiny-file-input-progress", tags$div(class = "progress-bar"))
  # )
}

ui <- fluidPage(sidebarLayout(
  sidebarPanel(
    fileInputNoExtra("test1",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button1"),width="200px"),
    fileInputNoExtra("test2",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button2"),width="200px"),
    downloadButton("test3",label="Normal download button3"),
    downloadButton("test4",label="Normal download button4")
  ),
  mainPanel()

))


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

}

shinyApp(ui = ui, server = server)

Answer №1

You were so close! To perfect your code, just remember to include display: inline-block within the class = "input-group-btn" section. Here is how the revised version of fileInputNoExtra will appear:

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){

  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")

  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px; display: inline-block;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )
} 

By implementing this adjustment, you can achieve the desired outcomes as shown in the following images:

and

I hope this enhancement proves beneficial!

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

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

I've been trying to incorporate a YouTube video into my webpage using a CSS stylesheet, but I can't seem to get the video to display properly .youtube-video iframe, .youtube-video img, .youtube-video-2 iframe, .youtube-video-2 img { positi ...

:after functionality not operating properly in Internet Explorer

The titles on this page have arrows displayed before them using a special styling. However, there seems to be an issue with how it displays on Internet Explorer. // edit : I made a mistake, my styling is actually on paragraph tags 'p'. Maybe tha ...

Adjust the vertical size and smoothly lower a text input field

When a user clicks on a textarea, I want it to smoothly change height to 60px and slide down in one fluid animation. Check out the JSFiddle example here: http://jsfiddle.net/MgcDU/6399/ HTML: <div class="container"> <div class="well"> ...

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

Hey there! I'm working on this website using Bootstrap, and I've encountered a problem. When you click the "See Wikipedia" button, the content expands and overlaps the footer in a strange way without changing the page height. I've tried adju ...

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Hey there, I've run into a bit of an issue with two divs containing tables - one acting as a header and the other as a scrollable content area. Everything is working perfectly except for this mysterious border/margin that keeps appearing in Chrome on ...

Struggling to animate the selector of a nested div in Jquery?

Despite trying numerous variations, I am struggling to identify the correct selector of a nested div. The goal is to animate this particular div, but since no animations are taking place, I suspect that I have not selected the right element. Here is the a ...

Utilizing Jquery cycle to overlay a div on top of a scrolling image

Hey there! I'm currently using the jquery.cycle.all.js plugin for my website. I've encountered an issue where I want to position a menu div on top of an image slider. The menu is in the correct location, but unfortunately, it's hidden benea ...

When adjusting the top margin of the main content in CSS, the fixed top navigation section's margin also decreases simultaneously with the main content

I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

What is the best way to utilize Rselenium's findElement() function in order to target an xpath based on its text content

Despite researching similar questions on stack overflow, I have not been able to make my code work. Here is the initial code I am working with: library(RSelenium) library(rvest) remote_driver <- RSelenium::remoteDriver( remoteServerAddr = "local ...

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

Is there a way to expand this embedded video so that it spans the entire width of the screen

I have a code snippet with one row and two columns. I would like to embed a video from Vimeo in the first column so that it fills the entire column without any padding. Additionally, I want the two columns to be right next to each other with no space betwe ...

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link re ...

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

How to Left Align Div Centered Within Another Div?

I've encountered an issue with centering icons in my HTML code. Despite trying to fix it myself, the icons always appear left-aligned. I would greatly appreciate any assistance from the helpful members of this community. It's likely a simple fix ...

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. For example, the first button appears normal and the second one turns blue after clicking. However, this background effect disappears when clicking anywhe ...