Could anyone give new ideas how to realize the following? If it generally possible).
The content of Left panel will be changed dynamically with Angular. So, we can have several items or, for example, 50 items on the panel. In accordance with that, the height of panel will be shorter or overflow hidden will be displayed.
Here is fiddle draft https://jsfiddle.net/b9on9gup/7/
First of all the div class="filter-title" should fill 100% height.
The second, title container shouldn't be in scrolling area. Scroll should be inside div class="radio-container". You could add class .shown on
div class="main-container" to display bottom panel.
Additional condition is good displaying with and without scroll (different quantity of items, different screen resolutions etc).
in fiddle I was trying different ways, so some css properties can be odd.
<body>
<div class = "main-container">
<div class="left-panel">
<div class="filter-container">
<div class="table">
<div class="table-row">
<div class="radio-container">
<div class="overflow">
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
</div>
</div>
<div class="filter-title">
<span>
Filter title
</span>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-panel"></div>
</div>
</body>
html, body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
}
.main-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
.left-panel {
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #fff;
position: absolute;
transition: bottom 0.5s ease;
.filter-container {
position: absolute;
background: #F6F6F6;
top: 50%;
transform: translateY(-50%);
width: 100%;
.table {
display: table;
width: 100%;
.table-row {
display: table-row;
height: 100%;
.radio-container {
display: table-cell;
padding: 25px 25px;
display: table-cell;
vertical-align: middle;
.overflow {
overflow-y: scroll;
max-height: 100%;
}
}
}
.filter-title {
display: table-cell;
width: 20px;
background: #539ACC;
vertical-align: middle;
span {
-webkit-writing-mode: vertical-lr;
white-space: nowrap;
}
}
}
}
}
.bottom-panel {
height: 200px;
position: absolute;
bottom: -200px;
background: #F6F6F1;
width: 80%;
left: 0;
right: 0;
margin: auto;
transition: bottom 0.5s ease;
}
&.shown {
.left-panel {
bottom: 200px;
}
.bottom-panel {
bottom: 0;
}
}
}
UPDATE
It's a simple piece of javascript that you can edit to better fill your needs...
it changes the title height if necessary (it actually changes the element's width since the it's rotated 90deg)
var ftitle = document.querySelector('.filter-title');
var radiocont = document.querySelector('.radio-container');
var w = ftitle.clientWidth;
var h = radiocont.clientHeight;
if (h > w) { ftitle.style.width = h + 'px';}
.left-panel {
position: relative;
width: 150px;
}
/*
.radio-container {
height: 100px;
overflow: auto;
}
*/
.radio-container label {
display: block;
}
.filter-title {
background: #ddd;
text-align: center;
position: absolute;
top: 0; left: 0;
transform: translateX(170px) rotate(90deg);
transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class = "main-container">
<div class="left-panel">
<div class="radio-container">
<label>
<input type="radio" name="filterFieldsForm"/>
radio button1
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button2
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button3
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button4
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button5
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button6
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button7
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button8
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button9
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button10
</label>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button11
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button12
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button13
</label>
<label>
<input type="radio" name="filterFieldsForm" />
radio button14
</label>
</div>
<div class="filter-title">
<span>Filter title</span>
</div>
</div>
</div>
</body>
</html>
http://jsbin.com/wiyuhu/edit?css,js,output
The best decision I've found in my case is using max-height for div class= "overflow" and media-queries min-height.
I noticed scroll is displayed if to set max-height for div class= "overflow". But max-height should be at least in 'px', not in '%'.
Also max-height should be different for different resolutions. I set some breakpoints for max-height using media queries. Something like this:
#media(min-height:520px) {
max-height: 170px;
}
#media(min-height:600px) {
max-height: 250px;
}
#media(min-height:768px) {
max-height: 400px;
}
#media(min-height:900px) {
max-height: 500px;
}
.....
It allows me having panel's height shorter than browser view's height in any resolutions and having or not having scroll inside panel (depends on quantity of items)
The same approach is applied to filter title + text-overflow
Here is video - http://take.ms/WBDcy
and here is code - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview
When I was writing this post I've understood that using of max-height: 80vh maybe was even better than media queries. It should be tested.
Related
I am trying to align my form contents so that each label falls on a separate line and the input content within the label falls in separate lines after the label element. Please help. I included an image link and my code in this question.
I would like my label to be displayed above the input elements, the input elements to have centered content (for example: radio type inputs to be aligned perfectly centered with their relative text description. If I have "male" as an option for a radio, I would like the input button itself to be aligned centered and even with the words "male").
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: block;
}
div {
display: block;
}
.form-group {
margin: 0 auto;
}
.container {
max-width: 600px;
margin: auto;
}
form {
height: 100%;
width: 100%;
display: block;
}
label {
padding: 0.25rem;
display: flex;
width: 100%;
}
input[type="radio"],
label {
align-items: center;
}
input {
width: 100%;
display: block;
}
<body>
<div class="container" style="text-align: center;">
<h1 id="title">Studentas Survey Form</h1>
<p id="description">Thank you for taking time to complete this survey</p>
</div>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label">Enter your name
<input type="text" id="name" placeholder="Enter your name" required></input>
</label>
<label id="email-label">Enter your Email
<input type="email" id="email" placeholder="Enter your email" required></input>
</label>
<label id="number-label">Enter your age
<input type="number" id="number" min="1" max="99" placeholder="Age" required></input>
</label>
<label>Favorite subject?
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">History</option>
<option value="2">Math</option>
<option value="3">Science</option>
<option value="4">English</option>
</select>
<label>
<label>What is your gender?
<input type="radio" name="gender" required>Male</label>
<input type="radio" name="gender" required>Female</label>
</label>
<label>What do you like about school?
<input type="checkbox" value="lunch" required>Lunch Time</input>
<input type="checkbox" value="social" required>Social Interaction</input>
<input type="checkbox" value="work" required>Course Work</input>
<input type="checkbox" value="home" required>Going Home</input>
</label>
<label>What are your thoughts on this survey?
<textarea></textarea>
</label>
<input type="submit"></input>
</div>
</form>
</div>
</body>
Check this out!
.Your-choosen-label
{
display:flex;
justify-content:space-evenly;
align-items:center;
flex-direction:column;
}
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
Basically, I am trying to create my own radio button component for react and reuse over again, but I am struggling to get the buttons to work correctly with the styling. If you select a button in the second set it doesn't react properly even though each set has a different name property. If I get rid of the custom style it works fine.
I think it has something to do with this, but haven't found a solution:
.radio-custom {
opacity: 0;
position: absolute;
}
Here is my codepen:
https://codepen.io/Sbphillips19/pen/XLyzzN
HTML:
<form>
<h2>Radio Button Prompt 1</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
<h2>Radio Button Prompt 2</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
</div>
</form>
and CSS:
.radio-custom {
opacity: 0;
position: absolute;
}
.radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.radio-custom + .radio-custom-label:before {
content: '';
background: white;
border: 2px solid #888888;
display: inline-block;
vertical-align: middle;
width: 44px;
height: 44px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
background: #444444;
box-shadow: inset 0px 0px 0px 6px #fff;
}
The problem is with the attr id that should be unique!
Change the following second part of the html to this and it will work:
Working example:https://codepen.io/jo-o-teixeira-the-sasster/pen/agQErM
Radio Button Prompt 2
<div>
<input id="radio-4" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-4" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-5" class="radio-custom"name="radio-group-2" type="radio">
<label for="radio-5" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-6" class="radio-custom" name="radio-group-2" type="radio">
<label for="radio-6" class="radio-custom-label">Third Choice</label>
</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 using the following mark up and styles (Bootstrap). It shows my checkbox but it is paralysed, that is, it cannot be checked. here is my mark up:
I want something more Bootstrap-ish. I know there are other options to make the checkbox look fancy but that do not solve the problem.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
</div>
</div>
Here is how it looks.
What exactly is the issue?
If I put the input element inside label I get this ugly thing:
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
The problem is with your label. The for attribute must match with the name attribute of your label
Looks need to tweak bootstrap styling for custom checkbox.
Check this
HTML
<div class="form-group">
<div class="checkbox">
<label for="check">
<input type="checkbox" id="check"/>
<span class="fake-input"></span>
<span class="fake-label">Option 2</span>
</label>
</div>
</div
CSS
.fake-input {
float: left;
width: 20px;
height: 20px;
border: 1px solid #9f9f9f;
background: #fff;
vertical-align: middle;
position: relative;
margin-right: 10px;
border-radius: 4px;
}
input[type="checkbox"] {
position: fixed;
top: -9999px;
left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
content:"\2713";
position: absolute;
color: #000;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Check in Fiddle
Reading around it looks like you have to style the checked version and the unchecked version.
input[type=checkbox]:checked {
}
Styling with this tag should solve your problems.
Use "for" attribute to solve this issue.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label for="chk2" class="checkbox-label">Option 2</label>
</div>
</div>
<div class="col-md-3">
<input class="form-check-input" type="checkbox" id="" asp-for="">
<label class="form-check-label" for="" asp-for="">
</label>
</div>
It's not due to Bootstrap but to Wordpress. The checkboxes became visible after I added "display:block;" to the css of the checkbox input tag.
<input class="form-check-input" type="checkbox" id="">
input.form-check-input {
display:block;
}