I'm trying to accomplish something that should be rather basic in CSS but I'm running in circles.
I have three divs in one fluid-width div. The two on the right have undefined width and should take up 100% of their allowed space. The full div already is fluid. And the far right div should have a width of 200px and that is fixed. Sort of like this:
[ [fluid(label)] [fluid(textbox)] [fixed=200(div)] ]
I'm trying to find a way to do this in CSS.
Thanks in advance...
edit:
Here's the html
<footer>
<form method="POST" action="/" id="input">
<label for="message" form="input" class="username">Will:</label>
<textarea id="message" cols="0" rows="0" autofocus form="input" wrap="hard" name="message"></textarea>
<div id="buttons">
<button type="submit" form="input" class="button medium" name="send" value="Send">Send
</button>
<button type="button" form="input" class="button medium" name="extras" value="Extras"><span>Extras</span><span>^</span>
</button>
</div>
</form>
</footer>
you could try using display:table-cell - but you'll need an extra div around the textarea:
http://jsfiddle.net/tU6w2/
(though i should add this won't work in IE7 - it doesn't support table-cell)
EDIT
in answer to the additional comments, another try - this time with jQuery - i don't think it can be done in CSS only:
http://jsfiddle.net/tU6w2/1/
Related
I have this html code which I use with Bootstrap:
<div class="text-center offset-top-20">
<input id="update" class="btn btn-primary" type="submit" value="Update" />
<input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />
</div>
Demo: https://jsfiddle.net/02jmwd85/1/
When I resize the web page and reduce the width the buttons are moved and the second goes below the first. Is there some way to to keep their position and keep them horizontally?
The responsive design feature of Bootstrap allows the UI elements to automatically stack up one below the other on narrow screens.
This is a desirable feature in many scenarios.
This functionality can be overridden by custom style specified at the component level.
In the current scenario, the custom style can be applied to the <div> that encloses the two buttons - Update and Cancel to prevent those from stacking up.
This can be done by specifying a minimum width for the enclosing div.
Here is an example:
<div class="text-center offset-top-20" style="min-width: 500px">
<input id="update" class="btn btn-primary" type="submit" value="Update" />
<input id="cancel" class="btn btn-primary" type="submit" value="Cancel" />
</div>
How does the above solution prevent the buttons from stacking up?
The custom style attribute - style="min-width: 500px;" makes sure that the enclosing div cannot become narrower than 500 pixels.
The 500 pixels of width will give enough room for both the buttons to stay side by side.
This will in turn prevent the buttons from stacking up.
I have the following markup in a simple html page.
<div>
Name: <input id="nameInput" type="text" />
</div>
<div>
Amount: <input id="numberInput" type="number" />
</div>
<input id="getConverted" type="button" value="button" onclick="performConversionAndDisplayResults();" />
<textarea id="resultOutput" rows="2" cols="20"></textarea>
I need to achieve the following
Center the items on the browser window
Make the items larger as you see in current web sites
Make the textarea span the whole width
What is the best way to do this, I have seen a number of solutions but wannt to know the best approach.
With CSS:
div
{
margin: 0 auto;
font-size: 30;
}
For the third one, not sure exactly how you want it, but I would recommend looking here.
The following code example code should result in something like .
<form class="well form-search">
<div class="pull-right">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</form>
This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:
Am I doing something "illegal" with bootstrap? I did not make any adaptions yet so it's completely out-of-the-box.
Any help is greatly appreciated!
This was a reported issue: https://github.com/twitter/bootstrap/issues/1362
The fix outlined by tonybolzan in the issue works best because you don't have explicitly set a width:
.input-prepend, .input-append {
white-space: nowrap;
-webkit-padding-end: 27px;
}
The problem is with the whitespace found in your markup, try to place the span tag on the same line as the input, like so:
<form class="well form-search">
<div class="pull-right">
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</div>
</form>
This is old, but it helped me determine the answer I was looking for:
The problem is probably that bootstrap is setting the width of the input to 210px, which is causing the whole icon/input/button grouping to be wider than your well.
I've updated the fiddle Andres posted above with a sample of the problem by forcing the well forms to a smaller width than their default and a fix by using an input class with a smaller width.
http://jsfiddle.net/dDtUg/2/
I'm just starting to get the hang of HTML. I can't manage to align this to the right, it's part of a menu. I basically want it to align the search box to the right so it looks like facebook or something like that. Till now I've been using padding but I cannot keep it going any longer.
<li id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form></li>
Thanks
You have some options:
keep the div(bad way)
add align"right" to the div
on the form and remove the div (better way)
use float:right
text-align: right
And place that on the form and remove the div.
Also I recommend putting styling in a css and not in the html elements.
Personally I wouldn't use a list
<div id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div style="text-align: right;">
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form>
</div>
And I would also suggest you experiment with text-align
Add text-align:right; to your form and remove the unnecessary div.
Note that this will only work for inline elements: text, inputs, anchors, etc. If you want boxes (divs, forms, tables, etc.) to align to the right you need to use float:right; and set a height on the parent of the floated item, or add a clear div bellow the floated item. Also, besides being unnecessary, this second approach would be more complicated to use for you, as a beginner.
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>