I have this code and I'm using input-small to make my textbox width shorter. It works on desktop and tablet but not on mobile.
<div class="input-append date">
<input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
</div>
On Desktop & tablet
Didn't worked on handphone though:
Any idea on how I can solve this? Thanks in advance.
In your bootstrap-responsive.css, there is more specific css over riding that:
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
To change all .input-append to use that .input-small width, do this after all other css:
#media (max-width:767px) {
.input-append .input-small {width:90px;}
}
OR be more specific if you only want to deal with that .input-append.
#media (max-width:767px) {
.small-input-append.input-append .input-small {width:90px;}
}
Change your html to:
<div class="small-input-append input-append date">
<input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
</div>
Related
I'm using Bootstrap 3 and want to override the default margin-bottom when screen min-width is 768, for inline form groups belonging to a form identified by #filter. So I did:
#media screen and (min-width: 768px) {
#filter .form-inline .form-group {
margin-bottom: 4px;
}
}
But it doesn't work, even when I added important! on the rule.
However, it does work after I removed the #filter in selector:
#media screen and (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 4px;
}
}
That's really weird! I'm sure and tested that #filter can select the form. Can anyone tell me why?
The piece of code in Bootstrap I want to override is:
#media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
...
}
But I only want to override this for the form #filter
The HTML code for the form is:
<form class="form-inline" id="filter" method="GET" action="<%= url("/blogs", false) %>">
<div class="form-group">
<label for="id" class="control-label">ID</label>
<input class="form-control" id="id" name="id" value="<%= params[:id] %>" />
</div>
<div class="form-group">
<label for="user_id" class="control-label">UID</label>
<input class="form-control" id="user_id" name="user_id" value="<%= params[:user_id] %>" />
</div>
...
<button type="submit" class="btn btn-default">Filter</button>
</form>
You are using the wrong selector #filter .form-inline. This means that .form-inline is the child of #filter which is incorrect.
What you need is #filter.form-inline which is a multi-selector. See Multiple Class / ID and Class Selectors
I am using a form-inline class on my form and it looks great on a desktop. But when I get to the XS width EVERYTHING stacks one ontop of each other, but it's unnecessary. I only need each form-group to stack, not the form inputs inside each.
I would like to have the 3 date selects on one row and the 2 time selects on a new row below.
My HTML:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Passengers</label><br />
<input type="text" class="form-control" id="exampleInputName2" placeholder="2">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Departure Date / Time</label><br />
<select class="form-control" style="max-width:100px"><option>31</option></select>
<select class="form-control" style="max-width:100px"><option>Jan</option></select>
<select class="form-control" style="max-width:100px"><option>2015</option></select> <strong>at</strong>
<select class="form-control" style="max-width:100px"><option>12</option></select> <strong>:</strong>
<select class="form-control" style="max-width:100px"><option>00</option></select>
</div>
</form>
The Bootstrap example for .inline-form states:
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
The CSS they include is:
#media (min-width: 768px)
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
so this is why the form changes to vertical at a small resolution.
You should be able to prevent this behavior by adding the CSS:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
(the same as Bootstrap's CSS, but without the media query)
I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button.
The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue
I have put it here http://jsfiddle.net/zrhB6/3/
The Css
input[type=text],input[type=password]{
display: block;
height: 3em;
width: 100%;
}
.btn {
background-color:#c1d82f;
border:3px solid #97a34b;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
}
HTML
<div class="grid-container">
<div class="grid-50 login">
<h3>Login</h3>
<form class="grid-100">
<input type="text" name="loginEmail" placeholder="Email"/>
<input type="password" name="loginPassword" placeholder="pass"/>
<input type="submit" name="loginSubmit" class="btn"/>
</div>
<div class="grid-50 login">
<h3>Register</h3>
<form">
<input type="text" name="registerName" placeholder="Name"/>
<input type="text" name="registerEmail" placeholder="Email"/>
<input type="password" name="registerPassword" placeholder="pass"/>
<input type="submit" name="registerSubmit" class="btn"/>
</div>
</div>
I'm using unSemantic grid, but that shouldn't be a issue I think
To both CSS selectors, add:
box-sizing:border-box;
The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.
I have been spending the entire day trying to figure out how I can create big forms and at the same time maintain a proper design of the layout.
Currently I'm using formee (style and 960 grid system), which I have tried to turn into an inline form rather than row based (default). Unfortunately it gets really messy and looks horrible.
To give an visual understanding of what I want to archieve I have created a mockup.
How can I solve issue?
Here is such an example: http://jsfiddle.net/PhilippeVay/gaegv/2/
HTML:
<fieldset class="group">
<legend>First logical group of items</legend>
<div class="col">
<p class="text">
<label for="label1">Field label 1</label>
<input type="text" id="label1" />
</p>
<p class="text">
<label for="label2">Field label 2</label>
<input type="text" id="label2" />
</p>
<p class="text">
<label for="label3">Field label 3</label>
<input type="text" id="label3" />
</p>
</div>
<div class="col">
<p class="text">
<label for="label4">Field label 4</label>
<input type="text" id="label4" />
</p>
<p class="text">
<label for="label5">Field label 5</label>
<input type="text" id="label5" />
</p>
<p class="text">
<label for="label6">Field label 6</label>
<input type="text" id="label6" />
</p>
</div>
</fieldset>
<div class="group fieldset-like">
<p class="textarea">
<label for="label7">Field label 7</label>
<textarea id="label7">some text (test font-size)</textarea>
</p>
</div>
<div class="group">
<fieldset class="col">
<legend>Third legend</legend>
<p class="text">
<label for="label8">Field label 8</label>
<input type="text" id="label8" />
</p>
<p class="text">
<label for="label9">Field label 9</label>
<input type="text" id="label9" />
</p>
<p class="text">
<label for="label10">Field label 10</label>
<input type="text" id="label10" />
</p>
</fieldset>
<fieldset class="col">
<legend>Fourth legend</legend>
<p class="text">
<label for="label11">Field label 11</label>
<input type="text" id="label11" />
</p>
<p class="text">
<label for="label12">Field label 12</label>
<input type="text" id="label12" />
</p>
<p class="text">
<label for="label13">Field label 13</label>
<input type="text" id="label13" />
</p>
</fieldset>
</div>
CSS:
.col {
float: left;
width: 36%;
padding: 2%;
background: #EEE;
}
.col + .col {
margin-left: 10%;
}
.col:after {
content: "";
display: block;
clear: both;
}
fieldset,
.fieldset-like {
margin: 0;
padding: 0;
border: 1px solid darkgreen;
}
.group {
margin: 20px 10px; /* must come after .fieldset-like rule */
}
label {
font-weight: bold;
cursor: pointer;
}
.text { /* because .radio and .checkbox are SO different! */
clear: both;
}
.text label,
.textarea label {
display: inline-block;
width: 39%;
margin-right: 1%;
text-align: right;
background-color: lightgreen;
}
.text input,
.textarea textarea {
display: inline-block;
width: 55%;
border: 1px solid darkgreen;
padding: 4px;
}
.textarea {
width: auto;
padding: 2% 4% 2% 4%;
}
/* label and textarea: also see above */
.textarea label {
width: 14.04%; /* 39% of 36% Yeah I know... */
margin-right: 0.36%; /* 1% of 36% */
background-color: lightgreen;
vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */
}
.textarea textarea {
width: 74%;
}
a class on paragraph allows to style the label according to the nature of the form element (you can't style a preceding sibling - or a parent - according to an element that comes after it in the DOM, in 2012 and in CSS3 at least ;) ).
you can use selector attributes with modern browsers: input[type="text"] but it's longer to write in a Fiddle AND then you must consider text, password and select element in HTML 4.01 and in HTML5 add email, number, tel, etc That'll multiply the length of your selectors. Or you can use a class on a parent to distinguish and group form elements. Former is needed if you're writing a general reset stylesheet for thousands of colleagues, latter is more efficient if you're also the one writing the HTML code.
.group contains 2 .col, it doesn't matter if it's columns in a fieldset or fieldsets in a div.
calculation of a width into an element having a width means multiplication. Draw it on a sheet of paper and write down each width. It'll allow you to not forget about a single one ;)
padding in percentage doesn't seem to work for input. Not sure about that.
widths on select are easier and cross-browser if you add box-sizing:
select {
-moz-box-sizing: content-box; /* Firefox, meet padding ... */
box-sizing: content-box; /* IE8+ */
padding: 4px 6px; /* example */
}
From a UX standpoint form labels that sit to the left of the field have a lower rate of user completion. The reason for this is that users have to read the label, associate the label to the field and then move their eyes back to the left again after completing filling in of the field. This causes minor eye fatigue and mental distraction.
Forms that have the highest rate of completion is when the label is above the field. The second highest is when the label is within the field. This will also give your form a cleaner look and give the impression to the end user that, even though it might be long. It's not a daunting form to complete.
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.