I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button.
The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue
I have put it here http://jsfiddle.net/zrhB6/3/
The Css
input[type=text],input[type=password]{
display: block;
height: 3em;
width: 100%;
}
.btn {
background-color:#c1d82f;
border:3px solid #97a34b;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
}
HTML
<div class="grid-container">
<div class="grid-50 login">
<h3>Login</h3>
<form class="grid-100">
<input type="text" name="loginEmail" placeholder="Email"/>
<input type="password" name="loginPassword" placeholder="pass"/>
<input type="submit" name="loginSubmit" class="btn"/>
</div>
<div class="grid-50 login">
<h3>Register</h3>
<form">
<input type="text" name="registerName" placeholder="Name"/>
<input type="text" name="registerEmail" placeholder="Email"/>
<input type="password" name="registerPassword" placeholder="pass"/>
<input type="submit" name="registerSubmit" class="btn"/>
</div>
</div>
I'm using unSemantic grid, but that shouldn't be a issue I think
To both CSS selectors, add:
box-sizing:border-box;
The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.
Related
I have 3 images of mXn pixels(approx), but on rendering, the image size increase due to zoom-in issue, as shown below:
Below is the html code,
<div class="cardtype">
<label>Cardtype:</label>
<input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
<input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
<input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</div>
Below is the CSS code,
.cardtype input{
width: 8%;
}
.cardtype img{
width: 8%;
}
How do I align img and input radio button horizontally?
Is this something to do with image size? How do I decide the image size?
Is this something to do with image resolution? How do I decide the image resolution?
http://www.bootply.com/pYw1JhTXOW
Try to set size to image wrappers, not to images directly.
You can take radio button in label and make some padding to that image within label, for example :-
<div class="cardtype">
<label>Cardtype:</label>
<label class="radio">
<input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
</label>
<label class="radio">
<input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
</label>
<label class="radio">
<input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</label>
</div>
Now do some css for that image :-
.radio img{
padding-top : 5px; //take as per your img these just for example
}
Try this out (use vertical-align):
CSS
.cardtype img{
width: 8%;
vertical-align: middle;
}
DEMO HERE
Here is how you do it. This will work for any image size.
Add the span around the image to help position it I gave it the class helper, you will also need to add a bit of css.
add this css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 8%;
}
.helper img {
vertical-align: middle;
max-height: 25px;
}
try it here: http://jsfiddle.net/kLbvh139/
jQuery Mobile automaticly adds this to an < input >. How can I override it and remove the top margin from the div?
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput">
</div>
And css of the div looks like:
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
-moz-box-sizing: border-box;
display: block;
line-height: 1.4em;
outline: 0 none;
padding: 0.4em;
width: 100%;
}
DEMO
You may write new CSS for input with parent containers class name so that it will take higher priority
HTML
<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput" />
</div>
</div>
CSS
.wrap .ui-input-text input{
border:1px solid red; /*desired style*/
margin-top:0;
}
Starting with jqm 1.4 you should use class="ui-field-contain" instead of data-role="fieldcontain" around your <label> and <input> tags. To adjust the vertical spacing of each of the field sets you can override the margins of the <div> tag using a simple additional style property:
<div class="ui-field-contain" style="margin-top:2px;margin-bottom:2px;">
<label for="field1">Field label:</label>
<input type="text" name="field1" data-mini="true" id="field1" />
<div>
I'm working on an application which has a side bar and two divs in my main view. I'm trying to split the height of both equally within the container. I tried height = 50% but that didn't work out too well.
<div id="mainView" ng-controller="userCtrl">
<div id="top">
<div id="topRow">
<label for="entityDropDown">Select a user: </label>
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="getUserInfo(selectedUser)">
</select>
</div>
</br></br>
<div id="entityStatus">
<div>
<label for="entityAvailable">Available Groups</label>
<select id="entityAvailable" multiple
ng-model="selectedAvailableGroups"
ng-options="g.name for g in availableGroups | orderBy:'name'">
</select>
</div>
<div id="moveButtons" >
<button type="button" ng-disabled="!selectedUser || availableGroups.length === 0" ng-click="addUserToGroup()">Add User</button>
<button type="button" ng-disabled="!selectedUser || assignedGroups.length == 0" ng-click="removeUserFromGroup()">Remove</button>
</div>
<div>
<label for="entityAssigned">Assigned Groups</label>
<select id="entityAssigned" multiple
ng-model="selectedAssignedGroups"
ng-options="g.name for g in assignedGroups | orderBy:'name'">
</select>
</div>
</div>
<br class="clearfix"/>
</div>
<div id="middle" ng-show="selectedUser">
<div id="entityInfo">
<div>
<label for="entityName">Name: </label>
<input type="text" id="entityName" ng-model="selectedUser.name"/>
</br>
<label for="entityEmail">Email: </label>
<input type="text" id="entityEmail" ng-model="selectedUser.email"/>
</br>
<button type="button" ng-disabled="!selectedUser" ng-click="updateUserInfo()">Update User</button>
</div>
<div>
<label for="entityId">ID: {{selectedUser.id}} </label>
</br>
<label for="entityDomain">Domain: {{selectedUser.domain}} </label>
</br>
<label for="isAdmin">Admin: {{selectedUser.isAdmin}}</label>
</br>
</div>
</div>
<br class="clearfix"/>
</div>
</div>
I put it in a fiddle: http://jsfiddle.net/crmyq/
you should set the height of the parent container to 100% (its parent container already has a fixed height) and set the height of the child containers to 50%:
#mainView {height:100%}
#top {height:50%; }
#middle {height:50%; }
check this updated fiddle: http://jsfiddle.net/crmyq/1/
I also removed the padding on the child containers, since padding is added to the height which will lead to the child containers sticking out of the parent container. You can use margins (or padding) on the elements inside the child containers to make up for the removed padding.
UPDATE
for switching between 2 or 3 rows, you could use a class on the #mdContainer div (switch to using classes instead of ID's for this, it's easier):
#mdContainer.2columns .top, #mdContainer.2columns .middle {height:50%}
#mdContainer.3columns .top, #mdContainer.3columns .middle,
#mdContainer.3columns .bottom {height:33.33%}
Please give 100% height on your #mainView container and also add 50% height on #top and #middle container.
#mainView{
position: relative;
top: 0;
bottom: 0;
height:100%;/*new changes*/
background: green;
color: black;
margin-left: 140px;
right: 0;
padding-left: 0px;
}
#top{
background: blue;
color:white;
height:50%;/*new changes*/
text-align: center;
}
#middle{
background: red;
color: white;
height:50% ;/*new changes*/
}
fiddle : http://jsfiddle.net/nikhilvkd/crmyq/3/
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I have been spending the entire day trying to figure out how I can create big forms and at the same time maintain a proper design of the layout.
Currently I'm using formee (style and 960 grid system), which I have tried to turn into an inline form rather than row based (default). Unfortunately it gets really messy and looks horrible.
To give an visual understanding of what I want to archieve I have created a mockup.
How can I solve issue?
Here is such an example: http://jsfiddle.net/PhilippeVay/gaegv/2/
HTML:
<fieldset class="group">
<legend>First logical group of items</legend>
<div class="col">
<p class="text">
<label for="label1">Field label 1</label>
<input type="text" id="label1" />
</p>
<p class="text">
<label for="label2">Field label 2</label>
<input type="text" id="label2" />
</p>
<p class="text">
<label for="label3">Field label 3</label>
<input type="text" id="label3" />
</p>
</div>
<div class="col">
<p class="text">
<label for="label4">Field label 4</label>
<input type="text" id="label4" />
</p>
<p class="text">
<label for="label5">Field label 5</label>
<input type="text" id="label5" />
</p>
<p class="text">
<label for="label6">Field label 6</label>
<input type="text" id="label6" />
</p>
</div>
</fieldset>
<div class="group fieldset-like">
<p class="textarea">
<label for="label7">Field label 7</label>
<textarea id="label7">some text (test font-size)</textarea>
</p>
</div>
<div class="group">
<fieldset class="col">
<legend>Third legend</legend>
<p class="text">
<label for="label8">Field label 8</label>
<input type="text" id="label8" />
</p>
<p class="text">
<label for="label9">Field label 9</label>
<input type="text" id="label9" />
</p>
<p class="text">
<label for="label10">Field label 10</label>
<input type="text" id="label10" />
</p>
</fieldset>
<fieldset class="col">
<legend>Fourth legend</legend>
<p class="text">
<label for="label11">Field label 11</label>
<input type="text" id="label11" />
</p>
<p class="text">
<label for="label12">Field label 12</label>
<input type="text" id="label12" />
</p>
<p class="text">
<label for="label13">Field label 13</label>
<input type="text" id="label13" />
</p>
</fieldset>
</div>
CSS:
.col {
float: left;
width: 36%;
padding: 2%;
background: #EEE;
}
.col + .col {
margin-left: 10%;
}
.col:after {
content: "";
display: block;
clear: both;
}
fieldset,
.fieldset-like {
margin: 0;
padding: 0;
border: 1px solid darkgreen;
}
.group {
margin: 20px 10px; /* must come after .fieldset-like rule */
}
label {
font-weight: bold;
cursor: pointer;
}
.text { /* because .radio and .checkbox are SO different! */
clear: both;
}
.text label,
.textarea label {
display: inline-block;
width: 39%;
margin-right: 1%;
text-align: right;
background-color: lightgreen;
}
.text input,
.textarea textarea {
display: inline-block;
width: 55%;
border: 1px solid darkgreen;
padding: 4px;
}
.textarea {
width: auto;
padding: 2% 4% 2% 4%;
}
/* label and textarea: also see above */
.textarea label {
width: 14.04%; /* 39% of 36% Yeah I know... */
margin-right: 0.36%; /* 1% of 36% */
background-color: lightgreen;
vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */
}
.textarea textarea {
width: 74%;
}
a class on paragraph allows to style the label according to the nature of the form element (you can't style a preceding sibling - or a parent - according to an element that comes after it in the DOM, in 2012 and in CSS3 at least ;) ).
you can use selector attributes with modern browsers: input[type="text"] but it's longer to write in a Fiddle AND then you must consider text, password and select element in HTML 4.01 and in HTML5 add email, number, tel, etc That'll multiply the length of your selectors. Or you can use a class on a parent to distinguish and group form elements. Former is needed if you're writing a general reset stylesheet for thousands of colleagues, latter is more efficient if you're also the one writing the HTML code.
.group contains 2 .col, it doesn't matter if it's columns in a fieldset or fieldsets in a div.
calculation of a width into an element having a width means multiplication. Draw it on a sheet of paper and write down each width. It'll allow you to not forget about a single one ;)
padding in percentage doesn't seem to work for input. Not sure about that.
widths on select are easier and cross-browser if you add box-sizing:
select {
-moz-box-sizing: content-box; /* Firefox, meet padding ... */
box-sizing: content-box; /* IE8+ */
padding: 4px 6px; /* example */
}
From a UX standpoint form labels that sit to the left of the field have a lower rate of user completion. The reason for this is that users have to read the label, associate the label to the field and then move their eyes back to the left again after completing filling in of the field. This causes minor eye fatigue and mental distraction.
Forms that have the highest rate of completion is when the label is above the field. The second highest is when the label is within the field. This will also give your form a cleaner look and give the impression to the end user that, even though it might be long. It's not a daunting form to complete.