I have to align the fields(right) as shown in below image.Here is my code built in Angularjs using label tag for all the legends in form and i styled using CSS. How to correct the alignment, so that i can submit this to higher officials?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title> SAP WORKBENCH </title>
<style>
body{
background-color: lightgray;
margin-left: 500px
}
.option{
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button{
width: 300px;
}
</style>
</head>
<h2>Password Reset</h2>
<body>
<div ng-app="">
<b></b>
<form>
<label>System:</label>
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<div ng-switch="myVar">
<label>Client:</label>
<select class="option" ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select class="option" ng-switch-when="QR9">
<option>500</option>
</select>
<select class="option" ng-switch-when="PR3">
<option>500</option>
</select>
<select class="option" ng-switch-default>
<option></option>
</select>
</div>
<br>
<label>User:</label>
<input class="option" type="text" placeholder="Enter User Id.."></input>
<br><br>
<label>New Password:</label>
<input class="option" type="password"></input>
<br><br>
<label>Re-Enter New Password:</label>
<input class="option" type="password"></input>
<br><br>
<input class="button" type="button" value="Reset">
</form>
</div>
</body>
</html>
Wrap each label + select into a separate div. Then give the parent container the properties display: flex, flex-direction: column, align-items: center.
Further tip: Try to avoid the <br > tags and work with margin-bottom. For this purpose also the new single <div> elements can be used.
It would be best if you use bootstrap to do this. It's much easier to get alignment done that way so please do use bootstrap. Also I have done a test code without bootstrap using display: flex;. Hope this helps your problem (I have not included any of your ngswitch statements here)
HTML
<h2>Password Reset</h2>
<body>
<div>
<b></b>
<form class="d-flex flex-row">
<div class="d-flex flex-column text-right mr-1">
<label class="margin-b">System:</label>
<label class="margin-b-7">Client:</label>
<label class="margin-b-7">User:</label>
<label class="margin-b-7">New Password:</label>
<label class="margin-b">Re-Enter New Password:</label>
</div>
<div class="d-flex flex-column">
<div class="margin-b">
<select class="option" ng-model="myVar">
<option></option>
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
</div>
<div class="margin-b">
<select class="option">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
<div class="margin-b">
<input class="option" type="text" placeholder="Enter User Id.."></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="option" type="password"></input>
</div>
<div class="margin-b">
<input class="button" type="button" value="Reset">
</div>
</div>
</div>
</form>
</div>
</body>
CSS
body {
background-color: lightgray;
}
.option {
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
width: 300px;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.text-right {
text-align: right;
}
.mr-1 {
margin-right: 1rem;
}
.margin-b {
margin-bottom: 5px;
}
.margin-b-7 {
margin-bottom: 7px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/mhp6uksd/
Related
I'm working on an online rubric program, and I've tried just about everything I know without any luck. What I am trying to do is make each column in the rubric the same width and dynamically resize the height. Since there are 5 columns for each row, each column should be aprox 20% width of the parent. The tricky part comes with the height of each item. Since there will be varying text lengths inside each item, every item in the row should resize to the height of the longest item from that row.
I'm using flex right now, and I've tried using flex: 1 1 0px and flex-grow: 1; inside the .tile without luck. I have also tried using CSS grid, where I am able to achieve the equal width, but then the height requirement gets all wonky.
For visual people, the end result should look like this.
Any advice is appreciated.
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {display: flex;}
.tile {
flex: 1 1 0px;
box-sizing: border-box;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Reliability<br><i>6.R.3</i></div>
</label>
<input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
<label for='b_6.R.3'>
<div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
</label>
<input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
<label for='a_6.R.3'>
<div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher. </div>
</label>
<input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
<label for='m_6.R.3'>
<div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
</label>
<input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
<label for='e_6.R.3'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
I think this is the perfect use-case for CSS Grid. I would recommend making the <section> a grid and using something like repeat(5, 20%) or explicitly use 20% 20% 20% 20% 20% for your grid-template-columns definition. You might also use a combination of repeat() and minmax() for column generation when building out responsive grids.
Lastly, just make sure to give each .tile a height of 100% so they occupy all of the vertical space in each grid item.
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {
display: grid;
/* grid-template-columns: 20% 20% 20% 20% 20%; */
grid-template-columns: repeat(5, 20%);
gap: 0;
}
.tile {
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Reliability<br><i>6.R.3</i></div>
</label>
<input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
<label for='b_6.R.3'>
<div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
</label>
<input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
<label for='a_6.R.3'>
<div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher. </div>
</label>
<input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
<label for='m_6.R.3'>
<div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
</label>
<input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
<label for='e_6.R.3'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
Edit: Your source from pastebin was missing a closing </html> tag.
<body>
<title>Presentations Rubric</title>
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<form id='rubric' action='rubric.int.php' method='post'>
<div id='title'>
Presentations
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Using Technology
<br>
<i>7.W.1</i>
</div>
</label>
<input type='radio' id='b_7.W.1' name='score[7.W.1]' value='1'>
<label for='b_7.W.1'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to create multimodal content that effectively communicates an idea using appropriate technology and media.
</div>
</label>
<input type='radio' id='a_7.W.1' name='score[7.W.1]' value='2'>
<label for='a_7.W.1'>
<div class='tile'>
Student
<b>attempts</b>
to create multimodal content that effectively communicates an idea using appropriate technology and media.
</div>
</label>
<input type='radio' id='m_7.W.1' name='score[7.W.1]' value='3'>
<label for='m_7.W.1'>
<div class='tile'>Student will create multimodal content that effectively communicates an idea using appropriate technology and media.</div>
</label>
<input type='radio' id='e_7.W.1' name='score[7.W.1]' value='4'>
<label for='e_7.W.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Presentation Creation
<br>
<i>7.W.2</i>
</div>
</label>
<input type='radio' id='b_7.W.2' name='score[7.W.2]' value='1'>
<label for='b_7.W.2'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='a_7.W.2' name='score[7.W.2]' value='2'>
<label for='a_7.W.2'>
<div class='tile'>
Student
<b>attempts</b>
to create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='m_7.W.2' name='score[7.W.2]' value='3'>
<label for='m_7.W.2'>
<div class='tile'>Student will create presentations that integrate visual displays and other multimedia to enrich the presentation.
</div>
</label>
<input type='radio' id='e_7.W.2' name='score[7.W.2]' value='4'>
<label for='e_7.W.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
</section>
<section>
<input type='radio' id='5' disabled>
<label for='5'>
<div class='tile'>
Presentation Skills
<br>
<i>1.W.1</i>
</div>
</label>
<input type='radio' id='b_1.W.1' name='score[1.W.1]' value='1'>
<label for='b_1.W.1'>
<div class='tile'>
Student attempts to give
<b>simple</b>
presentations in a group or individually, organizing information and determining appropriate content for audience with
<b>full guidance and support</b>
.
</div>
</label>
<input type='radio' id='a_1.W.1' name='score[1.W.1]' value='2'>
<label for='a_1.W.1'>
<div class='tile'>
Student gives presentations in a group or individually, organizing information and determining appropriate content for audience with
<b>some guidance and support</b>
.
</div>
</label>
<input type='radio' id='m_1.W.1' name='score[1.W.1]' value='3'>
<label for='m_1.W.1'>
<div class='tile'>Student give presentations in a group or individually, organizing information and determining appropriate content for audience.</div>
</label>
<input type='radio' id='e_1.W.1' name='score[1.W.1]' value='4'>
<label for='e_1.W.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='5'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
</body>
</html>
<style>
.print {
display: none
}
body {
margin: 0
}
#title {
padding: 20px 0px;
text-align: center;
font-size: 35px
}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent
}
/* --------[RUBRIC]-------- */
#rubric {
margin: 10px 25px 0px 25px;
}
#rubric textarea {
width: 100%;
border: 1px solid black;
box-sizing: border-box;
}
section {
display: grid;
grid-template-columns: repeat(5, 20%);
gap: 0;
}
.tile {
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center
}
.tile:hover:not(.category) {
background-color: #D4BBF1;
transform: scale(1.03);
}
.category {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
section input[type=radio] {
display: none
}
section input:checked + label .tile {
background-color: #B488E7
}
#controls {
margin-top: 20px;
padding-bottom: 40px;
display: flex;
justify-content: center;
}
/* --------[PRINT]-------- */
.print {
display: none
}
#media print {
body {
margin: 10px
}
.print {
display: block
}
select {
display: none
}
h2 {
margin: 0;
text-align: center;
font-size: 20px
}
.category {
padding-top: 50px;
}
.tile {
font-size: 12px !important;
}
textarea {
display: none
}
.center {
display: none
}
}
</style>
All you have to do is to give display:flex for the same height, flex-direction: column to be neat, and flex: 1 1 0px so that they are the same width (20% of the screen) to each child of the section (using section * to select all children of the section).
.print {display: none}
body {margin: 0}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px}
#title select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent}
/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;}
section {display: flex;}
section * {
display:flex;
flex-direction: column;
flex: 1 1 0px;
}
.tile {
flex: 1 1 0px;
box-sizing: border-box;
padding: 5px 10px 20px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center}
#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
<div id='title'>
Research & Inquiry
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='11'>John Doe</option>
</select>
<h2 class='print'>August 8th, 2021</h2>
<hr class='print'>
</div>
<div id='rubric'>
<section>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Inquiry<br><i>6.R.1</i></div>
</label>
<input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
<label for='b_6.R.1'>
<div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
</label>
<input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
<label for='a_6.R.1'>
<div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
</label>
<input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
<label for='m_6.R.1'>
<div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
</label>
<input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
<label for='e_6.R.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<section>
<input type='radio' id='4' disabled>
<label for='4'>
<div class='tile'>Recording Info<br><i>6.R.2</i></div>
</label>
<input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
<label for='b_6.R.2'>
<div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
</label>
<input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
<label for='a_6.R.2'>
<div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
</label>
<input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
<label for='m_6.R.2'>
<div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
</label>
<input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
<label for='e_6.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency. </div>
</label>
</section>
<input type='hidden' name='standard' value='4'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
</div>
<div id='controls' class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>
div input:not(:first-of-type){
display: block;
}
#left_side{
width: 40%
}
label{
width:15em;
display: inline-block;
vertical-align: top;
}
input{
width: 23em;
border-style:solid;
border:1px solid black;
}
.group div{
margin-bottom: -1px;
}
.group input {
margin-bottom: -1px;
box-shadow: none;
background-color: antiquewhite;
}
.get{
width:23em;
display: inline-block;
}
<div class="group">
<div>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" class="get">
</div>
<div>
<label for="last_name">First Name:</label>
<input type="text" id="last_name" class="get">
</div>
</div>
<!--Here is some code with grouped boxes:-->
<div>
<label for="address_1_ln_1">Address 1:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_1_ln_2">
</div>
</div>
<div>
<label for="address_2_ln_1">Address 2:</label>
<div class="get">
<input type="text" id="address_1_ln_1">
<input type="text" id="address_2_ln_2">
</div>
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" class="get">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" class="get">
</div>
<dive>
<label for="zip">Zip:</label>
<input type="text" id="zip" class="get">
</dive>
How do you make text input of forms overlap borders like border: collapse on a table? By default stacking them one on top of the other has them develop a 2px border between adjacent inputs. Ideally both the borders should merge.
You could do
input {
margin-bottom: -1px;
}
I want to align some check boxes with labels such that the check boxes are in a vertical row to the right side and the labels are aligned with the starting edges in a vertical row on the left side.
.row {
display: flex;
}
.row label { flex: 1; max-width: 25%; }
<div class="container">
<div class="row">
<label>Label</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 2</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 3</label><input type="checkbox" />
</div>
</div>
I believe this is what you're looking for:
label {
display: inline-block;
padding-left: 15px;
}
<form>
<div>
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
</div>
<form>
Working Example: JSFiddle
Css File:
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
HTML File:
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">✓</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">✓</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">✓</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">✓</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">✓</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">✓</span></label>
</div>
</div>
Or
Refer this Link:
https://bootsnipp.com/snippets/featured/badgebox-css-checkbox-badge
I use bootstrap in my project.
The width of the area is 350px.
I have this html elements:
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm">
<select class="form-control" ng-model="" ng-options="">
<option value="">- authority-</option>
</select>
</div>
</form>
Here is plunker.
How can I make search box and dropdown list in one line.
You don't need css to fix this, you can do it with bootstrap styles.
Wrap the form in a 12 wide container (col-lg-12) and wrap each input in a 6 wide container (col-lg-6). (For simplicities sake I only used desktop size in the example)
This would look like:
<div class="col-lg-12">
<!-- start form -->
<div class="col-lg-6">
<!-- input -->
</div>
<div class="col-lg-6">
<!-- input -->
</div>
<!-- end form -->
</div>
That way bootstrap will cut the screen in half (12 / 2 = 6) and put the input box in there.
To make it work with your code have a look at this fiddle
Note I added col-lg, col-md, col-sm and col-xs to make them appear on the same line regardless of screen size.
EDIT:
To put all of this in another panel use:
<div class="panel panel-default">
<div class="panel-body">
<!-- form row -->
</div>
</div>
Working fiddle: http://jsfiddle.net/92z54z04/596/
.input-group are table displayed, so:
.input-group {
display: inline-table;
}
will solve your problem.
JSFiddle
<form class="form-inline">
<div class="form-group" >
<input type="text" placeholder="search"/>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<select class="form-group" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</form>
you can do it with bootstrap easily by using col-xs-6 property
here is the working code:
<form class="form-inline">
<div class="col-xs-6">
<div class="input-group input-group-sm" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
You could extend bootstrap to allow a select element inside your input group.
This depends on your usecase if it is intuitive, but I think this may be a good looking option to evaluate.
You basically copy and paste some of bootstraps style to make the select element fit into a input group.
If you have control over the sass, less files, you may be able to do it cleaner than I did.
.input-group-select:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-select {
position: relative;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
.input-group-select>select {
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
border-left-width: 0;
}
.input-group-btn:not(:first-child):not(:last-child)>.btn {
border-radius: 0;
border-left-width: 0;
}
.input-group-select:last-child>select {
border-radius: 0 3px 3px 0;
}
.input-group-sm>.input-group-select>select {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div class="input-group-select">
<select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>
Just use style in div:
display:inline-table;
http://jsfiddle.net/ankitg1602/mqnrmLjb/1/
I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.
I need to layout some input fields and their layers on a grid (or like a table I guess) with
lable input label input
label input label input
Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is
label input label input
label logerinput label input
How do I line up the second set of labels and there inputs?
I've made two classes for the labels
#dpi_form label {
display: inline-block;
width: 150px;
margin-left: 20px;
}
#dpi_form .right-label {
display: inline-block;
width: 150px;
margin-left: 220px;
}
and the associated controls are
<label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
<label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
within a div.
I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.
I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.
Any clues please?
Peter.
Despite my comment about using tables on your question, this is how I would do it.
CSS:
label,
input {
display: block;
}
label {
padding: 4px 0 0;
}
.labels1 {
float: left;
width: 80px;
}
.labels2 {
float: left;
width: 80px;
}
.inputs1 {
float: left;
width: 200px;
}
.inputs2 {
float: left;
width: 200px;
}
HTML:
<div class="labels1">
<label for="input1">Input 1: </label>
<label for="input2">Input 2: </label>
<label for="input3">Input 2: </label>
</div>
<div class="inputs1">
<input type="text" value="" name="input1" id="input1" />
<input type="text" value="" name="input2" id="input2" />
<input type="text" value="" name="input3" id="input3" />
</div>
<div class="labels2">
<label for="input4">Input 4: </label>
<label for="input5">Input 5: </label>
<label for="input6">Input 6: </label>
</div>
<div class="inputs2">
<input type="text" value="" name="input4" id="input4" />
<input type="text" value="" name="input5" id="input5" />
<input type="text" value="" name="input6" id="input6" />
</div>
Then you can change the labels and inputs classes to the width you want.
Although I still think tables are easier because then you don't have to worry about setting widths yourself; you also don't have to worry about vertical alignment with tables.
use following styles.
for parent container
display: table;
for row container
display: table-row;
for cell container
display: table-cell;
example
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
<div>
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
</div>
Use a table, that's what they are for.
I would suggest using a table or for a pure CSS solution maybe the 960 grid system 960.gs
I would use floats. Here's a jsfiddle showing how I would do it:
http://jsfiddle.net/pSsap/
I'll reproduce the code below.
With html like this:
<form class="grid">
<section>
<label for="wind">wind</label>
<span class="field"><input id="wind" name="wind" type="input" class="regular"></span>
<label for="earth">earth</label>
<span class="field"><input id="earth" name="earth" type="input" class="regular"></span>
</section>
<section>
<label for="fire">fire</label>
<span class="field"><input id="fire" name="fire" type="input" class="long"></span>
<label for="air">air</label>
<span class="field"><input id="air" name="air" type="input" class="regular"></span>
</section>
</form>
And css like this:
form.grid section {
clear: both;
}
form.grid section label, form.grid section span.field {
display: block;
float: left;
}
form.grid section label {
width: 50px;
}
form.grid section span.field {
width: 150px;
}
input.regular {
width: 100px;
}
input.long {
width: 140px;
}
Solutions:
Use a list: <ol> or <ul>
Set a width for that list: (in the example, 960px is the width of the <ul>)
Float the lists: <li> and set a width to limit its floating point: (in the example, 320px is the set width)
If you want to have a consistent alignment with the <label> and <select> pairs, set a width to the <label> (make sure you set it as a block-level element first: in the example, the <label> was set to 160px)
Make sure to clear (clear: left) any elements following this list (<ul>) used.
The Markup:
<ul>
<li>
<label for="req_retailer_index_fld">Select the retailer*:</label>
<select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_region_index_fld" class="right-label">Select the region*:</label>
<select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_customer_type_index_fld">Select the customer type*:</label>
<select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label>
<select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
</ul>
The CSS
ul {
background: #EEE;
width: 960px;
}
li {
background: #FFC0CB;
float: left;
list-style: none;
width: 320px;
}
label {
display: inline-block;
width: 160px;
}
The result is that, the list will just drop when the <ul> can't contain it any longer (since you have set a width in it). On the other hand, the width of the <li>s will consistently make them align to each other, while being floated.