I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
Related
I'm trying to get certain elements of this form to be displayed on the same line: I want the output of the form to be displayed on the same line as "Total: $ " - (I still want the price per lb ($1.00 in this example) to be displayed on the line above and the number spinner to be displayed to the right). I tried to wrap the whole thing in a <span> that I set the CSS of to be display:inline but it didn't work (& I've tried a few other things as well which also didn't work).
Here's a selection of my code:
HTML:
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>
CSS:
legend { float: left;
margin-top: 35px;
padding-top: 20px;
margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
margin-top: 25px;
padding-bottom: 5px;
margin-bottom: 10px;
}
legend { float: left;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
}
form > * { border:1px solid red; line-height:2em }
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant">
<label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity">
</span>
<span>Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
Get rid of your p tags. Try not to use dispensable containers and classes. Your code would be more readable. You can change the line-height value of form > *
I would like to create a form, which has a line number on each line and several form fields on each line. If the fields don't fit into one line, they should wrap into a new line while the line number stays at the top of the line. Here's an illustration of this form:
(The dark blue lines describe the explicit grid areas, the light blue line implicit grid areas for the different form fields.)
I know CSS Grid Layout is meant to solve use cases like this, though it is not clear to me, how to generate the form mentioned above with it.
What I've tried so far is:
HTML:
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<label for="field1">Field 1 <input id="field1"/></label>
<label for="field2">Field 2 <input id="field2"/></label>
<label for="field3">Field 3 <input id="field3"/></label>
</div>
<div class="row">
<div class="lineNumber">2</div>
<label for="field1">Field 4 <input id="field1"/></label>
</div>
</div>
CSS:
.row {
display: grid;
grid-template-columns: 50px 1fr 1fr;
grid-auto-rows: 30px;
}
.row > * {
padding: 4px;
}
.lineNumber {
grid-row-end: line-number span;
}
What I don't get yet, how can I achieve to let the row number column span over the whole height of the row while the other columns wrap between lines. I assume it must be possible defining the line-number named area using grid-template-rows. Though how?
EDIT:
I'm aware that it may be possible by using display: table-row; / display: table-cell;, though my main point is to achieve this using CSS Grid Layout.
2ND EDIT:
Note that some months after I asked this question here and Grid Layout implementations stabilized showing this feature is not available yet, I requested it at the CSS Working Group. Since then a similar request for spanning explicit and implicit tracks was made.
In my opinion, css counters should meet your question
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
form {
counter-reset: form;
border: 2px solid cyan;
}
fieldset {
position: relative;
display: block;
padding: 1em 1em 1em 3em !important;
border-bottom: 2px solid cyan;
}
fieldset::before {
counter-increment: form;
content: counter(form);
position: absolute;
left: 5px;
top: 5px;
font-weight: bolder;
}
.sp-b { margin-bottom: 1em }
<form>
<fieldset>
<div class="row">
<div class="col-xs-6 sp-b"><input type="text" class="form-control"></div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
</form>
You can use display:table/table-cell to achieve what you want
Snippet
*,
*:before,
*:after {
box-sizing: border-box;
}
.form {
display: table;
table-layout: fixed;
width: 100%;
border: 1px solid #000;
}
.row {
display: table-row
}
.lineNumber,
.fields {
display: table-cell;
vertical-align: top;
padding: 10px 0;
}
.lineNumber {
border: 1px solid #000;
border-width: 0 1px 1px 0;
width: 20px;
text-align: center
}
.fields {
border-bottom: 1px solid #000;
/*fix inline-block gap*/
font-size: 0
}
label {
padding: 0 10px;
/*whatever you want */
font-size: 16px;
}
.row:first-of-type label {
width: 50%;
display: inline-block
}
.row:first-of-type label:not(:last-of-type) {
border-bottom: 1px solid red;
padding-bottom: 10px
}
.row:first-of-type label:last-of-type {
margin-top: 10px
}
.row:last-of-type .lineNumber,
.row:last-of-type .fields {
border-bottom: 0
}
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<div class="fields">
<label for="field1">Field 1
<input id="field1" />
</label>
<label for="field2">Field 2
<input id="field2" />
</label>
<label for="field3">Field 3
<input id="field3" />
</label>
</div>
</div>
<div class="row">
<div class="lineNumber">2</div>
<div class="fields">
<label for="field1">Field 4
<input id="field1" />
</label>
</div>
</div>
</div>
I'm trying to build tabs using pure HTML and CSS. I've got the tab functionality working, so when you click a tab label the corresponding content shows.
But in my design I've 2 tab areas, 1 for request and 1 for response. For some reason my request seems to overlap the response area, why is this so?
The <hr> tag that separates the 2 areas should always be below the request area's shown content.
http://jsfiddle.net/bobbyrne01/pgzt6nbf/
Current output (content tab) ..
Current output (header tab) ..
Desired output ..
html ..
<div id="main">
<div class="left w60">
<div class="center">
<h2>Request</h2>
</div>
<div>
<div>
<input id="url" placeholder="Request URL .." class="w100" />
</div>
<br/>
<div>
<select id="method">
<option value="0">GET</option>
<option value="1">HEAD</option>
</select>
<button type="button" id="submit">Submit</button>
</div>
<br/>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1a" name="tab-group-1" hidden checked />
<label class="tabLabel" for="tab-1a">Headers</label>
<div class="content">
<div id="headersRequest">
<table id="headersRequestTable" class="w100">
<tr>
<th>Name</th>
<th>Value</th>
<th>
<input type="button" id="newHeaderButton" value="+" />
</th>
</tr>
</table>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2a" name="tab-group-1" hidden checked />
<label class="tabLabel" for="tab-2a">Body content</label>
<div class="content">
<div id="bodyRequest">
<textarea id="bodyRequestListItem" rows="10" class="w100"></textarea>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="center">
<h2>Response</h2>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1b" name="tab-group-2" hidden checked />
<label class="tabLabel" for="tab-1b">Headers</label>
<div class="content">
<div id="headers"></div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2b" name="tab-group-2" hidden checked />
<label class="tabLabel" for="tab-2b">Body content</label>
<div class="content">
<button id="clipboard" style="display: none;">Copy to clipboard</button>
<br/>
<div id="bodyContent"></div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3b" name="tab-group-2" hidden checked />
<label class="tabLabel" for="tab-3b" id="statusListItem">Status</label>
<div class="content">
<div id="status"></div>
</div>
</div>
</div>
</div>
<div class="right w30">
<div class="center">
<h2>History</h2>
<table id="historyContainer"></table>
</div>
</div>
</div>
css ..
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w100 {
width: 100%;
}
.bCollapse {
border-collapse: collapse;
}
/*
* Tabs
*/
.tabs {
position: relative;
height: 100%;
clear: both;
margin: 35px 0 25px;
}
.tab {
float: left;
}
.tabLabel {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
top: -20px;
}
.content {
position: absolute;
top: 2px;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
opacity: 0;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
Try to add min-height for tabs Demo
.tabs {
position: relative;
height: 100%;
min-height: 200px;
clear: both;
margin: 35px 0 25px;
display:block;
}
I remember a year or 2 back, before I learned JS, when I was heavily invested in creating functioning tabs using only HTML and CSS. They can be done, but at a cost of being unable to use animations on them (you cannot animate from display: none to display: block).
Anyway, the issue you are having if because your element with the class "content" has its position set to "absolute". By definition, you are telling this element to not consume space. Remove this, or change the position to "relative", and you should see a more desired behaviour.
I'm having some trouble wrapping text on a web application I'm designing for a client. Below you can see where I am having trouble:
So ideally I would like this text to wrap underneath the text above it, in a uniform manner. Not underneath the image. Below you can see the HTML code I am using for this:
<ul>
<div class="grid">
<div class="col-1">
<li class="howDoPadding">
<label for="id_delivery_0">
<img src="{{ STATIC_URL }}rd/images/message_icon.png" class="byAppointment" />
<input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" />
Answer<div class="lightBlueText">Chat</div> By Appointment (Fastest)
</label>
</li><!-- .howDoPadding -->
</div><!-- .col-1 -->
<div class="col-1">
<li>
<label for="id_delivery_2">
<img src="{{ STATIC_URL }}rd/images/message_fly_right.png" class="mailASAP" />
<input type="radio" id="id_delivery_2" value="email" name="delivery" />
Answer<div class="lightBlueText">Mail</div> ASAP (Within 1-2 days)
</label>
</li>
</div><!-- .col-1 -->
</div><!-- .grid -->
</ul>
And all of the CSS is below:
/* Form */
.col-1 li.howDoPadding { padding-bottom: 10px!important; }
.byAppointment { margin: 0 0 -4px 10px;}
.offlineForm .lightBlueText {
color: #80A9BD;
display: inline;
}
.mailASAP { margin: 0 0 -4px 18px; }
/* Grid */
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.grid:after {
clear: both;
content: "";
display: table;
}
/* Grid Gutters */
[class*='col-'] {
float: left;
padding-right: 20px;
}
[class*='col-']:last-of-type { padding-right: 0; }
.col-1 { width: 100%; }
You can also check out a working example of this at: http://jsfiddle.net/Mjs2u/
Thank you very much for any and all help. I really appreciate it! Let me know if you guys need me to elaborate on anything else or you need/want more code.
Your HTML code is ill-formed. Forget ol, ul listing if there isn't a list. ol should only have li as its children elements. <ol><div><li></li></div></ol> is bad practice.
Basically, if you want to put something under sth, you can group them into a div or other block element. Do not use float layout for the div or you will have similar layout as your example if the previous element is shorter than your div.
You can use some flexible layout patterns. Use a wrapper div with a wide padding-left, where the image and radio button will be placed. And put the label and text in the main body of the div. Something like this:
<div class="flexible-layout">
<div class="left-content">
Image
</div>
<div class="main-content">
You text goes here<br />
Second line goes here
</div>
</div>
<style type="text/css">
.flexible-layout {
padding-left: 80px;
position: relative;
}
.flexible-layout .left-content {
position: absolute;
left: 0;
top: 0;
width: 80px;
}
</style>
For your specific code sample, I made some refactoring based on the content you've given, and you can check jsFiddle to see if it's what you want.
Hope it helps.
<form class="offlineForm">
<ul>
<li class="howDoPadding">
<label for="id_delivery_0">
<img src="http://i.imgur.com/RVmh2rz.png" class="byAppointment" />
<input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" />
<div class="label">Answer <span class="lightBlueText">Chat</span> By Appointment (Fastest)</div>
</label>
</li>
<li>
<label for="id_delivery_2">
<img src="http://i.imgur.com/8J0SEVa.png" class="mailASAP" />
<input type="radio" id="id_delivery_2" value="email" name="delivery" />
<div class="label">Answer <span class="lightBlueText">Mail</span>ASAP (Within 1-2 days)</div>
</label>
</li>
</ul>
</form>
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
ul li { list-style: none; }
* { margin: 0; padding: 0; }
*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
form.offlineForm { width: 200px; margin: 0 auto; padding: 30px; }
label { padding-left: 25px; display: block; position: relative; }
label img { position: absolute; left: -25px; }
label .lightBlueText { color: #80A9BD; }
label div.label { display: inline; }
li.howDoPadding { padding-bottom: 20px; }
http://jsfiddle.net/4faQk/
hope it will be helpfull
try this:
add span with class name in the text you want to move then position:relative;
below i add <span class="text">
html:
<li class="howDoPadding">
<label for="id_delivery_0">
<img src="http://i.imgur.com/RVmh2rz.png" class="byAppointment" />
<input checked="checked" type="radio" id="id_delivery_0" value="chat" name="delivery" />Answer
<div class="lightBlueText">Chat</div> <span class="text">By Appointment (Fastest)<span>
</label>
</li>
<li>
<label for="id_delivery_2">
<img src="http://i.imgur.com/8J0SEVa.png" class="mailASAP" />
<input type="radio" id="id_delivery_2" value="email" name="delivery" />Answer
<div class="lightBlueText">Mail</div> <span class="text">ASAP (Within 1-2 days)</span>
</label>
</li>
css:
.text {
position:relative;
left:15px;
}
hope this help you
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>