I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
Related
I have applied padding for only top and bottom of a div. The padding attribute is working homogeneously for the form element,but not for the div which is parent to the form as shown in the image below.
Output:-
#content {
font-family: arial;
margin-top: 30px;
background: #99ccff;
padding: 10px 0px
}
#content form {
background: #990000;
padding: 10px 0px;
}
<div id="content">
<form>
<label for="mid">MID:</label>
<input type="text" name="mid" id="mid" class="input" />
<input type="submit" name="sbmit" id="sbmit" value="Submit" />
</form>
</div>
Firefox,Opera and Chrome all showing the same result.
I want to know why padding for the div is not showing homogeneous behaviour with respect to top and bottom layout with this regard?
If you put that CSS and HTML into a blank HTML file, the default user agent stylesheet is causing that problem - it gives the <form> element a default bottom margin of 1em that you need to override with form { margin: 0; }
Try using <div class="content"> instead. The id only gives the div and ID and does not assign the css class.
Simply add a comma to the #content, form ¿Is this what you were looking for?
#content {
font-family: arial;
margin-top: 30px;
background: #99ccff;
padding: 10px 0px
}
#content, form {
background: #990000;
padding: 10px 0px;
}
<div id="content">
<form>
<label for="mid">MID:</label>
<input type="text" name="mid" id="mid" class="input" />
<input type="submit" name="sbmit" id="sbmit" value="Submit" />
</form>
</div>
I've got a static site, which is all of a sudden displaying irregular headings. This is a single page with lots of JavaScript including tabular selections at the top of the page. The site worked just fine six months ago. Now I'm seeing unexplained mis-alignment of input elements on a half of the 12 different navigation tabs:
Decorative Ends
Round to Tapered
Bracing
Round to Square
Round to Flat
Airframe Cluster
The headings contained within a form:
<form id="dte_form">
<div class="containerLeft">...</div>
<div class="containerLeft">...</div>
<div class="containerLeft">
<label title="Data can.. [hover info]">Tube O.D. (mm): </label>
<input type="text" id="dteCutTubeOD" value="31.75" size="8">
<br>
<label>Amplitude (mm):</label>
<input type="text" id="dteAmplitude" value="25.4" size="8">
<br>
<label># of Cycles:</label>
<input type="text" id="dteNumOfCycles" value="3" size="8">
<br>
</div>
<div style="clear: both"></div>
<div class="containerLeft">
<input type="button"...>
<input type="button"...>
<input type="button"...>
<input type="button"...>
</div>
</form>
The CSS is nothing fancy:
.containerLeft {
float: left;
margin: 4px 20px;
}
.containerLeft label {
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
float: right;
height: 15px;
margin: 4px 5px;
padding-left: 5px;
}
The heading should look like this:
Basically, in a div, I would float the label left, float the input element right, add a <br> and repeat. I can't figure out why occasionally the elements don't line up correctly. I'm sure I'm missing something silly, but I just can't see it. Any ideas what is causing the occasional misalignment?
Click here for website. Note. I'm seeing the same results in both Chrome and Firefox.
This is what happens when you use floats. They overlap following blocks and shrink line boxes.
If you want to prevent an block element from being adjacent to a float, just use clear.
.float {
float: left;
width: 50px;
height: 3em;
border: 1px solid;
background: yellow;
}
.normal, .clear {
height: 2em;
border: 1px solid;
background: pink;
}
.clear {
clear: left;
}
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>
So apparently the issue is related to element height. Note that the label and input elements have different heights. This was done for appearance. In some combinations and element lengths the float thing gets futzed up.
The corrective action was to modify the CSS style sheet in one place:
.containerLeft label {
clear: both; /* new addition to this element */
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
An alternative would be to use <div style="clear: both"></div> in lieu of the <br> elements (or use the handy CSS library classes offered up by Oriol)
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.