How can I make the labels of the form fields align vertically with the billing address heading?
http://jsfiddle.net/DA9gK/1/
<h4 class="billingAddress">Billing Address</h4>
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
Add
.form-horizontal .control-label {
text-align: left;
}
to your CSS part...Is this what you want?
Take a look at the css box model and if you can implement that, your spacing issues should go away. Floats are some else to consider, but... what you would benefit from specifically here... I can't find the link to, so do this:
<div id="head"></div>
<div id="nav"></div>
<div id="wrapper"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>
you can share a line between head & nav based on your style, your left form objects go into leftcolumn, right into right, footer holds its own line typically. This relies on absolute positioning of the wrapper and relative positioning of the everything else I believe. Floats work too, but are considered less flexible.
This approach should give you the kind of control over the spacing you need to make your page "fiddler" example look good.
Related
I'm trying to design a fullscreen-menu. It works very good but when the page itself contains a bootstrap grid-system, the grid always is in the front. Using Google Chromes developer tools i found, it's due to all col-*s contain
position: relative
If I disable it in developer tools (then position is static), it's in background.
But imho I can't just edit the whole bootstrap-css.
This is my html (removed what's too much):
<div class="header">
<input type="checkbox" id="toggle" style="display:none;" />
<label class="toggle-btn toggle-btn__cross" for="toggle">
<div class="bar"></div>
</label>
<label class="info">
test
</label>
<div class="nav">
<div class="menu">
<!-- here is the menu -->
</div>
</div>
</div>
<div class="container body-content">
<div class="wrap">
<div class="row">
<!-- THIS HERE IS ALWAYS IN FRONT DUE TO POSITION:RELATIVE -->
<div class="col-xs-6">key</div>
<div class="col-xs-6">value</div>
</div>
</div>
<hr/>
<footer>
<p>footer</p>
</footer>
</div>
the header-class is the whole navigation that displays or hide the div with class menu. The div hides the complete content of class body-content (at least it should).
So
is there a cause why all col-classes are set to relative? I don't want to get any bad surprises later.
what are the possibilities (or the correct solution) to get the grid-system in background?
position: relative is necessary in Bootstrap for when you need to rearrange columns. This is accomplished by using col-sm-push-4 or similar classes. I do not recommend overriding it as that could make your project a maintenance nightmare in the future. It's better to use the property that was designed to override painting order: z-index. Try to be careful when using this property because it tends to get abused quite a bit.
First, you only really need two rules for your case
.header {
position: relative;
z-index: 1
}
position: relative is needed because z-index does not affect position: static elements (the default). z-index only needs to be 1. If you find yourself needing to set it to absurdly high levels (like the 1000s) you likely just need to set the z-index of .body-content, in which case, just set it to 1 on .body-content and 2 on .header.
Either way, that should be all you need.
I'm trying to fix my header to the top, so that if the user scrolls trough a list the search input field and the title bars stays on top of the screen. But at the moment the header scrolls up with the content in the body...
This is what i have:
<body ng-controller="SearchCtrl" class="animated fadeIn">
<div class="bar bar-header fixed bar-assertive" style="padding-bottom: 20px;">
<h1 class="title">Suche</h1>
</div>
<label class="item item-input has-header fixed" style="margin-top: 5px;">
<input type="text" placeholder="Solothurn durchsuchen..." name="text" ng-model="searchBox.storeName">
</label>
<br>
The fixed class is:
position: fixed;
Any help much appreciated!
Just to test it add !important to your css fixed class. One of your other classes may be overriding/cascading over it. If it fixes it then you need to do something in your style sheet to make the position: fixed rule take precedence over the other position rule that is getting applied so you can then drop the !important as it is cleaner and lighter if the CSS cascades correctly the first time.
I have this very simple code using Bootstrap 3:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
<textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
</div>
and it appears like this:
Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?
It's happening because you are using form-horizontal which is meant to be used as a row along with col-*'s for layout. From the Bootstrap docs:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
So if you simply remove the form-horizontal the negative margin goes away.
http://codeply.com/go/QQnqgfKv9v
I just spend some time getting to understand this negative margin as well.
Turns out that normally you embed a form-horizontal into a container or container-fluid that puts a margin of 15px and the form-groups use -15px.
The real problem is that you are missing some <div class="col-..."> to wrap your label and form controls.
These add some padding left+right and that will display it correctly.
Something like:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<div class="col-md-12">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
</div>
<div class="col-md-12">
<textarea class="text required form-control col-md-12" name="campaign[url]" id="campaign_url"></textarea>
</div>
</div>
I need to do something like this using Boostrap. "Fluid" content on the page with two widgets inside it - first at top-right and second at left-bottom.
Widget1 is easy - I just needed class="pull-right". But what to do with the second one to get it to the bottom of the page keeping "Content" floating around?
style="bottom:0;"does not work:
Having this code
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
<div class="offset1 span8 pull-left" style="bottom:0;">
... Widget 2...
</div>
.... a lot of content ....
</div>
</div><!--/.fluid-container-->
I have this as a result:
Moving Widget 2 down also does not help:
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8 pull-left" style="bottom:0;margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
Any ideas how to do that without dirty hacks (for example I could use JavaScript to fix Widget2 position)?
Or (ok, ok) with them?
From all I have read you cannot do exactly what you want without javascript.
If you float left before text
<div style="float:left;">widget</div> here is some CONTENT, etc.
Your content wraps as expected. But your widget is in the top left. If you instead put the float after the content
here is some CONTENT, etc. <div style="float:left;">widget</div>
Then your content will wrap the last line to the right of the widget if the last line of content can fit to the right of the widget, otherwise no wrapping is done. To make borders and backgrounds actually include the floated area in the previous example, most people add:
here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
In your question you are using bootstrap which just adds row-fluid::after { content: ""} which resolves the border/background issue.
Moving your content up will give you the one line wrap :
http://jsfiddle.net/jJNPY/34/
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8" style="margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
I understand that you want the Widget2 sharing the bottom border with the contents div. Try adding
style="position: relative; bottom: 0px"
to your Widget2 tag. Also try:
style="position: absolute; bottom: 0px"
if you want to snap your widget to the bottom of the screen.
I am a little rusty with CSS, perhaps the correct style is "margin-bottom: 0px" instead "bottom: 0px", give it a try. Also the pull-right class seems to add a "float=right" style to the element, and I am not sure how this behaves with "position: relative" and "position: absolute", I would remove it.
By using http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
when I make a stack of labels, they are rendered in one column.
<label>..</label>
<label>..</label>
<label>..</label>
My goal is to put them in several columns depending by the width of the screen.
Here is my demo http://jsfiddle.net/D2RLR/2557/
Any hints?
Something like that?
<div class="row">
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
</div>
Your code was almost correct. You left a couple of <div>s unclosed, but you also had the .controls and .control-groups nested incorrectly.
Here is an updated fiddle with your code fixed as well as an example with 3 columns (I also updated the javascript and added buttons for toggling the checkboxes. If you want to still use a checkbox for toggling you can modify the code pretty easily):
http://jsfiddle.net/D2RLR/2624/
(make sure you scroll down in the html section of the fiddle to see the second example, in case you have a small screen)
This example uses columns and will add more columns across as the screen size will allow. This is purely css and html.
This script will size the columns based on the width of the container they are in. Simply specify the number of columns. This way all columns will always fit perfectly in a row. This uses jquery to resize the column widths.
You could float the labels with css.
<div class="column">
<label class="float"></label>
<input type="checkbox" value="2"> Monday
</div>
<div class="column">
<label class="float"></label>
<input type="checkbox" value="3"> Tuesday
</div>
...
<div class="clear"></div>
CSS
.column {
width: 200px;
float: left;
}
.clear {
clear: both;
}