Im very new to html, and Im trying to create a website that uses Pure (type of CSS) forms to make a political poll. The issue I am having is that it scrunches up the question into a narrow spot, making it use several lines, when there is clearly room for it across the page to just take up one line (row). I tried telling the form to give the question (the label part) a certain portion of the page, and the rest of the line for the box where the user enters their answer, but the question (label) remains condensed into a small space. Any help to fix this is appreciated. Here is the code I am using to try to accomplish this:
<form class="pure-form pure-form-aligned" onsubmit="return validateForm()" method="post" name="myForm" action="politicsInsert.php" >
<fieldset>
<div class="pure-control-group">
<label class="pure-input-2-3" for="answerOne">What is your current political affiliation? </label> <input id="answerOne" type="text" name="answerOne">
</div>
<input class="pure-button pure-button-primary" type="submit" value="Submit data!">
</fieldset>
</form>
The label's width rule in the CSS you're linking to is causing the text to split over multiple lines:
.pure-form-aligned .pure-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
You can override it via something like:
div.pure-control-group label.pure-input-2-3 {
width:auto;
}
jsFiddle example
Related
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
The situation:
I have a site with a long list of questions across multiple pages.
Each question is within a made up of a label and an input. Groups of question divs are within an additional div to provide grouping and bordering styles, etc.
The problem:
I want to number my questions, but want to avoid hard coding the numbering. However, it is invalid html to place the <li> inside the divs or labels.
In addition some question divs are conditionally hidden and revealed depending on user input. The divs therefore provide key functionality, and the number must be hidden and revealed along with these divs, (so positioning each <li> outside a divs would be problematic.
Code:
Here is an example of a pared down structure of my form, showing two question "blocks":
<form id="myform" method="post" action="/destinaion/page.php">
<div class="formfield">
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2">Question 1</label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1">Question 2</label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</div>
</form>
The div class form field contains the form page, and page1 various styling particulars for page 1.
I'd like to make an ordered list from my questions, perhaps something like
Attempt at achieving goal:
<form id="myform" method="post" action="/destination/page.php">
<div class="formfield">
<ol>
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2"><li>Question 1</li></label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1"><li>Question 2</li></label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</ol>
</div>
</form>
But as you can see I am putting the <li> inside the <label> which a) is not valid html, and b) doesn't play well with all browsers.
How can I avoid putting <li> elements inside invalid parents, when my list items are separated by many nested divs?
jsFiddle:
See a fiddle of my above attempt. Including some styling and functionality I am trying to achieve (styling via nested divs, hidden questions that reveal etc)
Please see this fiddle demonstrating how to do everything you want without interposing any other elements. I found no need for even a single div anywhere.
Note: I initially used float:left for the question to make the answers line up properly. However, this caused IE to render the numbers just left of the answers instead of left of the questions. I switched to using display:inline-block and now everything works in IE as well.
Comments:
I cleaned up the style sheet, which had some sections repeated and conflicting style rules. I removed unnecessary rules.
I created the lines separating groups of questions using a class, and I also made it apply to the top border of a question rather than the bottom, so that you can use it even if there are hidden questions ending a group, since a hidden question would probably never begin a group. There was no need for additional elements to have borders.
In my opinion the label for the "Reveal" checkbox should be the text next to it, so that you can click that text to check and uncheck the box. Thus, I added a "question" class to the items that are the question, rather than using a label. You must apply the style "question" to the questions to make them style properly. You can apply that to a label element (which is for something else or not), or you can use a span or other element to contain the text when it is not a label.
IE 7 stupidly puts the numbers at the bottom of the line, even though the questions are styled with vertical-align:top. I don't know how to fix that at this time, but it could be another question to those more expert than I in CSS quirks.
IE was not handling the "hidden" method very well, taking up extra space and then when revealing not showing the child elements, so I used absolute positioning instead (which, by taking it out of the document flow, has the same effect). See the CSS for how it works.
I modified the way you were applying the reveal script. Instead of manually wiring up each individual item, instead I put a data value on the checkbox itself, then at the ready event I use that to wire up the page appropriately. Now you can have checkboxes that reveal more questions just by adding an id to the revealed question (or use class instead if you need to reveal more than one at a time) and a data expando attribute like data-togglehidden="l4" to specify the id to toggle right in the checkbox element. No script changes required.
It looks a little like you may have "div-itis" which is the tendency to multiply divs all over the place. No need to be embarrassed, I have had div-itis too, when I was new to html development. You'll grow out of it due to experiences like this. In general, you should use normal non-div page elements and style them directly, rather than wrap things in divs and styling those. Divs are useful when you need to style a group of related functionality or provide a box for different elements. One hint that you may be using divs improperly is when they only have a single item in them (especially another div). Sometimes that is necessary, but ask yourself: can I move the style to the parent or child element instead?
I need to know more about how the "pages" work that you mentioned and that were in your original html markup. There are no pages in html, only when html is printed. So I'm not quite sure what that means or how to style your pages for you.
Here is the cleaned-up html, without the need of additional elements between ol and li:
<form id="myform" method="post" action="/destination/page.php">
<ol class="formfield">
<li>
<label class="question" for="q1">What is your first name?</label>
<input type="text" id="q1" name="q1"/>
</li>
<li>
<label class="question" for="q2">A very long question 2 that is sure to run to a second line just to prove that such a thing will work properly and not mess up the layout, described in your own words?</label>
<input type="text" id="q2" name="q2"/>
</li>
<li class="begingroup">
<span class="question">Are you the type of person who likes to needlessly answer extra questions?</span>
<input type="checkbox" id="q3" name="q3" data-togglehidden="l4"/>
<label for="q3">Yes, yes, that's me!!!</label>
</li>
<li id="l4" class="hidden">
<label class="question" for="q4">Why do you like to do extra needless work?</label>
<input type="text" id="q4" name="q4"/>
</li>
<li class="begingroup">
<label class="question" for="q5">What was your first pet's name?</label>
<input type="text" id="q5" name="q5"/>
</li>
</ol>
</form>
Here's what it looks like in Firefox 16.0.2:
And in IE 7.0.5730.13CO:
The CSS:
ol.formfield {
width: 500px;
margin: 10px auto;
padding: 16px 16px 16px 0;
border: 5px groove #005E9B;
list-style: decimal outside;
color: black;
background-color: #6Fc2F7;
font-family: 'Oxygen', sans-serif;
font-size:15px;
}
ol.formfield li {
clear: both;
padding: 2px;
margin-left: 1.7em;
}
ol.formfield li.begingroup {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #005E9B;
}
.question {
display:inline-block;
width:300px;
vertical-align:top;
}
.hidden {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
}
ol.formfield input {
border-radius:5px; /* css 3 */
-moz-border-radius:5px; /* mozilla */
-webkit-border-radius:5px; /* webkit */
}
And the script to wire up your hide/reveal based on data values on elements:
$('ol.formfield input:checkbox')
.each(function() {
var d = $(this).data('togglehidden');
if(d) {
$(this).on('change', function() {
if ($(this).attr('checked')) {
$('#' + d)
.removeClass('hidden')
.find(':input')
.focus();
} else {
$('#' + d).addClass('hidden');
}
});
}
});
Im currently trying to fix a form that i have built to work on a responsive layout
Ive attached a jpeg of what the form should look like a on full version of the site with the comments field aligned to the right of the rest of fields but when viewed on a mobile i want the comments field to drop below the rest of the fields.
Because i was advised to wrap the comments field in a DIV and place it before the rest of the form fields then float it right, when i view the mobile version the comments field sits at the top of the form instead of the bottom
any suggestions to how i can fix this issue?
see the CSS & HTML below
<style type="text/css">
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
Should all fields have a fixed width? Wrap each column in a div, then float both divs left and give them an explicit width.
Put the div with the text area below the other fields in the HTML.
That should get you a lot closer.
Then, you will need to wrap each field / label pair in a div too.
On the mobile view it should all go into place more or less (bit of padding / margin needed maybe).
Then, on the wider view float the div for the text area right and the other fields' divs left. You'll need to set width for them .. say 49% each.
You'll need to use a clear fix on the element after this lot to clear the floats.
I am trying to get an input field, and it's associated submit button on the same horizontal line, but proving to be a challenge.
Here is my code:
<form name="prodSearch" action="/products/index.cfm" method="post">
<input type="text" name="prodKeyword" maxlength="50">
<input type="image" name="submit" src="/_css/images/but-ok-small.png">
</form>
You can view the site at (form is in the header) : http://d620923.u161.fasthit.net/
Basically I either need to nudge the input field up a bit, or the button down a bit. I've tried everything.. line height, padding, margin, tables etc.. but can't get them to budge.
Any suggestions greatly appreciated !!!
add this to your style.
#productSearch form input {
vertical-align: middle;
}
for textfield:
float: left;
for the button:
margin-top: 2px;
float: right;
I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.