I'm trying to make a responsive grid of radio buttons, with a label "column" to the left of it. With the HTML and CSS below, making the window narrower eventually causes the radios to wrap to two columns, then one, as intended. However, that doesn't happen until much of their text is offscreen to the right.
It appears that the browser thinks the right-hand edge of the .controlContainer is in the wrong place, off by roughly the width of the label "column" on the left. The same behavior happens in Firefox ESR 31.4.0, Chrome 40.0.2214.115 m, and IE 11, so it doesn't seem to be a browser bug.
The sample code below includes a checkbox that applies a really funky workaround, which does work, but I hope someone can point me in a direction where that sort of nonsense isn't needed.
As noted in commented-out CSS, applying position:absolute to the .controlContainer instead of the workaround given works too, but then elements around it collapse on top of it because it takes up no space.
Note that the Run Code Snippet facility here doesn't display this correctly due to its own CSS and the restricted size of the embedded iframe, so you need to either copy the code into a local file, or view it on CSSDeck.
<!DOCTYPE html>
<html>
<head>
<title>Float wrapping</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
*, *:after, *:before {-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body, form, pre, div, span, label {font-family: sans-serif; font-size: 13px; margin: 0; padding: 0;}
.fieldContainer {white-space: nowrap;}
.labelContainer {display: inline-block; font-weight: bold; text-align: right; vertical-align: top; width: 150px;}
.controlContainer {display: inline-block; max-width: 800px;}
.controlContainer label {float: left; padding-right: 10px; width: 200px;}
.controlGridText {display: inline-block; margin: 0 2.25em 5px 0; white-space: normal;}
input {float: left;}
.hackyFix .controlContainer {left: -150px; margin-left: 150px; position: relative;}
/* .hackyFix .controlContainer {position: absolute;} can do this instead of above hack, but then other elements collapse into its space */
/*.hackyFix .fieldContainer {overflow: hidden;} hides horizontal scrollbar, but shouldn't have to do this */
</style>
</head>
<body>
<pre>
Make the window narrower, and eventually the radios wrap to two columns, then one.
However, that doesn't happen until much of their text is offscreen on the right.
Also note that the horizontal scrollbar appears before it's actually needed.
Check the 'Apply hacky fix' box, and the only solution I've found gets applied, but it's pretty funky, and doesn't fix the scrollbar.
See commented-out CSS for some other notes.
Better solutions are most welcome!
</pre>
<form id="form">
<hr>
<label>Apply hacky fix<input type="checkbox" id="cbHack" onclick="document.getElementById('form').className = this.checked ? 'hackyFix' : ''"></label>
<hr>
<div class="fieldContainer">
<div class="labelContainer" style="">Favorite Lizard</div>
<div class="controlContainer">
<label>
<input type="radio" value="1" name="r1">
<span class="controlGridText">1 Gecko lorem ipsum</span>
</label>
<label>
<input type="radio" value="2" name="r1">
<span class="controlGridText">2 Dolor sit amet</span>
</label>
<label>
<input type="radio" value="3" name="r1">
<span class="controlGridText">3 Iguana consectetur adipiscing elit </span>
</label>
<label>
<input type="radio" value="4" name="r1">
<span class="controlGridText">4 Chameleon praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>
</label>
<label>
<input type="radio" value="5" name="r1">
<span class="controlGridText">5 Morbi id elit massa</span>
</label>
<label>
<input type="radio" value="6" name="r1">
<span class="controlGridText">6 Maecenas fringilla quis odio id auctor pellentesque laoreet</span>
</label>
<label>
<input type="radio" value="7" name="r1">
<span class="controlGridText">7 Basilisk</span>
</label>
<label>
<input type="radio" value="8" name="r1">
<span class="controlGridText">8 Tuatara quam enim ornare urna</span>
</label>
<label>
<input type="radio" value="9" name="r1">
<span class="controlGridText">9 Suscipit faucibus nunc dolor vel arcu</span>
</label>
</div>
</div>
<div>This is some more text, here just to see what happens to objects below the fields.</div>
</form>
<script>
document.getElementById('cbHack').checked = false;
</script>
</body>
</html>
See this fiddle. One of the issues in the example is that it isn't using the box model that modern frameworks are based off of, meaning that padding is getting added to the outside of elements instead of the inside. This makes percentage-based grids incredibly hard to work with if that isn't turned on.
I patched your version by including the bootstrap css but you really only need the box model to fix it. This is the other part I changed:
.controlContainer {
max-width: 800px;
width: calc(100% - 105px);
}
Doing this offsets the "favorite lizard" label. If I were you though, I would switch to percentage-based grids to make this a lot easier. The parent containers could have a 3 column and 9 column grid while the labels would be a 3 column grid on large, 2 on medium, and 1 on small.
Related
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}
/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}
h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6">Home</b></td></tr>
<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
Menu<br>
<br></br>
Delivery<br>
<br></br>
Testimonials<br>
<br></br>
Contact information<br>
</td>
<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>
<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>
<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>
<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>
Hey, so after I've finally got something going I've gone to place a google map (not fully implemented yet), just trying to get the right placement for it. It seems tho I can't get the google map to move to the bottom of the page where I'd like it? Or even how do I get the image to move? It seems to have gone above the border at the top, this is really poor positioning and I have to move it to the bottom. Any help to whats going wrong here would be greatly appreciated!
use the following:
<tr><td><div id="map-canvas"></div></td></tr>
at the end of your page, instead of:
<div id="map-canvas"></div>
it will place your map at the bottom of the page, it was at the top because you didn't assign a <tr> and <td> to it
good luck coding! ^^
edit: http://jsfiddle.net/h261cgc9/ Here's a fiddle to see the change i've made in action
But as I've mentioned in my comment, it's much better to create a website without the use of tables, only use tables when you actually want to put something in one, putting a whole body in the table is a bad idea, see: http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/
In the fiddle I removed the which contained the styles, as there is no need for it, you could just put the styles at the top of the page in between the <head> and <body>
I'm trying to get radio buttons to stack on top of each other instead of display side by side.
I have several form labels defined as inline-block with a width of 150, for the purpose of aligning the input boxes.
I Know how to do this without a label, but when the labels sit to the left, I can't figure it out.
HTML:
<form action="here.php" method="POST">
<p>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value"male">Male
<input type="radio" name="gender" value"female">Female
</p>
<p>
<input type="submit" name="input" value="Submit">
</p>
</form>
CSS:
form {
width:356px;
margin: 0 auto;
}
label {
width:150px;
display: inline-block;
}
How do I get "female" to sit directly under "male".
I've gotten close but I don't think its the right way. I combined the radio button inputs in a <p> then floated its label and itself to the left, added a <br />, then cleared the submit button, but it doesn't look that great.
Advice please? Thanks a bunch,
Josh
I'd suggest reorganising your HTML, to the following:
form {
width: 356px;
margin: 0 auto;
}
fieldset {
margin: 0.5em auto;
width: 90%;;
}
label {
width: 150px;
display: inline-block;
}
fieldset fieldset label {
width: auto;
margin-left: 150px;
}
<form action="here.php" method="POST">
<fieldset>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
<!-- a fieldset groups related input elements together -->
<fieldset>
<!-- a <legend> labels a section of the <form>, identifying
the grouped <inputs>, a <label> was utterly wrong for
this, given it was, and can be, associated with only
one of the <input>s -->
<legend>Gender</legend>
<!-- wrapping the <input> associates the <input> with the appropriate
(parent) label -->
<label>
<input type="radio" name="gender" value="male">Male</label>
<!-- inciedentally, the '=' is not optional, and you were
missing them here to identify the value and its
associated attribute-value -->
<label>
<input type="radio" name="gender" value="female">Female</label>
</fieldset>
<input type="submit" name="input" value="Submit">
</fieldset>
</form>
Add a break?
<input type="radio" name="gender" value"male">Male<br />
<input type="radio" name="gender" value"female">Female
You can put each of the radio inputs in a div ( or other block element ) and then they will sit on top of each other. You could then style those divs using CSS for any other styling you want.
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
On http://www.southdevonaonb.org.uk/cordialemapping/ in any of the tabs under "Wembury" I have two inputs on the same line - the first is a check box and the second is an image (blue information icon).
I want both inputs to float to the right of the parent div so that vertically they all appear inline.
This is the HTML:
Letterbox locations and results
<input type="image" align="right" id="info-image" class="info-image" src="images/info.png" title="Click for more information about this layer" onclick="layer0()" value='Info'/>
<input type="checkbox" id="layer0" onclick="toggleLayer(0)" unchecked><br />
And the CSS:
.info-image{
float:right !important;
display:inline !important;
}
#info-image{
float:right !important;
display:inline !important;
}
What I have tried:
I have given the input image a class and ID and tried forcing it to float to the right as well as trying the display tag for a similar effect, but with no luck. How can I achieve this?
Screenshot here of what I am trying to achieve:
http://www.southdevonaonb.org.uk/cordialemapping/help/screenshot1.png
I am not exactly sure as to how you want it to appear, but from the things perceived, here is the solution.
The HTML:
<input id="info-image" class="info-image" align="right" type="image" src="images/info.png" title="Click for more information about this layer" onclick="layer100()" value="Info">
<br>
<input id="layer100" type="checkbox" unchecked="" onclick="toggleLayer(100)" style="margin-right: -15px; margin-top: 7px;">
The CSS:
.info-image{
float:right !important;
display:inline !important;
}
#info-image{
float:right !important;
display:inline !important;
}
Hope this helps.
EDIT
I just got your screenshot notification and have made some edits.
The HTML:
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
You need to just need to remove your <p> tag which has the checkbox and the image and replicate the full <p> tag with the <div> code provided above. I hope this helps now.
try this, u have to set the right of the image
info-image{
float:right !important;
display:inline !important;
right: 4px;/OR// right: 40px;/
}