I want to arrange div below each other but lower div should be moved to right. so i am expecting output like this
Right now i have made it to work by using below code
<div id="div1" class="checkbox">
<label>
<input type="checkbox" id="chk1" data-bind="checked: data1" />
<span>DIV 1</span>
</label>
</div>
<div id="div2" class="checkbox" style="text-align: center;width: 370px">
<label>
<input type="checkbox" id="chk2" data-bind="checked: data2" />
<span>div2</span>
</label>
</div>
so basically i reduced width of div2 and aligned text to center but i dont think thats good way to do it. Any other better way?
If there's only going to be two divs that need to be spaced apart; you can use one of the following inside your HTML markup.
- Adds a single space
- Adds 2 spaces
- Adds 4 spaces
<div id="div1" class="checkbox">
<label>
<input type="checkbox" id="chk1" data-bind="checked: data1" />
<span>DIV 1</span>
</label>
</div>
<div id="div2" class="checkbox">
<label>
<input type="checkbox" id="chk2" data-bind="checked: data2" />
<span>DIV 2</span>
</label>
</div>
.container {
display: flex;
flex-direction: column;
width: 200px
}
#div1 {
height: 20px;
width: 150px;
border: 1px solid;
}
#div2 {
height: 20px;
width: 150px;
border: 1px solid;
align-self: flex-end;
}
<div class="container">
<div id="div1" class="checkbox">
<label>
<span>DIV 1</span>
</label>
</div>
<div id="div2" class="checkbox" >
<label>
<span>div2</span>
</label>
</div>
</div>
Related
how can I align the labels & inputs to the right
like that all of then appear in the same line
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<br>
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<br>
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<br>
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
To have them in the same line, I would start by removing <br /> from your code. Then set the css for input and label to be inline-block, something like:
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
label, input { display: inline-block; }
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
To make all inputs inline, just remove all the <br /> tags.
Example:
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes">
<small></small>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/jOMeqex
I understood your Question that you want them still below each other but aligned to the right side. So i made a solution using flexbox instead of the hard breaks. I commented the Code where i made changes and why, html and css.
Basically i used a colum and put each item-combination (label and checkbox)in a new row-div.
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
/*make item a flexbox-container*/
display: flex;
/*combination of flex-direction and flex-wrap*/
flex-flow: column wrap;
}
.row{
/*make item a flexboc container*/
display: flex;
/*flex-flow: row nowrap; this is the default value of flex, which is why you dont need it,
just wanted to leave it in as a comment so you know whats happening*/
/*Align the contents on the end of each row*/
justify-content: flex-end;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<!--removed the hard breaks and added row-divs around each item combination-->
<div class="row">
<label class="title" for="">fav food</label>
</div>
<div class="row">
<label for="burger">burger</label>
<input type="checkbox" id="burger">
</div>
<div class="row">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
</div>
<div class="row">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
</div>
<div class="row">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
</div>
<small></small>
</div>
This question already has answers here:
What has bigger priority: opacity or z-index in browsers?
(8 answers)
Stacking order of elements affected by opacity
(2 answers)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
I just found a very strange HTML behaviour: a checkbox normally hidden behind another element (like a div) becomes visible if its opacity or the opacity of its container is set below 1.
Here is the basic setup, we have a set of checkboxes behind a grey div:
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>
As expected, you cannot see the checkboxes. But if we change their opacity or the opacity of their containers, they do become visible:
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>
Of course we can avoid this by setting the z-index of the grey div:
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
z-index: 10;
}
<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>
Therefore, the solution is obvious, but nevertheless I still have a question: why did that happen in the first place? What's the reason for the difference between the first and second snippets?
By the way, as I mentioned in the first paragraph, it's worth mentioning that the checkbox keeps hidden if the opacity is set to 1:
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 1">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 1">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>
This is caused because opacity causes a new stacking context. This can also happen with the following CSS properties:
opacity
CSS Transforms
Filters
CSS Regions
Paged Media
Rule 8.2: All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tooltip"></div><!-- own stack context and above the other elements -->
<div class="checkboxes">
<div class="checkbox" style="opacity:0.5"><!-- own stack context and later on the painting order than position -->
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
</div>
</div>
To understand what happened I have to simplify your example much more :
.checkbox{
opacity: 0.5;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}
<div class="tooltip"></div>
<div class="checkbox">
<span>Foo</span>
</div>
Now it looks not related to checkbox any more. It just how position elements works :
according to your document flow The .checkbox element comes after .checkbox what means a higher position for .checkbox
why? because you didn't set z-index property for .tooltip what means z-index still auto . and the value of auto does not establish a new local stacking context
see the MDN about z-index auto here
so to resolve this whiteout using z-index :
you need to move the div you want to be at the top at the end and use top:0
.checkbox{
opacity: 0.5;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
top:0;
}
<div class="checkbox">
<span>Foo</span>
</div>
<div class="tooltip"></div>
or using z-index as you mentioned with positive value to create a new local stacking context
Here is my code:
<div class="checkbox">
<input id="230am" type="checkbox" onclick="openPopup()"> <label for="230am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
<div class="checkbox">
<input id="3am" type="checkbox"> <label for="3am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
Below are my css:
#popupBk{
position: absolute;
width: 25%;
height: 20%;
border: 2px solid grey;
border-radius: 2px;
background-color: white;
margin-left: 3%;
box-shadow: 2px 2px 10px;
display: none;
}
So I am trying to do a calendar app. I put two popup in two checkboxes just want to do that different popup will display under each checkbox once I click. Any ideas how to do this?
i think there is a way to make each class name differently and then create its own css, but if that it might needs a huge work. Or is there any other way?
Thanks.
You can use the :checked state of checkboxes in CSS, coupled with the general sibling selector (~) to do this.
Read about sibling selectors here: https://css-tricks.com/child-and-sibling-selectors/
Here's a live example:
.wrapper {
float: left;
}
.hidden {
border: 1px solid #000;
display: none;
}
input[type="checkbox"]:checked ~ .hidden {
display: block;
}
<div class="wrapper">
<input type="checkbox" id="box1" /> <label for="box1">Show Box 1</label>
<div class="hidden">Box 1</div>
</div>
<div class="wrapper">
<input type="checkbox" id="box2" /> <label for="box2">Show Box 2</label>
<div class="hidden">Box 2</div>
</div>
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm coming from an iOS background and having trouble laying out elements in HTML and using CSS. I want to create something as "simple" as this:
I want to be able to split the screen in separate divs but have all the fieldsets align with each other. (They are fieldsets but I didn't draw them in my primitive mockup. I also didn't put anything in the third box but there's more stuff in there).
But here are some of my questions:
Box 1 questions:
I basically have style="display:block;" in all my elements. If I have an overarching div as style=display:block, I don't get the same effect. Is there a better way to do that?
Box 2 general question:
I ended up hardcoding all my styles to sort of achieve the image shown. It doesn't seem very usable or scalable. Any general principals I should start with?
<div style="display:inline-block; vertical-align:top; float:left; width:25%">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div style="display:inline-block; vertical-align:top; width:33%">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>
Your title says it all, don't use inline styles or it will quickly become a mess. Create an external stylesheet to hold all CSS, and style groups of elements targeted with CSS selectors.
Start by simplifying the structure. You have three columns, so three divs. It's a good idea to wrap them too:
<div id="wrapper">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
So you want them side-by-side. Floating them or using inline-block elements are two common techniques to achieve that. You tried to use both at the same time, choose one. I'll give an example for floating:
#wrapper { overflow: hidden; } /* clear the floats at the end,
so the wrapper extends down */
#col1, #col2, #col3 { float: left; }
#col1 { width: 25%; }
#col2 { width: 33%; }
You also don't need a div wrapping every field, and you don't have to manually make divs block (they are blocks by default, and fieldsets are too). Use labels and make them blocks too:
<fieldset>
<legend>First fieldset</legend>
<label for="fld1">field 1</label>
<input id="fld1" type="text">
<label for="fld2">field 2</label>
<select id="fld2">
<option>field 2 options</option>
</select>
<label for="fld3">field 3</label>
<input id="fld3" type="text">
</fieldset>
And make them all blocks:
label, input, select { display: block; }
I hope this gives you a general idea you can apply to the other columns.
This is exactly what CSS classes are for : http://www.w3schools.com/css/css_id_class.asp
For starters here are classes for your left and right sections:
.left {
display:inline-block;
vertical-align:top;
float:left;
width:25%;
}
.right {
display:inline-block;
vertical-align:top;
width:33%;
}
In use: http://jsfiddle.net/basarat/BM6Fp/#base
<div class="left">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div class="right">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>