How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control" style="width:auto;">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
Option 2 would be to use an inline form, see this bootply for a functioning example
Old question, new answer. You can set the class to w-auto in bootstrap 4.
New answer
Bootstrap v5
You can put your select element in a container :
<div class="container w-25">
<select class="form-select h-100 w-100" aria-label="">
<option>Images</option>
</select>
</div>
You might consider using bootstrap's dropdown widget which will allow wrapping http://jsfiddle.net/g4s59a9a/:
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Much much much longer text not fitting when resizing
</a>
</li>
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Smaller text
</a>
</li>
</ul>
</div>
Related
I'm creating a query form using bootstrap's 12 column grid system (version 3). The layout consists of dropdown menu where a user can select an item.
The Problem:
When a user selects a value from the dropdown menu, the element overflows into the next column. Is there a recommended solution for correcting this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-4">
<input type="text" />
</div>
<div class="col-md-3">
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="">
{{importTGModal.paramCondition1_selected}}
<span class="caret">
</span>
</button>
<ul class="dropdown-menu" ng-click="importTGModal.setParamCondition1($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="condition in importTGModal.paramConditions1">
<a data-value={{condition}}>{{condition}}
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<input type="text" />
</div>
</div>
That's because the dropdown is larger than the container column.
Try one of the following:
1- (Recommended) Put the dropdown and the input text in same column
2- Make the column of the dropdown bigger. Like col-md-6
3- (Not Recommended) Bootstrap class .btn adds white-space: nowrap;. Set it to white-spsace: normal for this button, so if the button has long text (bigger than the column) the text will break to next line. Like so:
<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="" style="white-space: normal;">
I'm using Bootstrap 3 to design my website and I would like to fit a text input and 3 buttons horizontally in a div. Here is my markup:
<div style="width: 400px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
But the text input spans to the whole div's width and the buttons get pushed underneath it.
I've tried setting the text input's display mode to inline and inline-block but it didn't change anything.
Try this DEMO
<div class="form-inline">
<div class="form-group">
<input class="form-control" type="text">
</div>
<a class="btn btn-default" href="#">Button 1</a>
<a class="btn btn-default" href="#">Button 2</a>
<a class="btn btn-default" href="#">Button 3</a>
</div>
Nowadays the correct solution is to use the flex classes: https://getbootstrap.com/docs/4.0/utilities/flex/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row bg-info">
<div class="p-2 bg-warning">Flex item 1</div>
<div class="p-2 bg-danger">Flex item 2</div>
<div class="p-2 bg-secondary">Flex item 3</div>
</div>
I noticed that the class="form-control" is responsible for the input spanning the whole width. Also you should remove the width='400px' style and use a bootstrap class or just make it bigger to contain the four elements.
See this Fiddle
Since you are using Bootstrap 3 you should try this:
<div style="width: 600px">
<div class="row">
<input class="col-md-3" type="text">
Button 1
Button 2
Button 3
</div>
</div>
See the official bootstrap 3 docs
Put it inside a form tag like this
<form class="form-inline" role="form">
<div style="width: 500px">
<input class="form-control" type="text">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</div>
</form>
Also add more width or make the button/text smaller so all 3 can fit
Your given code works according to your description. All the three button and text field are in the same line. May be you did not link the bootstrap library properly. Here is the code with bootstrap link
<head>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div style="width: 400px">
<input type="text" class="form-control" />
Button 1
Button 2
Button 3
</div>
</body>
I'm trying to use a dropdown zone to host a custom component. however, the dropdown is not from a standard dropdown but from an input group button.
I need this because I want a jstree down there as my selection need is too complex to fit in a simple select.
Here is what I would it to be like :
I would like for the dropdown zone to be the full width of the input. I've tried setting it at 100% but it seam to do nothing. A fixed with work but would break the responsivness of the site.
Here is my HTML :
<div class="col-md-3">
<fieldset>
<legend>Options</legend>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" style="width: 300px;">
<li>
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
</li>
</ul>
</div>
</div>
</div>
</fieldset>
</div>
Full jsfiddle : https://jsfiddle.net/rry7hr5b/1/
Try this.
With Jquery.
$(document).ready(function(e) {
function customwidth()
{
var formwidth = $('.form-group').width();
$('.dropdown-menu').width(formwidth);
}
customwidth();
$(window).resize(function(e) {
customwidth();
});
});
I found a workaround using the .input-group-addon instead of the .input-group-btn. It's neat, because you need no plugins or jQuery whatsoever. Mind however that the whole dropdown menu requires a minimum width.
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-addon" style="padding:0; border:none; background:none">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" style="border-bottom-left-radius:0; border-top-left-radius:0">
<span class="caret"></span>
</button>
</div>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>
</div>
Check out this fiddle: https://jsfiddle.net/rry7hr5b/5/
Don't use this kind of ul li for select item to customize Select in bootstrap there is plug-in available please try this
http://silviomoreto.github.io/bootstrap-select/
and here some more link..
http://gregfranko.com/jquery.selectBoxIt.js/
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.
I have two Bootstrap button dropdown menus. How to I prevent the menus from wrapping to two lines? I can control the width of the menus with span classes, but the code acts as if there's still more invisible input field which forces the next drop-down menu to the next line. The even more core problem is that these dropdown inputs force a fixed amount of space between them in the next element to their right, regardless of their actual width.
Ultimately, I want them to behave similarly to input buttons, which align right next to each other. See screenshot.
<div class="row-fluid">
<!--- BASIC INFO --->
<div class="span12 well" style="height: 160px; background-color:">
<input type="text" class="input-small" placeholder="Eye Color">
<input type="text" class="input-mini" placeholder="Hair">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a>aa</a>
</li>
<li>
<a>aa</a>
</li>
<li>
<a>aa</a>
</li>
</ul>
</div>
<input class="span4" id="prependedDropdownButton" type="text" placeholder="Hair">
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a>mm</a>
</li>
<li>
<a>mm</a>
</li>
<li>
<a>mm</a>
</li>
</ul>
</div>
<input class="span4" id="prependedDropdownButton" type="text" placeholder="Hair">
</div>
</div>
</div>
After more reading on the Bootstrap documentation and testing I notice that those kind of dropdowns that you want to use suck, they are not responsive. I think you are better off using <select> dropdowns.
Demo
http://jsfiddle.net/sulfureous/X8hdg/
HTML
<div class="row-fluid">
<div class="well clearfix">
<div class="row-fluid">
<div class="span3">
<input type="text" class="span12" placeholder="Eye Color">
</div><!--.span3-->
<div class="span3">
<input type="text" class="span12" placeholder="Hair">
</div><!--.span3-->
<div class="span3">
<select class="span12">
<option>Hair</option>
<option>Black</option>
<option>Blonde</option>
</select>
</div><!--.span3-->
<div class="span3">
<select class="span12">
<option>Race</option>
<option>Race 01</option>
<option>Race 02</option>
</select>
</div><!--.span3-->
</div><!--.row-fluid-->
</div><!--.well .clearfix-->
</div><!--.row-fluid-->
So I guess this is an alternate solution, I cleaned up the code indentation, commenting and what not and divided the spans in a way that I feel would make sense for that kind of responsive menu.
Notice I added clearfix, removed the inline style and the height.
Let me know if this solution is what you expected, otherwise with the other kind of dropdown you want you use it's doable but you will need to hack quite a bit, if it was easy the guys at Twitter Bootstrap would have made that element responsive from the get go.
Cheers.