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.
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.
First i'm new to responsive design.
I'm trying to convert this landing page to a responsive design:
for the image I tryed to use class img-responsive from bootstrap,
But my problems is:
How to place the contact form need to be insert inside the orange box that is part of the image (red frame just to point, not part of the design).
How do I make the image and the form i'm placing on it responsive ?
Thanks
If it is taking 100% width on a div you can use another div inside that with position: absolute and align it where you want it (like right: 50px bottom: 50px; ). Give the parent div a position:relative to make sure it positions inside.
You can then use a percentage width or use left:50px and whatnot. And use css media queries to make it show correctly.
Another would be to use the image as a background-image and use child div with absolute position, but you might get problems getting the height correctly cross-browser.
I'm not sure what you mean by img-responsive, from what framework is that?
Try out something like this. you also should use col-xs-, col-sm- class to make responsiveness better.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div style="position:relative;width:200; height:89px; background-color:green;
top:54px; left:0" class="img-responsive">
<div style="left:15px; top:54px; position:absolute;">
<form method="post" action="">
<input type="text" name="name"/>
<input type="submit" name="submit" value="go"/>
</form>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.span12{ background-image: url('../images/video-player-background.png');
background-repeat: no-repeat; background-size: 100%; min-height: 1024px;}
</style>
Try the solution below.
<div clas="img-responsive" style="position: relative;">
<img src="example.jpg"></img> <!--That image-->
<div style="position: absolute;" height= 100%; width: 100%"></div>
The div contains everything on top of the image will change together with the image.
I want to move or replace .pac-container, the problem is that pac-container is somwhere in deep in my HTML and i want to move whole div to my bootstrap modal, how can i do it?
<div class="pac-container" style="display: none;"></div>
My HTML
<body>
<div class="modal">
<input name="adress"></input>
<!-- I want to move container right here -->
</div>
<div class="container">
Blaaa
</div>
<!-- Concurent position of pac container -->
<div class="pac-container" style="display: none;"></div>
May I guess that the main issue is that the autocomplete-input is placed in the modal and the suggestions(placed in the .pac-container) will appear behind the modal?
When yes: moving the .pac-container wouldn't help here, the result would be a incorrect position.
Try using a z-index for the .pac-container that is higher than the modal's z-index(currently it's 1050)
<style>
.pac-container{z-index:1051;}
</style>
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.
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.