Another IE6 (and 7) float problem.
I've some labels at right and some inputs, textarea and span at left.
http://jsfiddle.net/VRErj/1/
How can I fix it?
Edit: screenshot
As My Head Hurts mentioned, clearing is a pain in IE 7 and below. You can wrap your label/input pairs in a div and apply the clearfix class to it that you get on this page: http://www.positioniseverything.net/easyclearing.html. It would look something like this:
<div class="clearfix">
<label for="input1">input 1:</label>
<input type="text" name="input1" id="input1" />
</div>
<div class="clearfix">
<label for="input2">input 2:</label>
<input type="text" name="input2" id="input2" />
</div>
<!--etc...-->
That should do it.
Related
This is driving me crazy. I've got a few sibling elements in the same form, input fields and divs (that contain input fields that need to stay on the same line), but when 100% width is applied to each, they aren't the same length; the divs are the same length as the other divs, and the independent inputs are the same as the other inputs. I've tried everything I can think of, and I can't figure out what's causing this behavior. It's messing-up my responsive styling, so I've come to a bit of a standstill...
If the width is 100%, and the elements are direct siblings of the same parent element, they SHOULD have equal widths, correct? In the screenshots below, the inputs inside the "bi-field-div" and "tri-field-div" elements are shorter, and the inputs that aren't inside a div are longer, even though the divs and inputs are both children of the same form element and are set to 100% (the one input you see in a class-less, id-less div still renders the same length as if there were no div at all-- I put it in there to test it.) I've tried extending the inputs within the divs by way of different percentages and margins and padding, but the div itself stays that shorter length, so the inputs within it just end up on different lines at a certain point; I've also fiddled with the positioning, displays, and everything else, and just can't get these stubborn things to stretch out equally!
I'll greatly appreciate any constructive advice you can give me.Thank you.
HTML:
<form>
<!-- pop-out text -->
<div class="div-form">
<p id="call-to-action">SIGN UP</p>
<p id="sub-text">Subrscribe to our newsletter</p>
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="First Name">
<input type="text" class="form-field right-inline-field" placeholder="Last Name">
</div>
<div>
<input type="text" id="email" class="form-field" placeholder="Email">
</div>
<input type="text" class="form-field" placeholder="Phone" >
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="State / Province">
<input type="text" class="form-field right-inline-field" placeholder="Zip">
</div>
<input type="text" class="form-field" placeholder="Company Name">
<input type="text" class="form-field" placeholder="How did you hear about us?">
<input type="text" class="form-field" placeholder="Company Name">
<div id="tri-field-div">
<input type="text" class="form-field tri-field" placeholder="Experience">
<input type="text" class="form-field tri-field" placeholder="Interests">
<input type="text" class="form-field tri-field" placeholder="Referral?">
</div>
<div class="signup-btn-div">
<button id="signup-btn">
SIGN UP
</button>
</div>
<div id="privacy-policy">
Privacy Policy
</div>
</div>
</form>
CSS:
Form CSS
What it looks like in browser:
Form in browser
I am trying to build a log in with textfields that have padding on them. But the problem is that it doesn't seem to work. I don't know if it is the height or the padding but there must be something wrong because it used to work and after I opened the page again it didn't, I don't know why.
Here is the CSS:
.Login-Textfield{
width:280px;
height:20px;
padding:15px;
background-color:#EEE;
border:none;
outline:none;
color:#222;
text-align:right;
font-size:20px;
font-family:main;
}
And here is the HTML:
<!-- Login -->
<div class="Content-590">
<div class="New-Offer-Header"><span class="FL"><img src="../images/logo-2.png" width="160" height="70" /></span><span class="FR"><img src="../images/offer-header.png" width="160" height="70" /></span></div>
<div class="New-Offer-Content">
<form action="../ex/ad/create-offer.php" method="POST">
<div class="New-Offer-570">
<input type="text" name="title" class="New-Offer-Textfield-Long MB10" dir="rtl" placeholder="عنوان الإعلان" value="" />
</div>
<div class="New-Offer-Right ML10">
<select type="text" name="section" class="New-Offer-Select MB10" dir="rtl">
<option>أختر القسم</option>
<option value="value">option</option>
</select>
</div>
<div class="New-Offer-Left">
<input type="text" name="talent" class="New-Offer-Textfield MB10" dir="rtl" placeholder="الموهبه" value="<?php form_values('talent'); ?>" />
</div>
<div class="New-Offer-570">
<textarea type="text" name="description" class="New-Offer-Textarea MB10" dir="rtl" placeholder="الوصف"><?php form_values('description'); ?></textarea>
</div>
<div class="New-Offer-570 F28">:أرغب في</div>
<br />
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="work" class="Switch" id="work" /><label dir="rtl" for="work">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل</div>
<div class="New-Offer-Remember"><input type="checkbox" name="freelance" class="Switch" id="freelance" /><label dir="rtl" for="freelance">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل المستقل</div>
</div>
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="part_time" class="Switch" id="part_time" /><label dir="rtl" for="part_time">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل الجزئي</div>
<div class="New-Offer-Remember"><input type="checkbox" name="train" class="Switch" id="train" /><label dir="rtl" for="train">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">التدريب</div>
</div>
<div class="New-Offer-570"><center><input type="submit" class="New-Offer-Submit" value="!أضف موهبتك" /></center></div>
</form>
</div>
</div>
Can you tell what is the problem?
Please visit the page: http://www.mawhibaty.com/login.php
Your page looks fine to me, so I don't know what is the problem. But maybe you should not specify both the height and the padding. If you specify the font size and the padding, the height should adjust automatically. If you specify the font size and the height, the padding should adjust automatically. I think you should define only two of the three: font size (including the default white space above and below the letters) and padding, or font size and the height of the input text field.
The text input fields do have some padding, but I have no idea of knowing if it's as much as you want. I would try removing the "height" from your CSS because the padding will determine the height.
I have found a solution ...
All I needed was to remove the height and the padding will work great for text field. I don't know why but it worked.
I want to create a simple form. The final design should be the one above, but with a responsive positioning.
So I tried to use the inline attribute of css:
<!--Name...-->
<div style="display: inline;">
<label for="vorname_patient">Vorname: </label> <br> <input type="text" name="vorname_patient" id="vorname_patient" required="" size="20" autofocus=""> <br>
<label for="nachname_patient">Nachname: </label> <br> <input type="text" name="nachname_patient" id="nachname_patient" required="" size="20">
</div>
<!--Anrede...-->
<div style="display: inline;">
<label for=anrede_patient">Anrede: </label> <br> <input type="text" name="anrede_patient" id="anrede_patient" size="20">
</div>
If i run that i will not get any inlineme parts anywhere.
i want to get this (without a table):
https://jsfiddle.net/kcd1qr1r/
What did I do wrong here? Thank you!
Inline elements must flow within their nearest block parent. So, because you changed the div containers to be inline, your label and input elements are just flowing within the body (nearest block parent). Use inline-block instead or, due to possible margin issues with that approach, you may want to try flexboxes.
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>
I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page
http://staging.terrilynn.com/fundraising/
There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.
The div's that should appear to the left of right-floated message div are disappearing.
Page displays correctly in firefox. Any help would be appreciated.
<div id='footer-contact-form'>
<h1>Request Information <span class='note'>(all fields required)</span></h1>
<form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
<fieldset>
<legend>Footer Info Request</legend>
<div class="textarea required" id="w2376">
<p class="data">
<label for="area_2376">Message</label>
<textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
</p>
</div>
<div class="text required" id="w2377">
<p class="data">
<label for="text_2377">Name</label>
<input id="text_2377" type="text" name="e_2377" value="" />
</p>
</div>
<div class="text required" id="w2378">
<p class="data">
<label for="text_2378">Phone</label>
<input id="text_2378" type="text" name="e_2378" value="" />
</p></div>
<div class="text" id="w2379">
<p class="data">
<label for="text_2379">Email</label>
<input id="text_2379" type="text" name="e_2379" value="" />
</p>
</div>
<p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>
<input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
<input type="hidden" name="SITEID" value="2185" />
<input type="hidden" name="cpBID" value="367780" />
<input type="hidden" name="formslug" value="footer-info-request" />
<input type="hidden" name="CMSCODE" value="EKK" />
<input type="hidden" name="fkey" value="" />
</fieldset>
</form>
</div><!-- #footer-contact-form -->
I guess I found the problem:
screen.css (line 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
"overflow:hidden" causes the problem.
Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.
Wow that worked!
I was using overflow:hidden to force the div to contain the floated label and input elements.
But really the float on the input elements wasn't necessary.
Thanks you all very much.