I just started with Blueprint, so don't bash me :-)
Here's my code, a simple two columns layout:
<body>
<div class="container showgrid">
<div class="span-24 last">
<h1 >Logo Here</h1>
</div>
<div class="span-16">SlideShow</div>
<div class="span-8 last">
<form>
<fieldset >
<label for="email">Email</label>
<input type="text" id="email" name="email" class="title">
</fieldset>
</form>
</div>
</div>
</body>
You can see the result here (on Firefox 3):
http://img600.imageshack.us/i/screenwr.png/
As you can see, the fieldset breaks the grid. If i drop the fieldset, the form gets better, altough it's still one pixel wider. What am I doing wrong?
Thanks for the help.
It's just that the text field is too long. In blueprint, it's set to 300px. Just use CSS to override the text field width and it should be fixed. For example:
.span-8 input.text, .span-8 input.title { width: 275px; }
Related
I have a input field that's centered in the middle of the screen. I also wanted to have the label under the input field but having trouble trying to figure out how to align the text to the bottom left of the input field instead of bottom center. The result im seeing is the label is moving too far to the left.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<input type="text" name="password" value=""><br>
<label style="display:block; text-align:left">Password</label>
</div>
</body>
</html>
Set width to both input and label and make the label display:inline:block
<div style="text-align:center">
<input type="text" name="password" value=""style=" width:150px;"><br>
<label style="display:inline-block; text-align:left;width:150px;" >Password</label>
</div>
You can maybe try 2 separate div's inside the main div. Have a fixed/relative width of the parent div. Some thing like this.
<div style="text-align:center;width:120px">
<div><input name="password" type="text" value="" /></div>
<div style="display: block; text-align: left"><label>Password</label></div>
</div>
I'd simply add a margin-right to the label.
Check out the jsfiddle
<body>
<div style="text-align:center">
<input type="text" name="password" value=""><br>
<label style="display:block; margin-right:110px;">Password</label>
</div>
</body>
To the label, add
position: relative;
left: 10%;
Change the left value to whatever makes it line up.
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>
I'd like some form fields to be side by side when there's width available on the client, and stacked neatly when there isn't. It's almost working, but not quite "stacked neatly". Here's the markup ...
<div class="form-group">
<div class="col-md-3">
<input type="text" placeholder="State" class="form-control" ng-model="family.state">
</div>
<div class="col-md-4">
<input type="text" placeholder="Zip" class="form-control" ng-model="family.zip">
</div>
<div class="col-md-4">
<div class="checkbox">
<input type="checkbox" ng-model="family.listAddress">List address</input>
</div>
</div>
</div>
Here's the wide result, which is as desired:
But here's the narrow result which is not quite right (because of the missing vertical space):
What does your CSS look like? You can add a class to all of these divs and apply a simple margin: 5px; and that could solve your problem.
I have a rendering inconsistency between Chrome (correct) and Firefox (incorrect) when using Bootstrap. This is my code (fiddle here):
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
</form>
<legend>Hello!</legend>
</div>
What is the cause of the inconsistency? How can I fix the Firefox rendering so that it matches Chrome's?
It appears to be the way that Firefox and Chrome render the fieldset tag, at least with the non-responsive version of Bootstrap you're referencing. In an effort to eliminate variables, I removed the reference to Bootstrap and linked to bootstrapcdn.com's version, which seemes to fix the problem.
If nothing else, you could always add a bit of CSS to the fieldset tag to ensure it renders the same across all modern browsers.
fieldset { clear: both; }
Update: Looks like I was not paying attention, I've updated this answer to reflect CSS on the legend tag, rather than fieldset. JSFiddle Here.
legend { clear: both; }
The legend tag should be placed within the form tag and it should also have a fieldset tag placed around it.
See this example from Bootstrap:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
And for your code it would be:
<div class='container'>
<form class='form-horizontal well span6 offset3'>
<fieldset>
<label class='control-label'>Testy</label>
<div class='controls'>
<select></select>
</div>
<legend>Hello!</legend>
</fieldset>
</form>
</div>
I am trying to align text fields in a div and make them float left so that they look like a table.
I want a layout like below:
Label1: TextField Label2: TextField Label3: TextField
Label4: TextField Label5: TextField Label6: TextField
I tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit
I put this together really quickly, so it can definitely be improved upon, but how about something like this?
http://jsfiddle.net/LBcp5/1/
What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:
<div class="row">
// put whatever you want in here
</div>
... and I'm styling this row class with clear: both so that each row will be on its own line. You can add <div> elements within each row, as many as you want, and floating them to the left or using display: inline to get the effect you want.
So when you want multiple rows, you create multiple of these row containers. Check out the jsFiddle demo above for an example.
I hope this helps.
Maybe you are looking for something like this?
HTML:
<form>
<div id="wrapper">
<div id="left">
<div class="label-container">
<label for="label1">Label1</label>
<input name="label1" type="text">
</div>
<div class="label-container">
<label for="label4">Label4</label>
<input name="label4" type="text">
</div>
</div>
<div id="center">
<div class="label-container">
<label for="label2">Label2</label>
<input name="label2" type="text">
</div>
<div class="label-container">
<label for="label5">Label5</label>
<input name="label5" type="text">
</div>
</div>
<div id="right">
<div class="label-container">
<label for="label3">Label3</label>
<input name="label3" type="text">
</div>
<div class="label-container">
<label for="label6">Label6</label>
<input name="label6" type="text">
</div>
</div>
</div>
</form>
CSS:
#wrapper
{
width: 800px;
}
#left,
#center,
#right
{
float: left;
}
.label-container
{
margin: 10px 10px;
}
:)
Well, you can for example put each column in a fieldset tag, set it's display attribute to block, float to left and set width to desired value.
i think it'll allways end using some tag like span or div to group those fields, however the fieldset tag is the most desired one cause it's invented exactly for grouping form fields :)
you can do this:
<div style="clear:both;">
<div style="float:left;">
<label for="TextField1">Label1:</label>
<input id="TextField1" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField2" style="padding-left:50px">Label2:</label>
<input id="TextField2" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField3" style="padding-left:50px">Label3:</label>
<input id="TextField3" value="TextField"></input>
</div>
</div>
<div style="clear:both;">
<div style="float:left;">
<label for="TextField4">Label4:</label>
<input id="TextField4" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField5" style="padding-left:50px">Label5:</label>
<input id="TextField5" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField6" style="padding-left:50px">Label6:</label>
<input id="TextField6" value="TextField"></input>
</div>
</div>
Use this html tag
align="center"
center can be substituted for left or right if you want not to position them on the center
The proper way to do it is by linking your html to a CSS file and assign each div to a certain type of class in the CSS file, this helps you avoid redundancy. To do so create a css file and
link it to the html by including this in your html code
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
And then in your mystyle.css file you would have to include something like this
DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}
Then your html file divs would look like
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>