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>
Related
I realize that I'm using Bootstrap's form-horizontal class in a way that isn't quite documented, but I still don't understand why this doesn't work.
If I create a div with the form-horizontal class and add a couple of controls to it with widths specified using Bootstrap's grid layout classes, it works fine. For example, this displays as I'd expect:
HTML
<div id="container">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-11">
<input type="text" class="input-sm form-control" placeholder="Enter some text">
</div>
<div class="col-sm-1 text-right">
<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>
</div>
</div>
</div>
</div>
CSS
#container {
padding:10px;
background-color: gray;
}
The result is form which spans the full width of the page, with 10px of padding all around. Ideal, except that I want to contain the form within a div with a fixed width, and that's where it goes wrong.
Simply adding width:400px; to the #container class in the CSS causes the form to overflow the width of the div.
Is this a bug? How can I fix this so that the form stays within its container?
I've created an example fiddle here: http://www.bootply.com/pP9gsJQipi. Note that simply removing the width value from the #container class causes the form to display as desired, albeit at 100% width of the page.
Simply add a width of 100% to the .form-group. The .form-group will now size 100% according to the width of the #container.
CSS
#container {
padding:10px;
background-color: gray;
width: 400px;
}
.form-group {
width:100%;
}
Bootply
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/
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 ?
Basically I have two pieces of text and an image.
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" />
<span class="note">Other Text</span>
</div>
I want all the elements to be at the bottom of the container div, the title to aligned to the left, and the note all the way to the right. The image will be right next to the title and aligned to the bottom of the title text. So far the only way I have gotten this to work is by using relative/absolute position. Is there a way to do this with CSS?
Here is an image of what I am trying to accomplish. I can change the width and height of the container and the title, image, and notes will align properly to the bottom, left, and right just like so:
Try this
<style type="text/css">
.container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
.note { position: absolute; right: 0; bottom: 0; }
</style>
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" height="100" width="100" />
<span class="note">Other Text</span>
</div>
Sorry, Updated solution... Here's the working link
You can try to play around with the vertical-align, but it's kinda evil..i usually use the absolute position. You can test by yourself on the W3C Tryit Editor
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>