Responsible form is created using code below.
If window is resized, it resizes itself automatically, captions and input elements stay aligned.
It contains fixed values 210px, 75px, 100px, 120 px is css below.
Is it reasonable and if yes, how to remove/replace those fixed values with something other
like percents or em's ?
input, select elements and jquery-ui autocomplete with dropdown button are used.
<form class='ui-widget-content form-document'>
<div class='form-field'>
<label class='form-label' for='nimi'>Customer name</label>
<span class='form-fullwidth'>
<input class='ui-widget-content ui-corner-all form-autocomplete' name='nimi' value='Karu Org AS' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>
<div class='form-field'>
<label class='form-label' for='Number'>Number</label>
<input class='ui-widget-content ui-corner-all form-fullwidth' name='Number' />
</div>
<div class='form-field'>
<label class='form-label' for='payterm'>Pay term</label>
<span id='span_Maksetin1_tingimus' class='form-fullwidth'>
<select class='ui-widget-content ui-corner-all form-fullwidth' name='payterm'>
<option value='' selected='selected'></option>
<option value='0'>0 days</option>
</select>
</span>
</div>
... lot of similar form-field divs
</form>
css:
.form-document
{
padding: 0.5%;
}
.form-field
{
display: inline-block;
margin: 2px;
width: 210px; /* label width + input field width */
}
.form-label
{
padding-left: 5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: smaller;
display: inline-block;
text-align: right;
width: 75px; /* determine by max caption width */
}
.form-fullwidth
{
width: 120px; /* 210-5-75 */
}
.form-autocomplete
{
width: 100px; /* 210-5-75-combobutton width*/
}
.form-combobutton
{
height: 1.09em;
margin: 0 0 0px;
padding: 0;
margin-left: -6px;
vertical-align: middle;
width: 1em !important;
}
Looks ok to me though I personally use ems in most cases.
You could also consider using a preprocessor like LESS if you want to use variables to avoid repetition. You can get LESS or SASS via nuget and there are zillions of tutorials out there.
Related
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
I have a very simple form. The usual: a label and an input. The goal is to create a simple and responsive form. Everything works ok, except when the form contains a select input that is too large. For some reason, the select input does not shrink when the browser is resized. The other inputs (input, textarea) do shrink as the browser is resized.
I've tried using max-width: 100% on the select input, as other people suggested here, with no success.
I've created a jsfiddle that explains everything:
https://jsfiddle.net/ampr41po/3/
Here's the HTML
<div class="form-main">
<form action method>
<div class="controlUnit">
<div class="label">
<label for="firstname">First name</label>
</div>
<div class="control">
<input id="firstname" name="firstname" type="text" autofocus value="">
</div>
</div>
<div class="controlUnit">
<div class="label">
<label for="name">Name</label>
</div>
<div class="control">
<select id="name" name="name">
<option value="1">Name goes here</option>
<option value="2">Name</option>
<option value="3">This is a very very very very very long name. The name is mwpekng erter erter erter 4et erter 4ertye rwe 45y 43 rt rty rty rt rty rty </option>
<option value="4">Another name</option>
</select>
<span class="icon-item"></span>
<span class="icon-item"></span>
<span class="icon-item"></span>
</div>
</div>
</form>
</div>
CSS:
* {
box-sizing: border-box;
}
.form-main {
background-color: red;
max-width: 500px;
margin: 0 auto;
padding: 20px 15px;
}
.controlUnit {
display: flex;
}
.controlUnit .label {
flex: 0 0 100px;
text-align: right;
padding-right: 10px;
}
.controlUnit .control {
flex: 1 1 auto;
display: flex;
}
select {
max-width: 100%;
}
input#firstname {
width: 100%;
}
.icon-item {
width: 20px;
height: 20px;
background-color: yellow;
margin-left: 10px;
}
.icon-item ~ .icon-item {
margin-left: 5px;
}
Try using width: 100%, instead of max-width: 100% for select in your CSS code in order to have a responsive select element at all screen sizes.
Your approach to set max-width: 100% is wrong, because select elements are form control elements and thus have to follow some implicit rules. For instance, the width of a select element cannot be made narrower than its widest option when using max-width. That's made that way by the browser and there's nothing you can do to change it. So, unless you set the width explicitly, there is no other way to achieve a responsive design.
Check out the updated jsfiddle here.
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}
I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.
I have this simple layout:
<form>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this button to do Action A">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press this">
</div>
<div>
<input class="buttonStyle" type="submit" name="action" value="Press!">
</div>
</form>
I use this simple style so that the buttons are big and are have some space between them:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
}
The problem I have is that the buttons do not have the same size (since it seems that the size of the button is the same as the size of the text) and form a scale (i.e. big, short, shorter).
How can I make the buttons have the same size irrespective of the containing text?
Just add a width property to the button CSS.
For example:
.buttonStyle {
//...
width: 100px;
}
set a width attribute in your CSS
like so:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width: 200px;
}
You have several options here. Setting a constant width may be one of them. You could also try display: block, which will make the buttons fill the entire width of their parent node.
Define some standard "width" for your buttons like,:
.buttonStyle {
margin-bottom: 10px;
border: none;
cursor: pointer;
font-size: 20px;
border-radius: 5px;
width:300px;
}
I have created a fiddle too to refer: http://jsfiddle.net/aasthatuteja/vChFX/
Hope this helps!