I am trying to place a search text box on the right hand side of the header and I can't seem to figure out how to do it using Bootstrap 2.0.1.
The code I am trying is
<div class="page-header">
<h1 class="span2">
Parts
</h1>
<div class="span4">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="search" class="span3" placeholder="Search" name="search" id="search"/>
</div>
</div>
</div>
</div>
</div>
But it the search text box is not being pushed to the right with the spans and offsets and the line on the bottom of the header is not being pushed to the bottom of the tag. Any ideas?
Adding float: right to the first div tag nested within .page-header works for me. You also need to remember to clear your floats, this is the reason the line at bottom of the header is not being pushed to the bottom of the tag.
So adding the following CSS would resolve your problem:
.page-header {
overflow: hidden; /* clear floats */
}
.page-header div {
float: right; /* float search content right */
}
Working example: http://jsfiddle.net/7zds9/
Edit
For some reason, as pointed out by #PlTaylor, the input field wraps onto a new linein Chrome. This can be fixed using the following CSS:
.input-prepend input {
float: left;
}
Working example: http://jsfiddle.net/7zds9/1/
You can use this:
input {
float: right;
}
http://jsfiddle.net/dXJb8/
Or you can use position: fixed; to set the location of your search box.
http://jsfiddle.net/dXJb8/1/
Related
How can I make the following span to be left-aligned with its parent, in this case, the DIV with id of “rightPanel”?
Currently, the following code displays the span content to the right with Safari browser.
<div id="rightPanel">
<span style="background-color:##ACE1AF; white-space:nowrap;">
my stuff goes here...
</span>
</div>
Thanks.
Use the following CSS:
#rightPanel {
text-align: left;
}
Or, if you want to use inline styles (not recommended) as you did in your span tag:
<div id="rightPanel" style="text-align: left">
I need one div which should be aligned to right on desktop view, but when it comes to responsive, then it should aligned to left or center.
<div class="container">
<div class="row">
<div class="col-md-4 text-right">Name:</div>
<div class="col-md-4">
<input class="form-control" type="text">
</div>
</div>
</div>
Here div for label 'Name' is my target.
My test platform, please change the view to mobile view here
In desktop view I need the div content on right side(near to textbox). I have used 'text-right' to achieve this(this may not required).
In mobile view(below img) the div content is on right side(this because of 'right-text'). But I need it in left side.
Without 'text-right', it would be like(below img), in my code I added 'text-right' in order to make it on right side(which may not needed).
Target: I need the div content on right side for desktop view, when it goes to mobile view I need it in left side. Please ignore the text-right in my code
You could use a media query, in this example I'm assuming it would be positioned absolute.
.container{
position: absolute;
right: 0px;
width: 400px;
}
#media screen and (max-width: 1000px) {
.container{
right: auto;
left: 50%;
margin-left: -200px;
}
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4 ">Name:</div>
<div class="col-md-4 col-md-pull-4">
<input class="form-control" type="text">
</div>
</div>
</div>
Try this. :)
I want to add buttons beneath a <h1> tag, but don't know what CSS to use to make it so. The image below shows a likely scenario, with the "Main_Page" title and the buttons forming each part of a separate div. I tried using the margin-top property, but wish to know which other techniques can I use.
I used the following CSS for the buttons div, while nothing for the name div.
#wiki-page-head .buttons
{
float: right;
margin-top: -30px;
text-align: right;
max-width: 500px;
}
<div style="display:inline;">
<h1 style="display:inline;vertical-align:-3px;" >Ton titre</h1>
</div>
<div style="display:inline;">
<input type="button" value="Edit"></input>
<input type="button" value="Discussion"></input>
<input type="button" value="History"></input>
</div>
With this code, you should get a result like that the image below, is that what you want ?
I'm sure this will be ridiculously simple, but whatever... I'm trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the 'Add Comment' link...the problem I'm experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I've tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there's got to be a better way than padding. I need it to be cross-browser compatible as well.
Here is the html/css I'm using...
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input type='submit' value='Add Comment'/>
</div>
</div>
The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.
I'd suggest you do not put them in separate divs if you want them stuck together.
<style>
.newComment {
position: relative;
width: 475px;
background-color: white;
}
</style>
<div class='newComment'>
<textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
<input type='submit' value='Add Comment' />
</div>
You've set the widths of the container divs but you haven't specified the height, so your padding is not taking. I've provided a sample below so you can visually see what is happening...
http://jsfiddle.net/g6JSU/
Below is a possible solution with the button aligned to the vertical center:
http://jsfiddle.net/g6JSU/1/
try this
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/>
</div>
</div>
How can we have the text "Create New Position" be vertically centered?
HTML/CSS is below.
Adding margin-top:5px to the "Create new.." div helps but it seems hacky.
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
The following will work based on creating a line-height which is equivalent for both items.
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
The trick is to set the .row containing DIV to be 24px tall, and also set the contained SPAN elements to have a line-height of 24px. By doing this, you tell the browser how much vertical space to take up for the line of text.
Note, however, that 24px is not the important part - the important part is identifying how tall your button is, which is based on your CSS and your selected font for the button itself.
The reason the example I'm giving you works to vertically center in this case is based on the EXAMPLE ONLY CSS I put in at the top - which says the font-size should be 12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly 24px, and this appearance:
The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove .row { border: 1px solid #ccc; }, it will disappear.
Here is a JSBin which shows it working:
http://jsbin.com/otekil/1/edit
The below may help you.
<div align="center">
</div>
So it would look like this maybe:
<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
Make the line-height of the interior div the same height as the height of the exterior div.
Example:
<div style="margin-top:5px; height: 100px;">
<div style="float:left; line-height: 100px;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:
<div>
Create new position:
<input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>
This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.
Solution:
You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).
In-line style declaration
<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>
Complete HTML page (see it working):
<html><head><title>Test Center Div</title>
<style>
.push_to_center {float:left; height:50%; margin-bottom:-55px;}
.content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
<div class="push_to_center"></div>
<div class="content" style="width:200px; height:110px;">
<div style="float:left;">Create new position</div>
<div style="float:right;"><input type="submit" id="x" value="Save"></div>
</div>
</body>
</html>
To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):
I always used such trick:
style="height: 30px; line-height: 30px; vertical-alignment: middle;"
Having fixed height plus the same height as line height plus middle vertical alignment.
Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)
Addressed this by adding margin-top:4px to the "Create Position" div. This was the only solution I could get to work!!
This will work.....
<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
<div style="float:left;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>