Why in IE7 input breaks out of its container?
http://jsfiddle.net/Q8jPM/2/
<div class="row-fluid" style="margin-top:10px;">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6 " style="background:green;">
<input type="text" class="span12">
</div>
<div class="span6" style="background:blue;">
<input type="text" class="span12">
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid">
<div class="span6" style="background:green;">
<input type="text" class="span12">
</div>
<div class="span6" style="background:blue;">
<input type="text" class="span12">
</div>
</div>
</div>
</div>
</div>
</div>
UPDATE: I suppose it's box-model and width issue, but is any solution with bootstrap?
this happens because IE7 does not support the css property
box-sizing: border-box;
that considers padding and border size as part of the elements width.
read more about this property here: http://paulirish.com/2012/box-sizing-border-box-ftw/
because of this, IE7 adds the padding and border size to the input width - exceeding the parent width. You will have to set those to 0 in order to get the element fit to the parent size and stay fluid.
you could try adding a wrapper element around the input and then setting the padding and border to the wrapper. This will work in all browsers
I was having a similar issue. I resolved it by replacing
class="span3"
with
class="input-mini"
You could use input-small or whatever suits of course. Since you were looking for span12 for your inputs I'd suggest "input-xxlarge"
Related
I am trying to use bootstrap 4, I have a simple div contains a text box. I want the text box to take the div width. I thought in Bootstrap the input, by default, take the full width?
What is really bugging me is that the code ran correctly here in the snippet??
Here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
The above code is exactly what I have. I am not sure this is the right way to do this?
I don't know if this can help, I am using this code inside a view (MVC project).
So the this is how it looks inside visual studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
#RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - My Project</p>
</footer>
</div>
And this is the view:
<input type="text" class="form-control" placeholder="Email address">
This is how it looks when I render the view (there are other CSS related to background color, etc.. that I didn't add here)
Columns have padding of 15px on both sides. To remove the padding you can...
Use p-0 for padding:0 on the column with input:
<div class="container">
<div class="row">
<div class="col-md p-0" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Or, you can use no-gutters to remove padding from all cols in the row. This will also remove the negative margins from the row which will effect alignment with the sides of the viewport on smaller screens...
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>
Demo: https://www.codeply.com/go/d4AOm39YD3
I am using
Foundation 5's "prefix" class to style labels for HTML input elements. The problem I am having, is that when the text inside of the label becomes too long (either because of the text's length or from resizing the browser window), the label begins to disappear, and allows the input element to take over the rest of the space. This is the code I am using:
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
Here is a jsfiddle.
The behavior that I would like to have, is that all of the text on the label is always visible, and the input element becomes smaller (or hidden) if needed.
Bootstrap actually handles this situation exactly as I would like (jsfiddle), but I need to emulate this behavior using Foundation.
You can adjust the column classes to specify different widths for different screen sizes.
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-5 medium-4 large-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-7 medium 8 large-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
I'm using form-group in Bootstrap 3. It is causing some horizontal alignment issues.
Here's an example of what I mean: http://jsfiddle.net/7723q8kr/. Notice columns 3 and 4 are lower than 1 and 2.
<div class="container-fluid">
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
</div>
When form-group is removed, as shown here http://jsfiddle.net/1kL4tfux/, the problem goes away.
Is there a way to use form-group within this context and not have it affect alignment?
Any col class divs in Bootstrap have a float applied. But the form-group is a block element, which by default will take up 100% width. It also has a margin-bottom property which will push the next divs down. This causes the form group items to stack (which is what it is intended to do).
You can wrap them in a form-inline element. But you lose a bit of your formatting, so you'd need to specify the width of the form-group. As the Bootstrap documentation says:
Requires custom widths
Inputs and selects have width: 100%; applied by
default in Bootstrap. Within inline forms, we reset that to width:
auto; so multiple controls can reside on the same line. Depending on
your layout, additional custom widths may be required.
So you could do something like this? http://jsfiddle.net/7723q8kr/1/
I cant get sections to work properly, they are invisible until a window resize.
foundation.css:2413 code at this line setting section-container to visibility:hidden
I copied the actual code but even examples doesnt work in that containing divs.
<div class="large-8 columns large-centered">
<form class="custom ajaxform" data-validate="parsley" method="post" action="formProcess">
<input type="hidden" name="formtype" value="test" >
<fieldset>
<legend>Test</legend>
<span class="icon24 icon-close"></span>
<h4><small>Test</small></h4>
<?= View::make('forms.header') ?>
<h4><small>Test</small></h4>
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title>Test</p>
<div class="content" data-section-content>
<div class="row">
<div class="large-4 columns">
<label>Test *</label>
<input type="text" name="test" data-required="true">
</div>
</div>
</div>
</section>
<section>
<p class="title" data-section-title>test Tab 2</p>
<div class="content" data-section-content>
<div class="row">
<div class="large-6 columns">
<label>Second *</label>
<input type="text" name="second" data-required="true">
</div>
</div>
</div>
</section>
</div>
<div class="row">
<div class="large-12 columns">
<button class="small radius button" style="float:right" type="submit">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
Probably because you were adding the sections programmatically. In that case, you need to force a resize, so that foundation will be triggered to draw them correctly.
I had the same problem, and after quick googling, this would solve it:
$('[data-section]').trigger('resize');
If a
<div>
is not visible then it may means that it doesn't have a well defines height and width. Then rendering a content is not meaningful. To avoid that flaw we have to add a height and width.
<div class="section-container tabs" data-section="tabs" style="height: 400px; width : 400px;"></div>
Mention your respective height and width.
any suggestions on the best way to do a form like that? http://i.imgur.com/vT7tC.png
I'm using tables + input with width: 100%, I know it's probably not the best way
(also, for some reason the input width: 100% gets bigger than [td] or [div] (the red border on this image is from a [div][input ...][/div])
thanks
You can float the left label/inputs to the left and the right label/input to the right.
You will need to specify a width otherwise you will end up with a large gap between your columns and your middle column will not line up with your large right input.
This is how I would code that form:
HTML
<div class="content">
<div class="row">
<div class="lrow">
<label>aaa aaa</label>
<input type="text" class="large">
</div>
<div class="rrow">
<label>bbb</label>
<input type="text" class="small">
</div>
</div>
<div class="row">
<div class="lrow">
<label>ccc</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>ddd ddd</label>
<input type="text" class="large">
</div>
</div>
<div class="row">
<div class="lrow">
<label>eee</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>fff fff</label>
<input type="text" class="small">
</div>
<div class="crow">
<label>ggg</label>
<input type="text" class="small">
</div>
</div>
</div>
CSS
.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}
don't waste your time by making columns by hand.
just use Blueprint CSS Framework. it's really nice and easy to use and does the job in a way you want.
the most important of all, you do not need to care about browser compatibility anymore.