Sorry, I have googled forever and I don't find the answer:
I have downloaded a css-file from Bootswatch and I have put it in my www directory where I have my app.R. Now I want to style my widgets to look like the different options presented at Bootswatch.
For example, to style an actionButton in the secondary button style, I put:
actionButton(
inputId = "action",
class = "btn-success")
How do I apply the more complicated styling source code? For example, for the selectInput widget the source code at Bootswatch is:
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
This corresponds to four different styling options for selectInput. If I want to apply the success styling of the above code to a selectInput, where do I put it: As options to the relevant selectInput? In some header or tags for Shiny? Somewhere else?
I have already put the:
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "mytheme.css"))
In my R-script, but I don't know what to do next. Trying to read up on CSS now.
Edit: An example. My radio buttons right now look like:
I want them to look like:
I'm stupid, just use buttons from here:
https://shinyapps.dreamrs.fr/shinyWidgets/
Related
I need to create a search bar that contains a search field, a dropdown and a search button. I've read the material on Bootstrap 4, but I can't achieve what I need with what they show there.
Also, how would I add the "down arrows"?
Thanks.
This code is something where you can start to achieve your requirement.
<div class="container">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
See the results in JsFiddle.
I already have a dropdown with the following code:
note: class='bg_r' is in CSS for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUpâ–˛</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
</div>
The output for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried).
Following is the code I tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.
Add btn-link class to button
Additionally add these styles to center align it
.bg_r {
background-color: aqua;
display: inline-flex;
align-items: center;
}
or add these 2 classes d-inline-flex align-items-center to bg_r span
.bg_r {
background-color: aqua;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<span class="bg_r d-inline-flex align-items-center p-1">
Language:
<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.
The above answer works, or you can also replace this line
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
by
Dropup
Using bootstrap 3 I am trying to produce a row of labeled dropdown menus with a final query button. However the buttons are floating to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right produces a reversed order of query button and choices with the labels in the right position.
<div class="btn-toolbar row">
<div class="btn-group">
<label class="btn-label">Topic:</label>
<button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
<button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_topic_menu" class="dropdown-menu">
<li>all</li>
<li>weather</li>
<li>sports</li>
<li>business</li>
<li>news</li>
<li>arts</li>
<li>science</li>
</ul>
</div>
<div class="btn-group">
<label for="choose_lang_title" class="control-label">Language:</label>
<button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
<button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_lang_menu" class="dropdown-menu">
<li>en-us</li>
<li>es-us</li>
</ul>
</div>
<div class="btn-group">
<a href="#">
<button id="query_data" type="button" class="btn btn-primary">Query</button>
</a>
</div>
</div>
Does bootstrap have a simple way to position a horizontal row of labeled dropdown menus?
Here is a jsfiddle demonstrating the issue: https://jsfiddle.net/cgalles/nqmqka2e/4/
You can change float of your labels (or you can add pull-left class to labels).
.btn-toolbar .btn-label {
float: left;
}
JSFIDDLE
I have the following code to display some buttons and dropdown menus.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
It works okay except one of the menus doesn't appear under the dropdown.
Fiddle here
Any ideas would be appreciated.
Looks like you are not using latest version of JQuery. Please update JQuery and use Bootstrap library to make this work.
In you fiddle, choose jQuery 2.1.0 and select Bootstrap 3.2.0 option.
Looks like I had to put the dropdown buttons into their own btn-group.
Fiddle here
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<div class="btn-group" role="group" aria-label="Dropdown Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>Enable
</li>
<li>Disable
</li>
</ul>
</div>
</div>
<div class="button-group pull-right">
<button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>
<button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>
</button>
</li>
<li>
<button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>
</button>
</li>
</ul>
</div>
</div>
I have the following code which displays some buttons:
Fiddle
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A
</li>
<li>B
</li>
</ul>
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.
Any ideas appreciated!
I would put the close ("X") button in its own .button-group and pull the group to the right:
<!-- previous button location -->
</div><!-- close the existing group -->
<div class="button-group pull-right">
<!-- new button location -->
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div><!-- end .btn-toolbar -->
Here's an update to your fiddle.
The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.
Updated HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
Configuration
<span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A</li>
<li>B</li>
</ul>
<button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
Updated CSS:
#b{
width:100%;
}
#right{
float:right;
}
Working Example:http://jsfiddle.net/tmurmvnx/
In bootstrap 4 you can use the strong text class, check this simple example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-lg float-right" role="group">
<button type="submit" class="btn btn-dark">
Btn 1
</button>
<button type="submit" class="btn btn-primary">
Btn 2
</button>
</div>
For more information check this documentation:
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment