I'm using Bootstrap 4.3.1 if that makes any difference.
I have a button group that looks like this:
<div class="row mt-3">
<div class="col text-center">
<div id="alphabetGroup" class="btn-group flex-wrap" role="group">
<button id="btnHash" type="button" class="btn btn-outline-dark">#</button>
<button id="btnA" type="button" class="btn btn-outline-dark">A</button>
<button id="btnB" type="button" class="btn btn-outline-dark">B</button>
<button id="btnC" type="button" class="btn btn-outline-dark">C</button>
<button id="btnD" type="button" class="btn btn-outline-dark">D</button>
<button id="btnE" type="button" class="btn btn-outline-dark">E</button>
<button id="btnF" type="button" class="btn btn-outline-dark">F</button>
<button id="btnG" type="button" class="btn btn-outline-dark">G</button>
<button id="btnH" type="button" class="btn btn-outline-dark">H</button>
<button id="btnI" type="button" class="btn btn-outline-dark">I</button>
<button id="btnJ" type="button" class="btn btn-outline-dark">J</button>
<button id="btnK" type="button" class="btn btn-outline-dark">K</button>
<button id="btnL" type="button" class="btn btn-outline-dark">L</button>
<button id="btnM" type="button" class="btn btn-outline-dark">M</button>
<button id="btnN" type="button" class="btn btn-outline-dark">N</button>
<button id="btnO" type="button" class="btn btn-outline-dark">O</button>
<button id="btnP" type="button" class="btn btn-outline-dark">P</button>
<button id="btnQ" type="button" class="btn btn-outline-dark">Q</button>
<button id="btnR" type="button" class="btn btn-outline-dark">R</button>
<button id="btnS" type="button" class="btn btn-outline-dark">S</button>
<button id="btnT" type="button" class="btn btn-outline-dark">T</button>
<button id="btnU" type="button" class="btn btn-outline-dark">U</button>
<button id="btnV" type="button" class="btn btn-outline-dark">V</button>
<button id="btnW" type="button" class="btn btn-outline-dark">W</button>
<button id="btnX" type="button" class="btn btn-outline-dark">X</button>
<button id="btnY" type="button" class="btn btn-outline-dark">Y</button>
<button id="btnZ" type="button" class="btn btn-outline-dark">Z</button>
</div>
</div>
</div>
When looking on desktop, or any device that has a wide enough screen, it looks like this:
Alphabet Button Group
Now, when you go to a smaller screen, or mobile, it wraps around and instead looks like this:
Wrapped Button Group
I'm fine with how this looks, however there is something I would like to change:
I can make the top-left (first button) and bottom-right (last button) have the proper rounded corners, but how would I do this to the bottom-left and top-right buttons? Depending on the width of the window, the buttons themselves are not always the same, and I don't want to force group splitting (multiple groups at set breakpoints, etc).
Here's a JSFiddle you can play around with. For some reason it doesn't justify the buttons like in my own code, but it doesn't really matter - if you make the results pane thinner you can see the button group wrap, and the left side should be justified with the top line. If you can make that first line have border-bottom-left-radius then something similar should be able to be applied to the top right as well.
https://jsfiddle.net/cglatot/yu6w4rkv/1/
#alphabetGroup button:first-child
{
border-radius: 8px 0 0 8px;
}
#alphabetGroup button:last-child
{
border-radius: 0 8px 8px 0;
}
try something like this..
Related
I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.
User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.
The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
I have tried :focus in CSS but only 1 button can be select.
This is my code, I take out the onclick in button for test purposes.
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary">Tuesday</button>
<button type="button" class="btn btn-primary">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary">8 pm</button>
</div>
</div>
</div>
function switch_to_green(el){
//Check clicked button is on the same group
if(el.parentElement.getAttribute("data-group") == 1){
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for(let i =0; i<g1_buttons.length;i++){
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
}else{
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for(let i =0; i<g2_buttons.length;i++){
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green{
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
</div>
</div>
</div>
I have problem as below:
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
$("#active-all").click(function(){
$('.btn').toggleClass('active');
});
I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.
I try with jQuery load() and reload() but this seems not solving my problem.
UDATE
I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.
Need something like this?
$(".btn").click(function(){
if (this.id === 'active-all') {
$(".btn", $(this).parent()).toggleClass('active');
}
});
.active {
background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
<div id="secondTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)
i have a button group consist of four buttons,what i am trying to do is whenever user clicks on any button i want fetch its text
I am doing something like this
$(".btn").click(function() {
var button_text = $('#oneMonth').text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
I am doing something like this but its not the right way as i have to put each and every id of button to get the text
I want to do like if user clicks on any button just get the text of that button only
Use this keyword instead of specific selector in alert to get the text of the clicked button
var button_text = $(this).text();
This will always give the text of the button with id oneMonth
$('#oneMonth').text();
$(".btn").click(function() {
var button_text = $(this).text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
You can do this by adding the this jQuery to your code. Here is a working snippet:
var buttons = $("button");
buttons.click(function() {
$(".display__text").text($(this).text());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
<div class="display__text"></div>
I have a list of options the user can choose, and when the user clicks a button for the option, there is a jquery implementation that removes the button and appends a tag at the top of the page, the user has the option to remove this tag by clicking the 'X' on the tag and it will then be removed, and the button is place (append) back to where it came from. Everything is working except on page load, the buttons are all spaced apart appropriately, but if the user clicks the button and then decides to remove the tag from their selections, when the button is appended back to its original div, it touches the other buttons:
And if the user decides they don't want option any more, and remove it, the button is appended back to the original div, like this:
There is no margins or padding on the original images CSS, so I can't figure out what's causing this.
The HTML for the buttons is as follows:
<div id="skills-selection">
<h4>Skills:</h4>
<div id="skill-row">
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 1</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 2</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 3</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 4</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 5</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 7</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 8</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 11</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 12</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 13</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 14</button>
</div>
</div><!--skills selection-->
The jquery is as follows :
$(document).on('click', '.skilltag', function() {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove(); });
$(document).on('click', '.remove-skilltag', function() {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button>"); });
and the CSS that is style the buttons is:
.skilltag {
width: 80px;
line-height: .5;
height: 20px;
text-align: center;
display: inline-block; }
Does anyone know why this is happening?
White space is your issue, items horizontally aligned with display:inline-block take into account whitespace/linebreaks between elements.
Your markup starts like:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
but after appending your markup won't have the linebreak like so:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button><button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
You can either start your markup without the whitespace/linebreaks
or swap to floats to override display:inline-block
.skilltag {
float:left;
margin:2px;
...
}
Or change your append code to include whitespace
Because the buttons elements are inline-block when you're appending them there's no white space, whereas in your HTML there is white space.
If you add a space after the append tag it should resolve the issue. However it might be preferable to alter the CSS to space the buttons.
$(document).on('click', '.skilltag', function () {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove();
});
$(document).on('click', '.remove-skilltag', function () {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button> ");
});
Jsfiddle with it working: http://jsfiddle.net/juy2wknd/1/
There is break after each button in your html tag so which is why you see some space between the buttons. But when the button is appended back to its place there is not any brake between it and the last button before it so it will leave no space. Another thing is you did'nt give them some margin in your css.