I have tried at least three proposed solutions from searching on this site, but nothing worked. I got close, but was getting cheated on the panel defeault backround color. For some reason, the background wasn't showing its full height behind my elements. I want to put a form next to the heading. Here is what I have tried.
<div class="panel panel-default">
<div class="panel-heading">
<div class="no-wrap">
<h3 class="panel-title">My Title</h3>
</div>
<div class="no-wrap">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div> <!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div> <!-- end panel -->
All the class you see are bootstrap EXCEPT no-wrap. My css for no-wrap is
.no-wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
So this was my most hopeful solution but it still doesn't work. The form sits below the h3.
I also tried using bootstrap columns inside the panel heading, but that's when the default gray background got obscured.
How can I get this form next to the h3 - all inside the panel heading?? Please note, you can assume that there is plenty of screen width. 99.9% of users will be using a laptop to access this page. The panel is being used to display business reports. Mobile responsiveness is not a priority.
Below is screenshot of what I do NOT want. I want the input form next to the heading.
Use display: flex;
Demo jsfiddle
You can try this one. You just need to include GRID OF BOOTSTRAP in your code such as col-xs-* , col-sm-* , col-md-* , col-lg-*. Don't need custom css in your case. You could ask me for further question as well.
<HTML>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-4 col-md-6 col-lg-6">
<h3 class="panel-title">My Title</h3>
</div>
<div class="col-xs-8 col-md-6 col-lg-6">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</div>
</div>
<!-- end panel-heading -->
<div class="panel-body">
Body Text
</div>
</div>
<!-- end panel -->
</body>
</HTML>
Related
I have a form which uses Bootstrap in order to do responsive styling. I have the labels for the inputs in one col-md-6 div, and the inputs themselves in another col-md-6 div. What I'd like to do is have certain elements left-aligned when in col-md and larger, and center-aligned when col-sm and below.
Here is a snapshot of what the form looks in full-screen mode:
and this is what it looks like when the screen is small:
Ideally I'd want to handle this functionality directly through Bootstrap, but if it's not possible I wasn't sure how to go about doing this from scratch. Any other suggestions on if I'm going about this wrong in the first place would be greatly appreciated.
I believe this is what you want (In the jsFiddle, I made the cut-off at col-xs-*, but this can be changed in the #media query.)
#media (max-width: 991px){
.form label {
width: 100%;
text-align: center;
}
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<form class="form" role="form">
<div class="row">
<div class="col-xs-12 col-sm-6">
<label>Your T-Shirt Size</label>
</div>
<div class="col-xs-12 col-sm-6">
<select class="form-control">
<option selected="true"></option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<div class="col-xs-12 col-sm-6">
<label>Additional Guests</label>
</div>
<div class="col-xs-12 col-sm-6">
<select class="form-control">
<option selected="true"></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-xs-12 col-sm-6">
<label>Does anyone in your party require any special accommodations?</label>
</div>
<div class="col-xs-12 col-sm-6">
<textarea class="form-control"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
I'm using form-group in Bootstrap 3. It is causing some horizontal alignment issues.
Here's an example of what I mean: http://jsfiddle.net/7723q8kr/. Notice columns 3 and 4 are lower than 1 and 2.
<div class="container-fluid">
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
</div>
When form-group is removed, as shown here http://jsfiddle.net/1kL4tfux/, the problem goes away.
Is there a way to use form-group within this context and not have it affect alignment?
Any col class divs in Bootstrap have a float applied. But the form-group is a block element, which by default will take up 100% width. It also has a margin-bottom property which will push the next divs down. This causes the form group items to stack (which is what it is intended to do).
You can wrap them in a form-inline element. But you lose a bit of your formatting, so you'd need to specify the width of the form-group. As the Bootstrap documentation says:
Requires custom widths
Inputs and selects have width: 100%; applied by
default in Bootstrap. Within inline forms, we reset that to width:
auto; so multiple controls can reside on the same line. Depending on
your layout, additional custom widths may be required.
So you could do something like this? http://jsfiddle.net/7723q8kr/1/
Have a look at the below example in Mobile mode.
Sample
In Fieldset 3, why is there a slight padding on the left for all the labels and textboxes.
Like the below answer states, you have given col-md-6 class along with your form-group for Fieldset 3. Now since you do need the col-md-6 to separate the elements into 2 columns, you could target that specific fieldset and remove the padding.
HTML:
<form class="form-horizontal" id="fieldset3"> <!-- ID added -->
<fieldset>
<legend>Fieldset 3</legend>
CSS:
#fieldset3 .col-md-6{
padding-left:0px;
}
DEMO 1
To make it easier you can also group the labels this way:
<div class="col-md-6">
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
<div class="form-group">
<!-- Label and input here -->
</div>
</div>
DEMO 2
Cause you nestind classes for columns. First you have div.col-md-6.form-group, and inside you have label.control-label.col-md-8, so it doubles the padding for col-*.
I'd like to have a from that contains a panel heading but the panel heading doesn't show when I include the form. As soon as I include a form within the markup the panel heading background disappears. How do I resolve this?
With form:
<div class="col-md-11 pane top30">
<div class="panel panel-default">
<form action="">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</form>
</div>
</div>
Without form:
<div class="col-md-11 pane top30">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
Just put your form outside the panel
<form action="">
<div class="panel panel-default">
....
</div>
</form>
Why it was not working : bootstrap defines the heading css like this
.panel-default>.panel-heading
{
}
So in this case panel-heading css affects only when it is direct child of .panel-default
but in your case panel-heading is direct child of form.
Js Fiddle Demo
Why isn't panel head showing in bootstrap when I use a form?
CSS is often based on things like nth-child - so the heading should be the first child of the panel in order for it to work correctly.
I'm building a responsive website using ZURB's foundation 4.
I'm trying to align the log-in form to the right, without the padding next to the login button.
When following the documentation, with only one input box (originally a search form), there is no padding to the right side of the button
This code achieves this, can be reproduced and is provided by the foundation docs:
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Login
</div>
</div>
</form>
When I modify this code to have two inputboxes, the padding appears.
I have tried everything I can think of to remove the padding.
This is the code
<form>
<div class="row collapse">
<div class="small-4 columns">
<input type="text">
</div>
<div class="small-4 columns">
<input type="password">
</div>
<div class="small-4 columns">
Login
</div>
</div>
</form>
The problem can be viewed here
I could also set the login-button to expanded, but this obviously makes the button a lot bigger, than it actually should be.
Any help is appreciated
Thank you #Foundation MIRC channel!
The answer is giving width of small-5, small-5 and small-2 to the columns, with an expanded button on the last.