Similar to the button toolbar, I'm trying to implement a colour coded likert scale in my view (I'm using ASP.net) with labels on either side.
"not dangerous" [1][2][3][4][5] "dangerous"
[dark green][light green][yellow][orange][red]
https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4
Any ideas? Thanks!
2 part answer:
Likert - use a disabled .btn-link either side
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Safe</a>
<button type="button" class="btn btn-default likert-1">1</button>
<button type="button" class="btn btn-default likert-2">2</button>
<button type="button" class="btn btn-default likert-3">3</button>
<button type="button" class="btn btn-default likert-4">4</button>
<button type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Dangerous</a>
</div>
</div>
Color - just override the '.btn' colouring:
.btn.likert-1 { background-color: darkgreen; color: yellow; }
.btn.likert-2 { background-color: lightgreen; color: brown; }
.btn.likert-3 { background-color: yellow; color: brown; }
.btn.likert-4 { background-color: orange; color: white; }
.btn.likert-5 { background-color: red; color: white; }
/* Choose better colors tho! */
See this JSFiddle for an example.
Related
I have a parent View model:
var monthVM = function (mData) {
this.Id = mData.Id;
this.Name = mData.Name;
if (mData.Days != null) {
$.each(mData.Days, function (index, item) {
var newDay = new dayVM(item, index);
this.Days.push(newDay );
});
}
}
And dayVM:
var dayVM= function (dData, index) {
this.Id=dData.Id;
this.Mon = ko.observable(dData.Mon);
this.Tue = ko.observable(dData.Tue);
this.Wed = ko.observable(dData.Wed);
this.Thu = ko.observable(dData.Thu);
this.Fri = ko.observable(dData.Fri);
this.Sat = ko.observable(dData.Sat);
this.Sun = ko.observable(dData.Sun);
this.didOnMon = function (item) {
if (item.Mon() == false) item.Mon(true);
else item.Mon(false);
//other stuff
}
this.didOnTue = function (item) {
if (item.Tue() == false) item.Tue(true);
else item.Tue(false);
//other stuff
}
}
The HTML binding
<div class="row">
<div class="col-9 btn-group">
<button data-bind="css: Mon() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeMon">Mon</button>
<button data-bind="css: Tue() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeTue">Tue</button>
<button data-bind="css: Wed() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeWed">Wed</button>
<button data-bind="css: Thu() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeThu">Thu</button>
<button data-bind="css: Fri() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeFri">Fri</button> div
<button data-bind="css: Sat() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSat">Sat</button>
<button data-bind="css: Sun() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSun">Sun</button>
</div>
</div>
I need to add a border like grouping the buttons that are dark, one next to other, but still keeping the design: the buttons are filling col-9 div like
Every time one of the buttons becomes white, it should adjust the outline for the other dark ones.
I've tried using
.btn-dark-custom {
outline: 1px solid black;
outline-offset: 2px;
}
<button class="btn btn-dark btn-dark-custom" onclick="changeWed()">Wed</button>
but it draws the border for each dark button, not as a group.
I've also tried adding border lines, in JS, but I cannot add the offset to it.
In pure css it's a bit complex, but here is a possibility (Jquery is used just for the click class toggle) :
$('.elem').click(function(){$(this).toggleClass('active')})
/* BASE */
.elem {
float:left;
background: #eee;
padding: 5px 10px;
cursor: pointer;
position: relative;
}
.elem.active {
background: #444;
color: #eee;
}
/* PSEUDO ELEMENT */
.elem::after {
position: absolute;
z-index: 1;
left: -4px;
top: -4px;
right: -4px;
bottom: -4px;
border: 2px solid black;
}
/* SHOW PSEUDO ELEMENT IN .ACTIVE */
.elem.active::after {
content: '';
}
/* SELECT .ACTIVE BEFORE OTHER .ACTIVE */
.elem.active + .elem.active::after {
border-left: none;
border-right: none;
}
/* SELECT .ACTIVE FIRST CHILD OR FIRST ELEM AFTER NOT ACTIVE */
.elem.active:first-child::after,
.elem:not(.active) + .elem.active::after {
border-right: none;
}
/* SELECT LAST CHILD */
.elem.active:last-child::after {
border-right: 2px solid black !important;
}
/* TRICKS LAST .ACTIVE SUCCESSIVE */
.elem.active + .elem:not(.active)::after {
content: '';
border: none;
border-left: 2px solid black;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="elem active">Mon</div>
<div class="elem active">Tue</div>
<div class="elem">Wed</div>
<div class="elem active">Thu</div>
<div class="elem active">Fri</div>
<div class="elem active">Sat</div>
<div class="elem">Sun</div>
</div>
The outline is applied to entire element so it will be drawn over each element. It is drawn on top of element so you can't hide it. The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top and doesn’t influence the position or size of the box, or of any other boxes.ref
Pure CSS solution You can create outline like effect using ::before pseudo element:
body {
padding: 1rem;
}
:root {
--outline-color: black;
--cover-border: 2px solid white;
}
.btn-light {
background-color: #ddc !important;
z-index: -1000;
}
.btn-dark {
position: relative;
border-radius: 0px !important;
border-top: var(--cover-border) !important;
border-bottom: var(--cover-border) !important;
border-right: var(--cover-border) !important;
border-left: none !important;
}
.btn-dark::before {
content: '\a0';
display: block;
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background-color: var(--outline-color);
border-radius: 0.25rem;
z-index: -100;
}
.btn-dark:first-child,
.btn-light+.btn-dark {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-left: var(--cover-border) !important;
}
.btn-dark:last-child {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-right: var(--cover-border);
}
.btn-dark+.btn-dark {
margin-left: -2px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-9 btn-group">
<button class="btn btn-dark btn-xs mt-1">Mon</button>
<button class="btn btn-dark btn-xs mt-1">Tue</button>
<button class="btn btn-dark btn-xs mt-1">Wed</button>
<button class="btn btn-light btn-xs mt-1">Thu</button>
<button class="btn btn-light btn-xs mt-1">Fri</button>
<button class="btn btn-dark btn-xs mt-1">Sat</button>
<button class="btn btn-dark btn-xs mt-1">Sun</button>
</div>
<div class="mt-1"> </div>
<div class="col-9 btn-group">
<button class="btn btn-dark btn-xs mt-1">Mon</button>
<button class="btn btn-light btn-xs mt-1">Tue</button>
<button class="btn btn-dark btn-xs mt-1">Wed</button>
<button class="btn btn-light btn-xs mt-1">Thu</button>
<button class="btn btn-dark btn-xs mt-1">Fri</button>
<button class="btn btn-light btn-xs mt-1">Sat</button>
<button class="btn btn-dark btn-xs mt-1">Sun</button>
</div>
<div class="mt-1"> </div>
<div class="col-9 btn-group">
<button class="btn btn-light btn-xs mt-1">Mon</button>
<button class="btn btn-dark btn-xs mt-1">Tue</button>
<button class="btn btn-dark btn-xs mt-1">Wed</button>
<button class="btn btn-light btn-xs mt-1">Thu</button>
<button class="btn btn-dark btn-xs mt-1">Fri</button>
<button class="btn btn-dark btn-xs mt-1">Sat</button>
<button class="btn btn-light btn-xs mt-1">Sun</button>
</div>
<div class="mt-1"> </div>
<div class="col-9 btn-group">
<button class="btn btn-light btn-xs mt-1">Mon</button>
<button class="btn btn-light btn-xs mt-1">Tue</button>
<button class="btn btn-light btn-xs mt-1">Wed</button>
<button class="btn btn-light btn-xs mt-1">Thu</button>
<button class="btn btn-light btn-xs mt-1">Fri</button>
<button class="btn btn-light btn-xs mt-1">Sat</button>
<button class="btn btn-light btn-xs mt-1">Sun</button>
</div>
<div class="mt-1"> </div>
<div class="col-9 btn-group">
<button class="btn btn-dark btn-xs mt-1">Mon</button>
<button class="btn btn-dark btn-xs mt-1">Tue</button>
<button class="btn btn-dark btn-xs mt-1">Wed</button>
<button class="btn btn-dark btn-xs mt-1">Thu</button>
<button class="btn btn-dark btn-xs mt-1">Fri</button>
<button class="btn btn-dark btn-xs mt-1">Sat</button>
<button class="btn btn-dark btn-xs mt-1">Sun</button>
</div>
</div>
Possible JavaScript solution You can set outline to .btn-group in CSS. And every time user toggles a button, group all black buttons in their own .btn-group wrappers.
For example, if user deselects Thursday and Friday you can have DOM like this:
body {
padding: 1rem;
}
.my-group {
white-space: nowrap;
}
.btn-group {
padding: 0px !important;
outline-offset: 2px;
outline: 1px solid black;
border-radius: 0.25rem !important;
}
.btn-group>.btn {
margin: 0px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-9 my-group">
<div class="btn-group">
<button class="btn btn-dark btn-xs mt-1">Mon</button>
<button class="btn btn-dark btn-xs mt-1">Tue</button>
<button class="btn btn-dark btn-xs mt-1">Wed</button>
</div>
<button class="btn btn-light btn-xs mt-1">Thu</button>
<button class="btn btn-light btn-xs mt-1">Fri</button>
<div class="btn-group">
<button class="btn btn-dark btn-xs mt-1">Sat</button>
<button class="btn btn-dark btn-xs mt-1">Sun</button>
</div>
</div>
</div>
You can write javascript to have structure like above every time user selects/deselects a button.
try pseudo-elements like ::before, ::after. Here is an example:
.black-button {position: relative;}
.black-button::before {
position: absolute;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 2px solid black;
}
I am trying to recreate Microsoft Windows 10 calculator (check it out for reference). I am unable to align all my buttons since the buttons contain different letters and symbols. I want my all buttons to be exactly the same size and be next to each other with no spaces in between them.
Also, while posting this I noticed that my display is sticking out to the right more. Any idea for a fix?
Link to HTML and CSS combined:
https://codepen.io/anon/pen/jpLOjP
HTML:
<body>
<form id="calculatorForm">
<input type="text" id="display">
<div class="row">
<!--percent-->
<button type="button" onclick="calculate()">%</button>
<!--sq root-->
<button type="button" onclick="calculate()">√</button>
<!--x^2-->
<button type="button" onclick="calculate()">x²</button>
<!--1/x-->
<button type="button" onclick="calculate()">¹⁄<sub>x</sub></button>
</div>
<div class="row">
<button type="button" onclick="calculate()">CE</button>
<button type="button" onclick="reset()">C</button>
<!-- remove -->
<button type="button" onclick="calculate()">⇍</button>
<button type="button" onclick="calculate()">÷</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">7</button>
<button type="button" onclick="calculate()">8</button>
<button type="button" onclick="calculate()">9</button>
<button type="button" onclick="calculate()">×</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">4</button>
<button type="button" onclick="calculate()">5</button>
<button type="button" onclick="calculate()">6</button>
<button type="button" onclick="calculate()">−</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">1</button>
<button type="button" onclick="calculate()">2</button>
<button type="button" onclick="calculate()">3</button>
<button type="button" onclick="calculate()">+</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">±</button>
<button type="button" onclick="calculate()">0</button>
<button type="button" onclick="calculate()">⋅</button>
<button type="button" onclick="calculate()">=</button>
</div>
</form>
</body>
CSS:
#display {
font-size: 90px;
width: 100%;
}
form {
background: #eee;
border: solid grey;
display: block;
margin: 0 auto;
width: 450px;
padding: 10px;
}
.row {
font-size: 0px;
text-align: center;
margin: 0 auto;
}
.row button {
width: 25%;
height: 60px;
font-size: 40px;
font-family: calibri;
}
You're looking for vertical-align.
.row button{
vertical-align: middle;
}
I have two buttons and I would like to swap them using float. How can I do it?
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
Thank you. Any help would be appreciated.
With additional CSS, you could float the cancel button to the right.
.modal-footer .btn-default {
float:right
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
or
You can use one of the helper classes on the first button --- pull-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
You may additionally need to add a clearfix depending on other content in the modal.
Using flexbox:
You can use the flexbox property order. Like the property name suggests, it changes the order of flex-items.
More info here.
Code Snippet:
.modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
order: -1;
}
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
.right {
float: right;
}
.left {
float: left;
}
<div class="modal-footer">
<button type="button" class="right btn btn-default">Cancel</button>
<button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>
you can also use
order: 1 and order: -1
.modal-footer {
display: -webkit-flex; /* Safari */
display: flex;
}
.first {
order: 1
}
.second {
order: 2
}
<div class="modal-footer">
<button type="button" class="second btn btn-default">Cancel</button>
<button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>
read CSS order property
How do I make my button transparent? I have been trying to use .btn-transparent but cant seem to get it to work. The button just keeps turning grey.
<button type="button" class="btn btn-transparent">SEARCH</button>
make css to .btn-primary-outline
example like this : https://jsfiddle.net/472cxwg9/
Use class="btn" and style="background-color:transparent" instead of class="btn btn-primary-outline"
result
You can do this in Bootstrap 4 without any in-line styling
<button type="button" class="btn bg-transparent btn-outline-primary"></button>
Bootstrap 4 introduced button link style: .btn-link:
Deemphasize a button by making it look like a link while maintaining button behavior
<button type="button" class="btn btn-link">Link</button>
The .btn-link class has background-color set to background-color: transparent; (also the button borders are transparent border-color: transparent;).
In bootstrap 3 I added:
.btn-primary-outline {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
To:
<div class="col-xs-3" style="margin-top: 25px;">
<button type="button" class="btn btn-primary-outline">
<span style="display: inline; font-size: 30px; color: #007bff;" class="material-icons save">
</span>
</button>
</div>
As of Bootstrap 5, you can use any of:
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Docs: https://getbootstrap.com/docs/5.2/components/buttons/#outline-buttons
Just use btn class and you'll get a transparent button.
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
<div id="reading-sidebar" class="col-xs-3 panel-default">
<div id="reading-sidebar-title" class="panel-heading">Options
<button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
<div id="reading-sidebar-contents" class="panel-body">
<ul class="sidebar-button-list">
<button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button><br>
<button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br>
<button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br>
<button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br>
<button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</ul>
</div>
</div>
The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
<div id="reading-sidebar" class="col-xs-3 panel-default"></div>
<div id="reading-sidebar-contents" class="panel-body">
<div class="btn-group-lg btn-group-vertical">
<button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>
If I get your question right. Do you mean this:
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
#reading-sidebar
{
width:80%;
margin:0 auto;
}
#reading-sidebar-contents button
{
width:100%;
margin:0 auto;
}
Link: https://jsfiddle.net/66bk2rfc/1/
I suggess You to do it like this:
.btn {
width: 100%;
height: 56px;
padding-left: 2% !important;
}
.btn i {
left: 10px;
width: 10%;
top: 25%;
height: 50%;
}
.btn.pull-left {
text-align: left;
}
Also if you just want only these affect to sidebar buttons, add
#reading-sidebar .btn { } ETC...
If you want it not 100% width and centered, You should do it like this,
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)