Problem: the html/css below displays the tabs fine but I would like to align them to the center. I have tried various ways but they still align to the left. How can I align the three tabs to the center and keep them inline-block? Any help is greatly appreciated, thank you.
I also attached a picture for reference.
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
width: 100%;
margin: 0 auto;
}
label {
display: inline-block;
margin: 0 auto;
padding: 15px 25px;
text-align: center;
color: #bbb;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs:checked+label {
color: #555;
border-bottom: 2px solid orange;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}
<main>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<section id="content1">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 2</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content2">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content3">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
</main>
Here is my take at it using flexbox.
I added some holders and some css code
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
margin: 0 auto;
}
label {
padding: 15px 25px;
text-align: center;
color: #bbb;
display: flex;
border: 1px solid blue;
align-self: center;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs-holder {
display: flex;
align-items: center;
flex-direction: column;
border: 1px solid red;
}
.tabs-grouper {
display: flex;
flex-direction: row;
border: 1px solid green;
}
<div class="tabs-holder">
<div class="tabs-grouper">
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</div>
</div>
Simply add text-align: center to main, and then reset it all on section using text-align:left.
It will affect inline-block elements, but not your section being block, though as descendants might inherit it, the reset will take care of that.
Stack snippet
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
text-align: center; /* added */
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
text-align: left; /* added */
}
.tabs {
display: none;
width: 100%;
margin: 0 auto;
}
label {
display: inline-block;
margin: 0 auto;
padding: 15px 25px;
text-align: center;
color: #bbb;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs:checked+label {
color: #555;
border-bottom: 2px solid orange;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}
<main>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<section id="content1">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 2</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content2">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content3">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
</main>
You could wrap the tabs in a div and then set the wrapper css to margin:auto and width:20% or whatever keeps them inline.
I use the always good cheat, center tags!
<center>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</center>
Related
I am making a little form and have some line-breaks so that the text boxes are ontop of eachother. I can't seem to get the submit button and radio buttons to the right to start at the top of the form. Any ideas on what I need to do to achieve my goal design?I just need to shift the stuff to the right of the input text boxes up so they are inline with the "Restaurant Name" box
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 400px;
border: 1px solid #ebebeb;
border-radius: 3px;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form>
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</form>
</div>
</main>
My Current Code (BAD):
My Design Goal:
flexbox would be the best here. It has all the needed stuff to format your design to specifications. Also, don't be afraid to use divs, they exist to be used to format. HTML needs to be foolproof, since it will be used on a large number of devices, and it is prone to breaking if you do not nest well enough.
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-radius: 3px;
}
.form {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.left, .right {width: 50%;}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form class="form">
<div class="left">
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="right">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</div>
</form>
</div>
</main>
I had to add a few more divs in order to make it cleanly.
When in doubt, use flexbox.
Biggest change is spliting your form into columns using flexbox and then using again flexbox in those columns to create desired layout.
Lines that I have added has been marked with /* added */. html you will figure out yourself.
main {
margin-left: 88px;
margin-right: 88px;
}
form { /* added */
display: flex; /* added */
column-gap: 12px; /* added */
} /* added */
.form-column { /* added */
width: fit-content; /* added */
display: flex; /* added */
flex-wrap: wrap; /* added */
} /* added */
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
max-width: 400px;
width: 100%; /* added */
border: 1px solid #ebebeb;
border-radius: 3px;
}
.radio-group { /* added */
flex: 0 0 50%; /* added */
max-width: 50%; /* added */
} /* added */
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
cursor: pointer;
}
<main>
<form>
<div class="form-column">
<input type="text" placeholder="Restaurant Name" class="textbox">
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="form-column">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="form-column">
<div class="radio-group">
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
</div>
<div class="radio-group">
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label>
</div>
<div class="radio-group">
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
</div>
<div class="radio-group">
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label>
</div>
</div>
</form>
</main>
This can be done well with flexbox. In addition to #GhostPengy, I have added a flexbox to the right area.
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-radius: 3px;
}
.form {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.left, .right {width: 50%;}
.right {
display: flex;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form class="form">
<div class="left">
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="right">
<div>
<button type="submit" id="search_button">
<i class="fa fa-search"></i>hello
</button>
</div>
<div>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</div>
</div>
</form>
</div>
</main>
Use display flex for making it desired and responsive for all kind of screens.
Code below - Working example here.
HTML -
<main>
<div>
<form>
<div class="form-container">
<div class="col-50">
<input
type="text"
placeholder="Restaurant Name"
class="textbox"
/><br />
<input type="text" placeholder="Location" class="textbox" />
</div>
<div class="col-50">
<div>
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="radio-buttons-container">
<label class="radio-element">
<input type="radio" value="Best Match" name="search_terms" />
Best Match</label
>
<label class="radio-element">
<input type="radio" value="Review Count" name="search_terms" />
Review Count</label
>
<label class="radio-element">
<input type="radio" value="Rating" name="search_terms" />
Rating</label
>
<label class="radio-element">
<input type="radio" value="Distance" name="search_terms" />
Distance</label
>
<br />
</div>
</div>
</div>
</form>
</div>
</main>
And CSS -
* {
box-sizing: border-box;
}
main {
padding: 24px;
}
main .form-container {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.form-container .col-50 {
flex: 1;
min-width: 200px;
}
.form-container .col-50:last-of-type {
display: flex;
gap: 8px;
}
.radio-buttons-container {
display: flex;
flex-wrap: wrap;
}
.radio-buttons-container .radio-element {
min-width: 50%;
white-space: nowrap;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 100%;
border: 1px solid #ebebeb;
border-radius: 3px;
}
You can divide form in two columns like this and can further customize CSS properties on those
You can open the following code snippet in full screen or can checkout the same on Codepen, you can make it responsive accordingly too
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 400px;
border: 1px solid #ebebeb;
border-radius: 3px;
}
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form>
<div class="row">
<div class="column">
<input type="text" placeholder="Restaurant Name" class="textbox"><br />
<input type="text" placeholder="Location" class="textbox">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="column">
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br />
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br />
</div>
</div>
</form>
</div>
</main>
I have a form with a checkbox section. The last option is a text field for a custom entry, but I can't get the field onto the same line as the checkbox.
Picture for reference
HTML (I included the option before it as well for reference):
<li>
<label class="container">Legal
<input id="legal" name="legal" type="checkbox" value="1">
<span class="checkmark" class="square"></span>
</label>
</li>
<li>
<label class="container">
<input id="other" name="other" type="checkbox" value="1">
<span class="checkmark" class="square"></span>
</label>
<input id="otherText" maxlength="40" name="otherText" size="10" type="text" placeholder="Other...">
<span class="bar" style="width: 150px;"></span>
</li>
CSS:
#otherText{
font-size:.9em;
width: 150px;
display:block;
border:none;
color: #fff;
background-color: transparent;
border-bottom:1px solid #757575;
}
#otherText:focus { outline:none; }
<li>
<input id="legal" name="legal" type="checkbox" value="1">
<label class="container">Legal
<span class="checkmark" class="square"></span>
</label>
</li>
<li>
<label class="container">
<input id="other" name="other" type="checkbox" value="1">
<span class="checkmark" class="square"></span>
</label>
<input id="otherText" maxlength="40" name="otherText" size="10" type="text" placeholder="Other...">
<span class="bar" style="width: 150px;"></span>
</li>
CSS -
li {
display: flex;
}
Does this help?
Try display:inline, rather than display:block for your #otherText input. Check out this page for info about display options.
To me it looks as if inline-block will make a difference, and so did removing your color:#fff line:
#otherText{
font-size:.9em;
width: 150px;
display:inline-block;
border:none;
background-color: transparent;
border-bottom:1px solid #757575;
}
#otherText:focus { outline:none; }
<ul>
<li>
<label class="container">Legal
<input id="legal" name="legal" type="checkbox" value="1">
<!--span class="checkmark" class="square"></span-->
</label>
</li>
<li>
<label class="container">
<input id="other" name="other" type="checkbox" value="1">
<!--span class="checkmark" class="square"></span-->
</label>
<input id="otherText" maxlength="40" name="otherText" size="10" type="text" placeholder="Other...">
<span class="bar" style="width: 150px;"></span>
</li>
</ul>
As I did not see any merrit in your <span class="checkmark"> I commented them out out .
The problem was with the "container" class. It was set to display: block.
To solve, I removed the "container" class from the "other" option, and assigned it a unique id with all of the same styling except for display: block.
OP eventually found the solution on their own, but I would like to add something for future reference. I often in time see Flexbox being overlooked.
Flexbox is a great tool for exactly these kind of problems, which rely on grid. I would encourage everyone to read up on Flexbox, especially these properties:
flex-direction
flex-wrap
flex-grow
flex-shrink
flex-basis
justify-content
order
If you master these 7 properties, then grid troubles will be something of the past.
Pair it with max-width properties, padding, margin and what else you'd need to make the grid fit your design.
Often at times, CSS frameworks, such as Bootstrap, can be quite overkill if the project is of a small nature. CSS frameworks should only be justified if you can utilize multiple aspects of it over a larger project. Using Bootstrap for grid alone is not ideal. With that said, Bootstrap does offer a very powerful grid layout with the use of the classes row and col. It's worth reading up on.
Example of using flex with the current problem at hand:
HTML:
<div class="row container">
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="1" />
<span class="cb-text">Dev Team</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="2" />
<span class="cb-text">Product Manager</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="3" />
<span class="cb-text">Security / SecOps</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="4" />
<span class="cb-text">DevOps / CI/CD</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="5" />
<span class="cb-text">Legal</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="6" />
<input type="text" class="cb-text other-text" placeholder="Other..." />
</div>
</div>
CSS:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
max-width: 100%;
}
.container {
width: 650px;
height: 180px;
background-color: #4F4F4F;
padding: 15px;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
font-size: 25px;
color: #FFFFFF;
}
.cb-container {
flex: 0 0 45%;
max-width: 45%;
padding-left: 15px;
padding-right: 15px;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
.cb-element {
display: flex;
flex-direction: column;
flex: 0 0 25px;
max-width: 25px;
height: 25px;
}
input.other-text {
display: flex;
flex-direction: column;
flex: 0 0 65%;
max-width: 65%;
color: #FFFFFF;
font-size: 25px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #B3B3B3;
background-color: transparent;
outline: none;
}
Snippet Example:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
max-width: 100%;
}
.container {
width: 650px;
height: 180px;
background-color: #4F4F4F;
padding: 15px;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
font-size: 25px;
color: #FFFFFF;
}
.cb-container {
flex: 0 0 45%;
max-width: 45%;
padding-left: 15px;
padding-right: 15px;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
.cb-element {
display: flex;
flex-direction: column;
flex: 0 0 25px;
max-width: 25px;
height: 25px;
}
input.other-text {
display: flex;
flex-direction: column;
flex: 0 0 65%;
max-width: 65%;
color: #FFFFFF;
font-size: 25px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #B3B3B3;
background-color: transparent;
outline: none;
}
<div class="row container">
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="1" />
<span class="cb-text">Dev Team</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="2" />
<span class="cb-text">Product Manager</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="3" />
<span class="cb-text">Security / SecOps</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="4" />
<span class="cb-text">DevOps / CI/CD</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="5" />
<span class="cb-text">Legal</span>
</div>
<div class="row cb-container">
<input type="checkbox" class="cb-element" value="6" />
<input type="text" class="cb-text other-text" placeholder="Other..." />
</div>
</div>
Codepen example here.
Useful links:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://getbootstrap.com/docs/4.0/layout/grid/
I'm attempting to create a similar UI as below using radio inputs. Most of the UI was fairly easy to recreate, the only exception is adding the arrow (icon?) to the end of the label div. I've attempted to div an arrow in and force it to the center using margins, but it's obviously not a very good solution. What's the best way to add the arrow at the end of the label?
Here's the current code
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1"><h3>Option 1</h3>
<p>Short Description of Option 1</p></label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2"><h3>Option 2</h3>
<p>Short Description of Option 2</p></label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3"><h3>Option 3</h3>
<p>Short Description of Option 3</p></label><br>
</form>
</div>
JSFiddle
EDIT:
I'm aware the JSFiddle doesn't apply the background correctly. The code does operate fine on production.
I've created a wrapper of class .list for each radio item to bind the data.
<div id='results'>
<form>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option 1</h3>
<p class="d-inline">Short Description of Option 1</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option2</h3>
<p class="d-inline">Short Description of Option 2</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
</form>
</div>
CSS code here
.list{
display: flex;
align-items:center;
}
.mb-1{
margin-bottom: 8px;
}
.radio-content{
width:100%;
display:flex;
align-items:center;
justify-content: space-between;
}
Instead of "<" you can use the appropriate icon with the appropriate spacing
label {
background-color: #16a085;
background: linear-gradient(to right, #16a085, #66a99c);
width: 80%;
padding-left: 15px;
padding-top: 10px;
margin-bottom: 3px;
}
form > label > h3 {
margin-bottom: 1px;
}
form > label > p {
margin-top: 1px;
}
form > label h3::after {
content: '\276E';
position: absolute;
right: 0;
padding-right: 20px;
}
input[type=radio] {
display: none;
}
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1">
<h3>Option 1</h3>
<p>Short Description of Option 1</p>
</label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2">
<h3>Option 2</h3>
<p>Short Description of Option 2</p>
</label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3">
<h3>Option 3</h3>
<p>Short Description of Option 3</p>
</label><br>
</form>
</div>
So flexbox is awesome for layouts like these. It performs well and has great browser support (http://caniuse.com/#search=flexbox). IE has some issues but should be able to work around.
ul {
list-style: none;
width: 400px;
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
ul li {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
ul li:last-child {
border-bottom: none;
}
.title {
flex-grow: 1;
padding-top: 4px;
}
.title h3 {
margin: 0;
}
.title p {
font-size: 9px;
color: #aaa;
margin: 1px 0 0 0;
}
.icon {
padding-left: 10px;
width: 40px;
line-height: 50px;
display: inline-block;
}
.toggle-switch {
line-height: 50px;
width: 50px;
display: inline-block;
text-align: center;
}
<ul>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Stops</h3>
<p>Non stop, 1 stop, 2+ stops</p>
</div>
<span class="toggle-switch">^</span>
</li>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Duration</h3>
<p>Any</p>
</div>
<span class="toggle-switch">^</span>
</li>
</ul>
Trying to Extend the red line to the end of the coloured div. but if i make the width 100% it pushed the input tag to below the text, is there a way of doing this without individual width properties
#contact-heading{
color: #838386;
font-weight: bold;
}
.contactForm{
background-color: #b7dcd8;
margin-right: 30%;
padding: 2% 0 0 2%;
font-family: Serif;
font-size: 12pt;
}
.formtitle{
border: none;
}
.forminput{
border: none;
border-bottom: 2px solid red;
background-color: #b7dcd8;
}
<div class="contact-main">
<div class="container">
<h1 id="contact-heading">CONTACT US</h1>
</div>
<div class="container">
<form class="contactForm">
<p class="formtitle">FIRST NAME:<input class="forminput"></p> <br>
<p class="formtitle">YOUR EMAIL: <input class="forminput"></p> <br>
<p class="formtitle">CONFIRM EMAIL: <input class="forminput"></p> <br>
<p class="formtitle">CONTACT NUMBER: <input class="forminput"></p> <br>
<p class="formtitle">SUBJECT: <input class="forminput"> <br></p>
<br>
YOUR QUERY:<br>
<textarea cols="50" rows="7"></textarea>
<br>
<br>
<input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
<br>
<input type="reset">
<input type="submit">
</form>
</div>
</div>
Use a positioned pseudo-element on the paragraph
#contact-heading {
color: #838386;
font-weight: bold;
}
.contactForm {
background-color: #b7dcd8;
margin-right: 30%;
padding: 2% 0 0 2%;
font-family: Serif;
font-size: 12pt;
}
.formtitle {
border: none;
position: relative;
overflow: hidden;
/* required */
}
.formtitle::after {
content: '';
width: 100vw;
height: 0px;
border-bottom:2px solid red;
position: absolute;
bottom:1px;
}
.forminput {
border: none;
border-bottom: 2px solid red;
background-color: #b7dcd8;
}
<div class="contact-main">
<div class="container">
<h1 id="contact-heading">CONTACT US</h1>
</div>
<div class="container">
<form class="contactForm">
<p class="formtitle">FIRST NAME:
<input class="forminput">
</p>
<br>
<p class="formtitle">YOUR EMAIL:
<input class="forminput">
</p>
<br>
<p class="formtitle">CONFIRM EMAIL:
<input class="forminput">
</p>
<br>
<p class="formtitle">CONTACT NUMBER:
<input class="forminput">
</p>
<br>
<p class="formtitle">SUBJECT:
<input class="forminput">
<br>
</p>
<br>YOUR QUERY:
<br>
<textarea cols="50" rows="7"></textarea>
<br>
<br>
<input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
<br>
<input type="reset">
<input type="submit">
</form>
</div>
</div>
It's better to have Label element for inputs.
If you want your input also be 100%, not only border, you may use display:table
#contact-heading{
color: #838386;
font-weight: bold;
}
.contactForm{
background-color: #b7dcd8;
margin-right: 30%;
padding: 2% 0 0 2%;
font-family: Serif;
font-size: 12pt;
}
.formtitle{
border: none;
}
.forminput{
border: none;
border-bottom: 2px solid red;
background-color: #b7dcd8;
display: table-cell;
width: 100%;
}
.formtitle {
display: table;
width: 100%;
}
.label-text {
display: table-cell;
width: 10%;
white-space: nowrap;
}
<div class="contact-main">
<div class="container">
<h1 id="contact-heading">CONTACT US</h1>
</div>
<div class="container">
<form class="contactForm">
<p class="formtitle">
<label class="formtitle">
<span class="label-text">YOUR EMAIL:</span>
<input class="forminput">
</label>
<label class="formtitle">
<span class="label-text">CONFIRM EMAIL</span>
<input class="forminput">
</label>
<label class="formtitle">
<span class="label-text">SUBJECT:</span>
<input class="forminput">
</label>
YOUR QUERY:<br>
<textarea cols="50" rows="7"></textarea>
<br>
<br>
<input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
<br>
<input type="reset">
<input type="submit">
</form>
</div>
</div>
I grabbed a simple tab control from the css tricks site and its working great for me, except when I have two tab controls on the same page, clicking the bottom control simply changes the tab page of the top control.
The CSS Tricks page with the original code is here
Changing the name= attribute for the second group doesn't fix it.
Renaming the id's of each tab in the second group also doesn't fit it.
Is there a way to have two independently operating tabs on the same page ?
FWIW the HTML and CSS are fairly simple:
.tabs {
position: relative;
min-height: 100px;
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff3
</div>
</div>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff4
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff5
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff6
</div>
</div>
</div>
The part to change is the label and the id:
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
I've edited your snippet.
.tabs {
position: relative;
min-height: 100px;
clear: both;
margin: 25px 0;
}
.tabs .tab {
float: left;
}
.tabs .tab label {
background: #eee;
padding: 5px 15px 5px 15px;
border: 1px solid #ccc;
position: relative;
left: 1px;
cursor: pointer;
}
.tabs .tab [type=radio] {
display: none;
}
.tabs .content {
position: absolute;
top: 18px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow:auto;
}
.tabs [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tabs [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff3
</div>
</div>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1" checked>
<label for="tab-4">Tab One</label>
<div class="content">
stuff4
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">Tab Two</label>
<div class="content">
stuff5
</div>
</div>
<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">Tab Three</label>
<div class="content">
stuff6
</div>
</div>
</div>