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.
Related
I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.
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
I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?
In my css file I have set my inputs to float right. But right now I don't want it to float anymore. I don't want to delete it from my css file. Right now I am using overflow:auto and it's not doing anything. Everbody knows that overflow:auto; is supposed to stop a float.
Here is the html without all the clutter
<div class="input_area">
<label id="first_name">First Name</label>
<input type="text" />
</div>
Here is the css
.input_area{height:40%; width:40%; margin-left:10%; background-color:#00BBBB; }
input { overflow: auto; }
If you need more html let me know.
I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/