CSS tag list for shiny UI-elements

[Willi Fiebranz]

Hi,

I try to style up my shiny app a bit.

While I managed to achieve that all the other elements have nice width, I do not figure out the ### in

tags$style(type="text/css", "### { width: 30em; }").

Can you help me?
And is there maybe some documentation on all possible classes of Shiny elements?

Thanks.

[Kirill Savin]

### is called CSS selector. Good start would be to pick some intro book on HTML/CSS. Would take you 1-2 days to feel comfortable with it. There is also a nice reference on CSS/HTML on w3schools.
To inspect your webpage I highly recommend Firebug add-on for Firefox. You can just pick an element/control with a mouse and see where it is nested in HTML and what styles are assigned to it. It is also great for Javascript debugging.

[Willi Fiebranz]

Thanks, for the hint.

Actually I was more specifically asking about the specific class names of shiny UI elements. I picked some up here in the forum, but cannot find a exhaustive list of all.

Because if I look at the source code of the page

 <div id="file_progress" class="progress progress-striped active shiny-file-input-progress">

does not get me far.

thanks

[Kirill Savin]

The recipe I suggested works. Say you want to size file input and it's progress bar.

First the Browse button and a file name.
Pick this element in Firebug. It corresponds to the <input id="fileInp" class="shiny-bound-input" type="file">

You can change it by id (fileInp is how I called it in R) and write #fileInp{width:100%;}. "#" means id selection in CSS. In that case only this file input will resize.

If you want to change multiple elements at once you need do select a group. You can navigate to style tab in firebug and notice that it is set to auto in bootstrap.min.css input[type="file"]{width:auto;}
auto means it would fit its content. So if your filename is long, your control would be to wide and will go outside the sidebar. So we need to either set it to fixed px/em or in % of parent width.
Therefore, add input[type="file"]{width:100%;} to your styles to override the whole group, or input{width:100%;} to change all inputs.

Now the progress bar.
By default its width is set inline to 100% and the bar is located inside
<div id="fileInp_progress" class="progress progress-striped shiny-file-input-progress" style="visibility: visible;">
So you can either select it by id like #fileInp_progress:{width:80px;} to change individually, or by class with a (.progress) selector:
.progress{width:80px}

That's the easiest way to do it. If you want extra work, all the class names can be found in bootstrap.min.css and shiny.css, try to figure them out :)

[Willi Fiebranz]

Thank you very much. Good to read this in such a comprehensive form. I think it did not work with my variables because I used dots like "#variable.name" when naming my elements.

Is it possible?