is there a way of wrapping HTML Buttons so that they show in a drop-down list?
I have the following two buttons:
<button type='button' class='btn btn-default' data-toggle='modal' data-
target='#authorize'>Show Demo Card Details</button>
<button type='button' class='btn btn-default' data-toggle='modal'
data-target='#test'>Show Demo Card Details</button>
And I would like them to be accessible from a drop-down list, is this possible with html?
Based on the markup, I assume you're using Bootstrap. You can't do it with the <select> element using plain HTML. If you are using the rest of the Bootstrap features, then you can make use of Bootstrap's dropdown and do something like the one below. Note that you might need to do event.preventDefault() for the <a> elements inside li and you might need to do some more CSS to make it work like you want it to.
You don't really require a <button> to trigger a modal by the way. For example, changing the last item in the below dropdown to something like this will also work:
<li>JavaScript</li>
.dropdown li span {
display: inline-block;
min-width: 100px;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<! -- Bootstrap Dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">
<span>Try this </span>
<button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#authorize'>Show Demo Card Details</button>
</a>
</li>
<li>
<a href="#">
<span href="#">Try another?</span>
<button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#myModal'>Show Demo Card Details</button>
</a>
</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Example modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
you can simply just add like this in your html
<option data-toggle='modal' data-
target='#authorize'>Show Demo #authorize Details</option>
<option data-toggle='modal'
data-target='#test'>Show Demo #test Details</option>
Related
I've got two Bootstrap 3 modals as below. One modal is switching to another - and there is a button - "Go back" to previous modal. Unfortunatelly modals are long and when I'm switching back - scrolling works but for website, not for previous modal. Anyone knows how to fix it?
I'm using the default bootstrap css and js files, google chrome
Complete HTML code as below:
<head>
<!-- scripts: jquery.min.js; bootstrap.min.js css: bootstrap.min.css -->
</head>
<body>
<button type="button" data-toggle="modal" data-target="#addOffer">Add offer</button>
<button type="button" data-toggle="modal" data-target="#viewOffer">View offer</button>
first modal:
<div class="modal fade" tabindex="-1" id="viewOffer" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">View offer</h4>
</div>
<div class="modal-body">
lots of text about offer here:
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
second modal:
<div class="modal fade" id="addOffer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add offer</h4>
</div>
<div class="modal-body">
lots of forms for new offer here:
<input id= "see_offer" name="see_offer" type="submit" class="btn btn-info" value="View offer" data-dismiss="modal" data-toggle="modal" data-target="#viewOffer" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add .modal { overflow-y:auto; } to your css file.
The regular data-toggle:"modal" button will do, as suggested, toggle the modal visibility. The buttons in your page may remain so. However, you seem to want your modal buttons to hide one modal and show another, so set a function to them manually like so:
$("[hide-modal]").click(function () {
$(this).attr("hide-modal").modal("hide");
$(this).attr("display-modal").modal("show");
});
Then in your modal buttons:
<button type="button" class="btn btn-info" hide-modal="#viewOffer" display-modal="#addOffer">Go back</button>
<button type="button" class="btn btn-info" hide-modal="#addOffer" display-modal="#viewOffer">View offer</button>
I wanna make my horizontal buttons fill my modal view.
This is what I made, using this button classes: click here
HTML:
<div class="modal fade" id="usuario_info" abindex="-1" role="dialog" aria-labelledby="myInfoUser" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="96" height="96" border="0" class="img-circle">
<h3 class="media-heading" id="bookId"></h3>
</center>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Subtitle</h3>
</div>
<p class="cuerpo-info-user">Something</p>
</div>
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-phone"></i></span>
Call him
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-ban"></i></span>
More information
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="icon_check"></i></span>
Success
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="icon-cancel"></i></span>
Remove him
</button>
<button type="button" class="btn btn-labeled btn-danger button-infousuario">
<span class="btn-label"><i class="icon-trash"></i></span>
Remove everything
</button>
</dsiv>
</div>
</div>
</div><!-- End modal -->
My result:
I tried with:
.button-infousuario{
display:inline-block;
}
but not working.
Thanks for helping!
If I understood you correctly, you can make your buttons fill your modal view by setting their width: 100%. But the text will appear in the center of the button. To prevent that you can set text-align: left
.button-infousuario{
width: 100%;
text-align: left;
}
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.
i'm new to css + html and i've been stuck on a simple problem. So I got a popup window from bootstrap, the code is
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us</h4>
</div>
<div class="modal-body">
<p>Contact us at _____</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm wondering how to change the padding of the button, and the color of the text.
I tried using #myModal for the css tag as shown
#myModal{
background-color: green;
padding-left:40%;
}
What am I doing wrong?
Or You can use inline CSS in:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
Like:
"<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="color :orange; padding-left:30x;">Contact Us!</button>"
This will help i hope.
Thank You..
To change the padding and color you can do this.
Add in CSS
.btn btn-info btn-lg{
color: green;
padding-left: 30px;
}
You're probably trying to change the button outside of the modal so a simple .btn selector will work, so there is no need to select #myModal.
The custom stylesheet must be included after the bootstrap declaration for the properties to override;
.btn {
color:green;
padding-left: 50px;
}
Example here i've added some padding and a custom color so you can see how it works.
I've written some code that makes a menu. I've used bootstrap to manage this.
My problem is they show different behaviour on different computers:
This is the html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="createStoryBox"><span class="glyphicon glyphicon-book" style="display: inline-block"></span><span class="hidden-xs hidden-sm"style="display: inline-block"> {{ _('Create story') }}</span></button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#createEventModal" style="display: inline-block" ><span class="glyphicon glyphicon-flag"></span><span class="hidden-xs hidden-sm"> {{ _('Create event') }}</span></button>
</div>
Behviour 1
Behaviour 2