I'm using Twitter Bootstrap in a Rails application. I'm trying to line up a search field with the Search button and a Help button which will use the Accordion Javascript control to expand the area below with Help content.
I have everything working, but, the Help button isn't staying on the same line as the other controls. The accordion control requires a DIV so I'm not sure if that's causing a problem. Instead of staying on the same line the Help button appears just below the search field left aligned.
Here is my code:
<p><strong>Enter Search Criteria</strong></p>
<form class="form-inline">
<input type="text" class="input-large" placeholder="Name, Phone, Conf Rm" autofocus >
<button type="submit" class="btn">Search</button>
<div class="details">
<!-- accordian button -->
<div class="accordion">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseHelp"> <button type="link" class="btn btn-info btn-small">
<i class="icon-question-sign"></i>
</button></a>
</div>
</form>
</div>
<!-- Accordian area -->
<div id="collapseHelp" class="accordion-body collapse style="height: 0px; ">
<div class="accordion-inner">
<p><strong>Person Search:</strong> Last Name, First Name (e.g. Smith, John)</p>
<p><strong>Conference Room Search:</strong> Plaza-Building, Suite-Name (e.g South-I2W-20E-1)</p>
<p><strong>Phone Number Search:</strong> Please provide at least the last 4 digits of the phone number (e.g. 8686)</p>
</div>
</div>
<!-- End accordian area -->
All help is greatly appreciated.
Thanks
Your accordion button does not need to reside within a container in order to function, so just remove the .details and .accordion containers and your button should line up with the rest of the control buttons just fine.
HTML
<p><strong>Enter Search Criteria</strong></p>
<form class="form-inline">
<input type="text" class="input-large" placeholder="Name, Phone, Conf Rm" autofocus >
<button type="submit" class="btn">Search</button>
<!-- accordian button -->
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseHelp"> <button type="link" class="btn btn-info btn-small">
<i class="icon-question-sign"></i>
</button></a>
</form>
<!-- Accordian area -->
<div id="collapseHelp" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<p><strong>Person Search:</strong> Last Name, First Name (e.g. Smith, John)</p>
<p><strong>Conference Room Search:</strong> Plaza-Building, Suite-Name (e.g South-I2W-20E-1)</p>
<p><strong>Phone Number Search:</strong> Please provide at least the last 4 digits of the phone number (e.g. 8686)</p>
</div>
</div>
<!-- End accordian area -->
Demo:
http://jsbin.com/eyajig/1
Related
I'm following this documentation cause I would like to create a
Gmail like 'search bar' where beside the input there's a dropdown button that opens a dropdown with filter options.
Unfortunately in the docs the examples don't cover the input + dropdown button scenario.
I started with this:
<!-- Search bar-->
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-success" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
Everything is shown correctly, but the dropdown is not. It is opened under its parent (the button), while I'd like to have it for the whole length of the input. Pretty sure it could be solved with some CSS rule.
From the documentation under Manual Triggers, you could attach the dropdown menu to the input group and trigger the open/close with the appended button on click event.
<!-- Search bar-->
<div class="container">
<div class="input-group mb-3" #myDrop="ngbDropdown" ngbDropdown>
<input type="text" class="form-control" >
<div class="input-group-append" role="group" >
<button (click)="$event.stopPropagation(); myDrop.open();" class="btn btn-outline-success" >Hi</button>
</div>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I can't figure out how to vertically align text next to the buttons in the following snippet. Any ideas?
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div id="actionButtons">
<button class="btn btn-default">
Cancel
</button>
<button class="btn btn-default">
Certify and Submit (1)
</button>
<div style="display:inline-block;text-align:center;width:460px">
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
</div>
</div>
</div>
</div>
</div>
This will be viewed on devices with at least 1000px screen width, so when you run the snippets, please choose "full screen" to see the example.
Here's a codepen with the same code as above:
https://codepen.io/upgradingdave/pen/dgzdKL
The snippet below is closer to what I was aiming for, but I was hoping to accomplish this without changing the html markup above:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" style="height:100px;border:1px solid black;">
<div class="col-xs-1">
<button class="btn btn-default" style="margin-top: 30px;">
Cancel
</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="margin-top: 30px;">
Certify and Submit (1)
</button>
</div>
<div class="col-xs-3">
<div style="text-align:center">
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
</div>
</div>
</div>
try this
#actionButtons{
display:flex;
align-items:center;
-webkit-align-items:center;
-moz-align-items:center;
}
For your instance, you're not really using the bootstrap grid, you could take what's in my example and put it in a 12 column row if ya want to get the spacing, but the cause of your issue is just the button defaults needing a display of inline-block and then that <br/> you have in there is kicking down a new line after "Certification" as would be expected.
Cheers
.btn {
display: inline-block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-default">
Cancel
</button>
<button class="btn btn-default">
Certify and Submit (1)
</button>
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
I am trying to align inputs and buttons using the .input-group class as shown here.
It works well and shows the desired output when I place a button before the text box.
But, when I place the button next to the text box, the button doesn't stay close to the text box.
I am using Bootstrap 3 in my ASP.NET project, created using Visual Studio 2015 Community Edition.
Here is the code:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
I had the exact same problem and I looked at cale_b's fiddle and it appeared correct for me. So I scratched my head trying to figure out what was different in my environment. I noticed that in my site.css (my custom css for my app), I had the following:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Once I removed (or commented out) that CSS, then it worked. But now I need to find a different approach to default the max-widths on my inputs. Oh well, at least it solved my problem, hope it solved yours.
I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.
Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).
But: I don't want the icon near the input field.
The following code controls the input field:
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control">
</div>
</div>
</form>
The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).
Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).
After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).
My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?
Required browser compatibility: Chrome, Firefox, IE8+
Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.
http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1
http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2
.test {
display:table;
}
.test > .form-control {
display: table-cell;
margin-left:-3px;
}
.test > span {
display: table-cell;
width:1%;
padding:0 3px;
}
HTML
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="test">
<span><!--shim--></span>
<input type="text" class="form-control">
</div>
</div>
</form>
Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
<input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
Worked really hard to get to what you require. hope you appreciate :)
This will get you pretty much where you want to be
<div class="form-group" style="display:inline;">
<div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
<input class="form-control" type="text" placeholder="Search">
</div>
</div>
It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.