I have three toggle "Image Buttons" within a button group on my HTML page
Initially all three buttons will show the black and white versions of their associated images.
When the user clicks on a particular image button, I want to display a colour version of the associated image.
Only one of the buttons should display a colour image at any one time.
If the user subsequently clicks on a different image button
The first image button clicked must reset its image back to the black and white version and the newly clicked on image button must display its colour image.
Heres as far as I have got displaying my three image buttons
<div class="container text-center">
<div class="row">
<div class="btn-group" data-toggle="buttons">
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="unhappy-img" src="images/1f621.png" class="hidden"/>
</button>
</div>
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="neutral-img" src="images/1f610.png" class="hidden"/>
</button>
</div>
<div class="col-md-4">
<button class="btn btn-default">
<img id="riddler-img" src="images/2754.png" />
<img id="happy-img" src="images/1f600.png" class="hidden" />
</button>
</div>
</div>
</div>
</div>
Is it possible to achieve the desired effect without employing javascript?
Related
I'm running into a similar issue as this question, in that I need the data-toggle option on a button to take two parameters.
I'm making a multi-card collapse with radio buttons. I.e., we have three options. When an option is selected, any open cards are collapsed, and the selected card is un-collapsed. What I'd also like is the selected button to stay selected.
<button href="#option1" class="btn btn-outline-primary" data-toggle="collapse">Option 1</button>
<button href="#option2" class="btn btn-outline-primary" data-toggle="collapse">Option 2</button>
<button href="#option3" class="btn btn-outline-primary" data-toggle="collapse">Option 3</button>
<div id="parent">
<div id="option1" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 1
</div>
</div>
<div id="option2" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 2
</div>
</div>
<div id="option3" class="collapse panel" data-parent="#parent">
<div class="card card-body">
Details of option 3
</div>
</div>
</div>
The trouble is, you can only specify one option to data-toggle, so when the buttons are clicked at the moment, they don't go into their active state, which would happen if I could specify something like data-toggle="collapse button"
Unfortunately, all the searching I've done for two data toggle parameters only leads to people asking about adding tooltips to buttons. Is there any way in bootstrap of changing the button's state while also using it to collapse elements?
I can not order my different div as I wish.
First, I would like the card to be the same height as my title.
Then, I want the bottom of my 2 buttons are at the same height as the bottom of my card.
I guess this is possible but I'm stuck ... Could you help me?
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
<div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
[
You should remove the margin-left:51% given to your card as you do not need margins when working with bootstrap grid. Also, you should move the buttons into the same first column container in order to align them along with the title.
<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
<div class="col-5" style="margin-top:2%">
<h3>Change your user profile</h3>
<div>
<button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
<button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
</div>
</div>
<div class="card border-primary md-5 col-6" style="width: auto;">
<div class="card-header" style="font-size:22px">Attention</div>
<div class="card-body">
<p class="card-text">
The modified data must first be validated. <br /><br />
A request will be sent as soon as you click on "Submit". <br /><br />
It is normal that the old data is still displayed, it means that the validation has not been done yet.
</p>
</div>
</div>
</div>
Also, I would highly recommend removing inline styles and using CSS classes instead.
Working fiddle here: http://jsfiddle.net/omxahu46/
Hope this helps.
I have problems with the layout of two grouped buttons, which are in the same group but in different columns. The buttons are supposed to be radio buttons in the style of simple btn btn-primary bootstrap buttons.
The first problem is that the actual radio button is displayed in the btn-primary button. When clicking the btn-primary button, it works just fine. But if I happen to check the radio button inside the btn-primary button, the btn-primary button will appear checked, but actually isn't (the radio button isn't checked).
The second problem I tried to solve is to make the radio button inside the button disappear. But I can't seem to find a solution that works with button grouping inside different columns.
Here's a picture of the modal dialog with the stated buttons. You can see the second btn-primary button appearing checked, even though the left "Type 1" button is actually checked.
HTML:
<div class="container">
<h3>{{ 'ADDGROUP_MODEL' | translate }}</h3>
<div class="row">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<div class="column"><img class="img" src="http://via.placeholder.com/172x200" align="middle"><label class="btn btn-primary active"><input type="radio" id="radioAddModel1" name="groupModelRadio" autocomplete="off">{{
'ADDGROUP_CHOOSEMODEL1' | translate }}</label> </div>
<div class="column"><img class="img" src="http://via.placeholder.com/172x200" align="middle"><label class="btn btn-primary"><input type="radio" id="radioAddModel2" name="groupModelRadio" autocomplete="off">{{
'ADDGROUP_CHOOSEMODEL2' | translate }}</label> </div>
</div>
</div>
</div>
Every help is highly appreciated,
thanks in advance,
a.j.stu
There are many ways to achieve what you want. If followed by your approach of using radio buttons, you should make use of ng-model on radio buttons & hide them with visibility: hidden property. And then you can make use of angular's ng-class to have style on label buttons when particular selected.. You can have template like:
<label class="btn btn-primary" ng-class="{'selected': radioAddModel === '1'}">
<input type="radio" id="radioAddModel1" ng-model="radioAddModel" name="groupModelRadio"
value="1" autocomplete="off" class="hide">{{'ADDGROUP_CHOOSEMODEL1' | translate }}
</label>
<label class="btn btn-primary" ng-class="{'selected': radioAddModel === '2'}">
<input type="radio" id="radioAddModel2" ng-model="radioAddModel" name="groupModelRadio"
value"2" autocomplete="off" class="hide">{{'ADDGROUP_CHOOSEMODEL2' | translate }}
</label>
where classes can be:
.hide {visibility: hidden; }
.selected { background: green; }
Now whenever user clicks on button that radio button will be checked and model value will be updated & accordingly buttons will be styled.
Demo plunker Example
This is overkill, but here is a BS4 Card Deck with a "distributed" radio button group. You may need to be more specific with the selectors to make sure you isolate only the buttons you need.
Be mindful of the Bootstrap CSS override, and note the jquery.
$(function() {
$('label.btn').click(function() {
var $rb = $(this).find("input[type=radio]").prop('checked',true);
$('#log').text("Selected " + $("input[type=radio]:checked").attr('id') );
});
});
/* Overide Bootstrap's default styling that uses the child selector
.btn-group-toggle>.btn input[type=radio]
*/
.btn-group-toggle .btn input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div id="log">
</div>
<div class="container">
<div class="row">
<div class="col-8">
<div class="btn-group-toggle" data-toggle="buttons">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card </p>
<label class="btn btn-primary">
<input type="radio" name="ItemList" id="rblItem1" autocomplete="off">Item 1
</label>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://picsum.photos/100/80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card.</p>
<label class="btn btn-primary">
<input type="radio" name="ItemList" id="rblItem2" autocomplete="off">Item 2
</label>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to create a responsive splash page, but it's not responding, no matter how much I try to manipulate it. What I'm mostly trying to do is fit the image with no margin or padding. I want it similar to Adele's mobile site. Also, I'm not sure if the code is clean and I'm naming the classes correctly. I created a codepen so you can check it out there.
<div class="featurette">
<img class="featurette-image img-responsive pull-left center-block" src="http://www.placehold.it/400/F84065/000" alt="#">
<div class="purchase-album">
<div class="album">
<img class="img-responsive" src="http://www.placehold.it/200/fa8ca2" />
<div class="lead">available now:</div>
</div>
<div class="space">
</div>
<p class="lead text-center available "></p>
<a href="#" target="_blank">
<button type="button" class="btn btn-default btn-lg outline" type="submit">iTunes</button>
</a>
<a href="#" target="_blank">
<button class="btn btn-default btn-lg outline" type="submit">loudr</button>
</a>
</div>
</div>
<div class="enter">
<button type="button" class="btn btn-default btn-lg outline" type="submit">
enter
</button>
</div>
</div>
Adeles page is a background image with the content displayed on top.
You can achieve this in many ways.
Try using this and playing about with the CSS to get everything in the desired place.
codepen here example
<header>
<div class="overlay">
<div class="header-content">
<div class="header-content-inner">
<h1>Your image here</h1>
<p>buttons here etc</p>
</div>
</div>
</div>
Shrink the page to see the responsive-ness
I am trying to place my elements inside a bootstrap row (inside columns) to fit my needs, however, I faced with problems. The column width is 97px approx. for large screens.
What should I do, to place inside such a column a control element (date picker or button) that oversizes the column width? The only options is to override standard bootstrap styles (generate new css) or merge several columns? What other options do I have?
<div class="row">
<div class="col-xs-1">
<input type="checkbox" /> /* How han I change the margine between elements?*/
<div class="arrow-down">
</div>
</div>
<div class="col-sm-3">
<!--- Date Time Picker control-->
</div>
<div class="col-xs-4">
<div class="glyphicon glyphicon-time">7 h 49 min</div>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-md btn-block">Add work time</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-md btn-block">Add break</button>
</div>
</div>
You may add styles within <style> in the header section of your html, after the link to the bootstrap css, or use inline styles.