I am trying to make a bootstrap inline form like dropdown-input-button. I was able to do this, but how can I make 100% width of input tag? Code snippet below.
<div class="row">
<div class="col-md-12">
<div class="form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="form-group">
<input type="text" class="form-control " placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/xt4zk62v/
You need to create a class and apply it to the parent div that adds a width to it and update the width on the input to 100%;
#media (min-width: 768px){
.form-inline .form-control {
display: inline-block;
width: 100%;
vertical-align: middle;
}
}
https://jsfiddle.net/t3xd3esq/4/
Related
I am using bootstrap 3 for creating input groups with normal text as shown in image below
How can I get input group with image and also more than 2 span text.
I am using following code for normal input group
<div class="input-group input-group-lg">
<input type="text" style="background-color: black; color: white" class="form-control" aria-label="You Send">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
Edit 1:
There are many CSS tricks out there to embed images in the input field. Personally for me, if we're gonna be using Bootstrap, let's really use Bootstrap. And perhaps an icon pack like FontAwesome.
.search-icon:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f002";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-right-0 bg-white">
<!-- Stack overflow doesn't allow this, but if it did, I would not need
any custom css, just the following html only this:
<i class="fas fa-search"></i>
Instead I have to use this over here. -->
<span class="search-icon"></span>
</span>
</div>
<input type="text" class="form-control border-left-0" placeholder="Search">
</div>
If you want to put your own custom image, you can edit the css like so:
.search-icon:before {
content: url(path/to/your-image.jpg);
}
I'll update my answer once you clarify what you mean by two-span text.
I have a popover of bootstrap, which inside there is a div with "btn-group" style which supposed to open an actions menu (aria-haspopup="true").
The problem is that the actions menu opens outside the popover borders, and when i'm changing the position/display property it goes inside the popover but moves all the text.
This is the HBS file of the whole popover:
<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;" class="btn-group">
<button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
<button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</h3>
<div class="row">
<div style="padding-top:15px;">
{{#each rows}}
<div style="padding-bottom: 20px;">
<div style="float: left; width: 50%;"><label class="label-preview">{{cell1.label}} </label><div>{{cell1.value}}</div></div>
<div style="float: right; width: 50%; text-align:left;"><label class="label-preview">{{cell2.label}} </label><div>{{cell2.value}}</div></div>
<div style="height: 40px;"></div>
</div>
{{/each}}
</div>
</div>
and this is how the actions popup opens:
This is how i open the popover:
this.popupElement.popover({
template: html,
placement: 'right',
viewport: viewport
});
How can I open the actions popup just below the arrow?
Update:
I tried position:absolute - not working and i also tried the next combination:
position: relative; display: inline;
and the result was (as you can see the fields inside the big popover are moving aside...):
Thanks.
Update 5.1:
current position:
Use position: absolute to place the dropdown over your popup.
<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;" class="btn-group">
<button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
<button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</h3>
.dropdown-menu {
position: absolute:
top: 20px; // height of the top my-new-title container
}
.btn-group {
position: relative;
}
here is what it looks like:
and my html:
<div>
<div class="dropdown col-md-6">
<span class="input-group-addon" id="basic-addon1" style="width:150px;">warehouse</span>
<button class="btn btn-default dropdown-toggle "type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="display:inline;">
select warehouse
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
I want to put the warehouse and select warehouse on the same line,how to do it?
You need to make the surrounding div an input group (add the "input-group" class):
<div class="dropdown col-md-6 input-group">
Instead of:
<div class="dropdown col-md-6">
You might want to look at the Input Group / Input Group Add-On documentation:
http://v4-alpha.getbootstrap.com/components/input-group/
You need to also specify display:inline for the span to overwrite the display: table-cell; of the .input-group-addon class on it.
See this bootply fiddle
(bad practice alert)
To make exactly what you ask, you can use this style
<span class="input-group-addon" id="basic-addon1" style="display:inline-block; width:auto;float:left;height:35px;line-height:21px;">warehouse</span>
Can also be like this.
<div class="form-group form-inline">
<span class="col-md-2 control-label">Metadata</span>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example</button>
</div>
I have this:
Here's the code
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
</div>
</div>
</form>
</div>
Fiddle: http://jsfiddle.net/ytqyowgt/
How do I make the dropdown list as wide as the input field + button?
Try setting:
.input-group-btn {
position: static;
}
.dropdown-menu {
width: 100%;
}
check the updated fiddle
Change a bit the structure of your HTML :
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
</div>
and CSS :
.input-group-btn ul {
width:100%;
}
The only thing is you loose the rounded corners on the button.
http://jsfiddle.net/ytqyowgt/4/
I have been trying to get some alignment to work but I am having a hard time being successful. I'm not sure if there is already a CSS style in bootstrap for vertical alignment or not but that is what I am trying to accomplish.
I have a DIV (.well class) with an image and some text inside it. The Image aligns fine as its responsive so the height and placement is good. However, I am trying to align the button and Text vertically in the middle.
Here is a jsFiddle: http://jsfiddle.net/6z9skpeh/
<div class="col-md-6">
<div class="well wellFriends">
<div class="row">
<div class="col-md-4 friendPic">
<img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
</div>
<div class="col-md-8 friendDetails">
<div class="row">
<div class="col-md-6"><strong>Bob Smith</strong>
<br><em>Department Name</em>
</div>
<div class="col-md-5 pull-right">
<!-- Single button -->
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I have so far:
This is what I am trying to do:
You can try like this: demo
css:
.v_align {
font-size: 0;
}
.v_align >[class*="col"] {
float: none;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="row v_align">..</div>