I can't find this exact question having been asked anywhere on this site, but apologies if it already has been.
I am designing a site with Bootstrap, and have a search bar inside a .jumbotron that spans all 12 columns. This has a dropdown button attached on the right to specify the type of search the user wants to perform.
The markup looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control"/>
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">Select Search Type <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Search Graduate</li>
<li>Search Undergraduate</li>
</ul>
</div>
</div>
</div>
</div>
The problem is that when you view the page in the s and xs views, the search button takes up most of the search bar. I want to make the button responsive so that different text is contained within to make it smaller when in those views. Is that possible through just the bootstrap framework. Or is javascript a necessity here?
Thanks
This is possible by enclosing the button text inside an element and hiding/showing at various sizes by using the responsive utility classes. Try this, it applies hiddex-xs and hidden-sm to the normal text and adds another span with hidden-md and hidden-lg to the smaller text span.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control" />
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">
<span class="hidden-xs hidden-sm">Select Search Type <span class="caret"></span></span>
<span class="hidden-md hidden-lg">Smalltext</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Search Graduate
</li>
<li>Search Undergraduate
</li>
</ul>
</div>
</div>
</div>
</div>
Related
Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !
Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>
I have a bootstrap select dropdown.
I want to change the selection when I load the page. How can I write jquery for the same?
I've tried using $('.dnsType').toggle('Hostname') but that didnt work :(
This is my code:
<div class="row form-group">
<div class="btn-group dnsType <%= getColumnSize(editMode) %>">
<button class="btn btn-xs white dropdown-toggle" id="dnsType" type="button" data-toggle="dropdown" aria-expanded="true">
<span data-value="IP Address">IP Address</span><b class="caret"></b>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dnsType">
<li><a value="IP Address">IP Address</a></li>
<li><a value="Hostname">Hostname</a></li>
</ul>
</div>
<div class="<%= getColumnSize(editMode) %>">
<div class="form-horizontal">
<input type="text" name="ipAddress" class="ipAddress" data-name="IP Address" class="form-control" value="<%= controller.ipAddress %>">
<span class="validationErrorMessage"></span>
</div>
</div>
</div>
Bootstrap dropdowns are not like <select> elements. They don't have "selections". It is just a dropdown that shows a list of links when you click the button. I'm guessing that you just want to change the text for that button when the page loads. Here is how you can do that:
$("#dnsType span").text("Hostname").attr('data-value','Hostname');
This sets the text to "Hostname" and changes the data-value attribute to "Hostname"
I know variations of this questions have been asked multiple times on this site, but I'm going to give it another try. I feel like I have tried every combination of code possible trying to get this to work, but have had no luck. All I want to do is to get the 'Advanced:' text on the button/dropdown toggle to change to one of the selected dropdown item options when clicked (Item1, Item2, etc).
All functions are obviously not going to end up in my code, but I just wanted to give examples of what I have already tried.
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSearch").text($(this).find(":selected").text());
$("#dropdown option:selected").text();
var text = $("#AdvancedSearch").text($(this).text());
alert(text);
});
});
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText);
});
$(function () {
$("#dropdown").on('click', 'li a', function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Try this :
$(function () {
$("#dropdown a").click(function () {
$("#AdvancedSearch .selection").text('Advanced:'+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
What you want is to execute a function when user click the list link.
This function must take the text inside it's own tag, and we must put that text inside every element having "selection" class.
$(function () {
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(".selection").html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Good perseverance on your attempts !
I'm developing this website using twitter Bootstrap 3 as I've done a few times. But in this particular one the navbar, when collapsed, is having an odd behavior. When I click on the toggle button, the list items are displayed first aligned right, without some css styles, and then centered as it should be.
When I hit the close button, something strange happens too, as the toggle button itself floats left for a second and then return to the center as it should be.
I've tried a lot of things here. Rebuilding the menu, deleting some custom css, upgrading/downgrading my jquery...here's a jsfiddle of it, the bug is not exactly the same but it's very close to it:
https://jsfiddle.net/grpaiva/oznL3ogb/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
<div class="col-md-2"><a class="navbar-brand relative" href="index.html"><img class="logo-header" src="" alt="Descola" /></a></div>
</div>
<div class="dropdown pull-right">
<a class="red" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="hidden-sm hidden-xs">ENTRE OU CADASTRE-SE </span><b class="caret hidden-sm hidden-xs"></b><span class="glyphicon glyphicon-user hidden-lg hidden-md"></span></a>
<ul class="dropdown-menu">
<li>
<form role="form" method="post" action="" novalidate>
<div class="form-group"><input type="email" class="form-control" name="user_email" value="" placeholder="EMAIL" /></div>
<div class="form-group"><input type="password" class="form-control" name="user_password" value="" placeholder="SENHA" /></div>
<div class="row">
<div class="col-lg-12">
<input type="hidden" name="url" value="" />
<button type="submit" class="btn btn-default" name="">ENTRAR</button>
</div>
</div>
</form>
<div class="clear"></div>
<div class="row">
<div class="col-lg-12">
<p class="pull-left" id="login-over-esqueci">Esqueci minha senha</p>
</div>
</div>
<p class="clear"></p>
<div class="row">
<div class="col-lg-12">
<p id="top-facebook-login"></p><!-- retirei o codigo do facebook -->
<p>Ainda não é um membro?</p>
<p><a class="regular" href="">Cadastre-se aqui</a></p>
</div>
</div>
<div class="row mtop20">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p id="top-login-logout" class="pull-right"><span class="glyphicon glyphicon-off" aria-hidden="true"> </span> Sair</p>
</div>
</div>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav navbar-right">
<li>o que é a descola?</li>
<li>cursos</li>
<li>drops</li>
<li>contato</li>
<li>faq</li>
<li>para empresas</li>
</ul>
</div><!-- /.navbar-collapse -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- /.container -->
</nav>
Does anyone have a clue on that one?
I got it!
The problem was in the custom CSS, I had to add the class .collapsing to my li items.
Thanks!
I want to show a list of clients in a dropdown, but I want their info separated into columns like FirstName, LastName, Address, City, State, and Zip.
How can I put a grid in the dropdown and have each row be selectable like a regular dropdown? This is what I have so far, but the rows don't look right and only the "Create a new client" row has the correct highlighting when you hover over it.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="loadClientList()">
{{client.DisplayName || "Select a client..."}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row" style="width: 650px;">
<div class="col-sm-2"><b>First Name</b></div>
<div class="col-sm-2"><b>Last Name</b></div>
<div class="col-sm-3"><b>Address</b></div>
<div class="col-sm-3"><b>City</b></div>
<div class="col-sm-1"><b>State</b></div>
<div class="col-sm-1"><b>Postal</b></div>
</div>
</li>
<li>
<a ng-click="newClient()">[Create a new client]</a>
</li>
<li ng-repeat="c in clients">
<div class="row" style="width: 650px;">
<div class="col-sm-2"><a ng-click="selectClient(c)">{{c.FirstName}}</a></div>
<div class="col-sm-2"><a ng-click="selectClient(c)">{{c.LastName}}</a></div>
<div class="col-sm-3"><a ng-click="selectClient(c)">{{c.Address}}</a></div>
<div class="col-sm-3"><a ng-click="selectClient(c)">{{c.City}}</a></div>
<div class="col-sm-1"><a ng-click="selectClient(c)">{{c.StateCode}}</a></div>
<div class="col-sm-1"><a ng-click="selectClient(c)">{{c.PostalCode}}</a></div>
</div>
</li>
</ul>
</div>
Look at this Mega Menu, it's called Yamm: http://geedmo.github.io/yamm/