I am trying to place some radio buttons over an image at an exact location. I have placed both in a Div but I am not sure what to do next. Here is where I want the radio buttons to be placed (red circles):
Here is my code so far:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
<div class="general">
<img src="https://via.placeholder.com/300" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
Thank you so much in advance!
I would put the radio buttons in one div each and then give the div a background. Like this:
<html>
<head>
<style>
.general{}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.radio-size {
height: 100px;
width: 100px;
}
.bg-apple {
background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-chicken {
background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-carrot {
background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#979797">
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
<form action="" style="background-img:url("")">
<div class="radio-size bg-apple">
<input type="radio" name="answer 1" value="apple">
</div>
<div class="radio-size bg-chicken">
<input type="radio" name="answer 1" value="chicken"> <br>
</div>
<div class="radio-size bg-carrot">
<input type="radio" name="answer 1" value="carrot">
</div>
</form>
</div>
</body>
</html>
note: The radio-buttons are all supposed to have the same "name" atribute, so that you can only choose one of them. If you want to be able to select multiple options, you should use checkbox instead.
Even though you say you want them over your image, in the picture you shared the radio buttons appear to be on the right side of the image. So i am a bit confused about what you actually want.
But i made a simple example below. You can position them how you like or comment below if you want my help.
P.S. as i said in my comment : The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
form {
position:absolute;
right: 25%;
top: 50%;
transform:translateY(-50%) translateX(100%);
display: flex;
flex-direction: column;
}
.general {
position: relative;
}
<div class="general">
<img src="http://via.placeholder.com/640x360" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
You can use the following solution using flexbox:
body {
background:#979797;
}
.question {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.answers {
display:flex;
flex-direction:column;
}
label.answer {
position:relative;
height:100px;
}
label.answer input[type="radio"] {
top:0;
left:0;
position:absolute;
}
<form action="">
<h2>Question 1:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="carrot">
</label>
</div>
</div>
<h2>Question 2:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="carrot">
</label>
</div>
</div>
</form>
I think you should try the following type of code for the above query. I have changed you HTML structure and have changed your current CSS completely:
.general{
width: fit-content;
}
.img{
display: flex;
align-items: end;
}
img{
border: 1px solid black;
}
body {
background-color: #979797
}
.options{
display: flex;
flex-direction: column;
}
.radio{
position: relative;
height: 50px;
}
input[type="radio"]{
position: absolute;
top: calc(50% - 4px);
right: 0;
margin: 0;
}
<div class="general">
<form action="">
<div class="img">
<img src="https://via.placeholder.com/150" class="center">
<div class="options" class="center">
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="apple">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="chicken">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="carrot">
</div>
</div>
</div>
</form>
</div>
Remember that if the questions only have a single answer then, the name of the radio box should be same and the value should be different. Otherwise, all the radio buttons will get selected simultaneously and cannot be unselected.
I hope this code is helpful.
Thanks.
Related
body {
margin: 0;
padding: 0;
background: #ffffff;
}
.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
display: flex;
}
/*this is where the button is supposed to be but like I'm not sure where it went wrong.*/
.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #fff;
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
//I made the slides here to show that when clicking the bottom would reveal the next picture.
.slides {
width: 500%;
height: 100%;
display: flex;
}
//this part is where the slide would slowly transition to the next picture.
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
width: 100%;
height: 100%;
}
#r1:checked~.s1 {
margin-left: 0;
}
#r2:checked~.s1 {
margin-left: -20%;
}
#r3:checked~.s1 {
margin-left: -40%;
}
#r4:checked~.s1 {
margin-left: -60%;
}
#r5:checked~.s1 {
margin-left: -80%;
}
#r6:checked~.s1 {
margin-left: -100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
Home
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<input type="radio" name="r" id="r6">
<div class="slide s1">
<img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
</div>
<div class="slide">
<img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
</div>
<div class="slide">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5F6N4b4ylX07XIJ7kGiT88pBwBi3sqq-VPw&usqp=CAU" width="200" height="198">
</div>
<div class="slide">
<img src="https://popmenucloud.com/lptemfjr/cd3e12fe-2e4c-4f25-af21-d30dc2c771ed.jpeg" width="320" height="404">
</div>
<div class="slide">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqAnzTuMrG_oISwd5iqGOWQUndvg799wYY3A&usqp=CAU">
</div>
<div class="slide">
<img src="https://eatclub.com.au/wp-content/uploads/2019/06/Gotcha-Tea.jpg" width="377" height="460">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
<label for="r6" class="bar"></label> This part is where the pictures are but I don't think this where the error is.
</div>
</div>
</body>
</html>
So I am trying to make a photo gallery with buttons so that the user can see all 6 photos, but it doesn't even make the photos in a gallery. And it also just places the photos in a line.
I'm really not sure where it went wrong, I am looking at the code and I am really confused about what I did wrong.
I don't understand exactly what you want but I think I see you want to make a gallery system without using JS.
I hope the following is useful for you.
HTML
<div class="slider">
<div id="image1" class="slider-item">
<img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
</div>
<div id="image2" class="slider-item">
<img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
</div>
</div>
<div class="navigation">
Image 1
Image 2
</div>
CSS
.slider-item {
display: none;
}
:target {
display: block;
}
Example here: https://codepen.io/yasgo/pen/vYpvqbj
I have done the same using javascript
Example: https://jsfiddle.net/Karthik471/9dnhcp0e/13/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
Home
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" >
<input type="radio" name="r" id="r2" >
<input type="radio" name="r" id="r3" >
<input type="radio" name="r" id="r4" >
<input type="radio" name="r" id="r5" >
<input type="radio" name="r" id="r6" >
<div class="slide r1">
<img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
</div>
<div class="slide r2">
<img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
</div>
<div class="slide r3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5F6N4b4ylX07XIJ7kGiT88pBwBi3sqq-VPw&usqp=CAU" width="200" height="198">
</div>
<div class="slide r4">
<img src="https://popmenucloud.com/lptemfjr/cd3e12fe-2e4c-4f25-af21-d30dc2c771ed.jpeg" width="320" height="404">
</div>
<div class="slide r5">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqAnzTuMrG_oISwd5iqGOWQUndvg799wYY3A&usqp=CAU">
</div>
<div class="slide r6">
<img src="https://eatclub.com.au/wp-content/uploads/2019/06/Gotcha-Tea.jpg" width="377" height="460">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
<label for="r6" class="bar"></label>
This part is where the pictures are but I don't think this where the error is.
</div>
</div>
</body>
</html>
CSS
.slide{
display:none;
}
JS
let selectElement = document.querySelector('.slides');
let selectElement1 = document.querySelectorAll('.slide');
selectElement.addEventListener('change', (event) => {
/* alert( event.target.id ); */
let selectElement1 = document.querySelectorAll('.slide');
for (element of selectElement1) {
element.style.display = 'none';
}
let value = event.target.id;
let class_selected = document.getElementsByClassName(value);
if (class_selected[0].style.display == "none"){
class_selected[0].style.display = "block"
}
else{
class_selected[0].style.display = "none";
}
});
Hope that the following code is useful for you.
I have used the event listener and based on the radio click event to display the respective images
You need to add your css file
<head>
.
.
<link rel=”stylesheet” type=”text/css” href=”yourfile.css” />
.
.
</head>
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>
i want to make table content look like as shown in pic:-
but i get content alignment issue as shown in my code.
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div>
<div class="wrapper-class">
<span>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</span>
<span>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</span>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
You can change from span tag to div tag, and display Submit button on the right by display flex as
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
<div class="form">
<div class="wrapper-class">
<div>
<input type="radio" value="true" name="abc[status]" id="abc_status_true">
<label for="abc_approve">Approve</label>
</div>
<div>
<input type="radio" value="false" name="abc[status]" id="abc_status_false">
<label for="abc_reject">Reject</label>
</div>
</div>
<div>
<input type="submit">
</div>
</div>
</form>
Goal: I am trying to make a form for users to submit their school schedule
Problem: the first of my input tags will not let me type an input. All the input sections are set up the same accept for their place holder text. they all follow the same pattern and have the same classes applied.
Notes: I know you are able to type in the input field inside of the snippet but it does not work when implemented into my full webpage. Also I'm fairly new to HTML/CSS so excuse the fact that my code is kinda messy. Any constructive criticism is openly accepted.
.form {
width: 680px;
height: 870px;
}
.inputConatiner {
height: 75px;
width: 680px;
display: inline-block;
float: left;
}
.textContainer {
height: 75px;
width: 405px;
display: inline-block;
}
.submitContainer {
width: 100%;
height: 40px;
position: relative;
}
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 50%;
top: 2075%;
margin: 0 0 0 -75px;
}
input[type="text"] {
border: black 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-bottom: 13px;
font-family: "Arial";
}
input[type="radio"] {
height: 30px;
width: 30px;
margin: 0;
vertical-align: middle;
}
input[type="submit"] {
height: 40px;
width: 150px;
border: black 0px solid;
border-radius: 20px;
}
label[for="A"],
label[for="B"] {
display: inline-block;
width: 160px;
font-family: "Arial";
}
fieldset {
border: black 0px solid;
padding: 0px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<div class="form">
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">A Day Lunch</h1>
<input type="radio" id="A" name="lunchADay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchADay" />
<label for="B">Second Lunch</label>
</div>
<div class="inputConatiner">
<h1 class="label">1B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">B Day Lunch</h1>
<input type="radio" id="A" name="lunchBDay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchBDay" />
<label for="B">Second Lunch</label>
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
</div>
You have floated the row elements but not cleared them. As a result, the submit button's container element sits at the top of the page, partially overlapping the rows, even though the button itself has been pushed to the bottom (using absolute positioning).
Instead of doing this, you need to first clear the floated elements using .submitContainer, and center-align the button within it:
.submitContainer {
width: 100%;
height: 40px;
position: relative;
/* CLEAR THE FLOATED ROWS */
clear: both;
/* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */
text-align: center;
}
Next, remove the absolute positioning from the .submit element itself, as well as the negative margin (since it is now being aligned by its container):
.submit {
height: 40px;
width: 150px;
display: inline-block;
/* position: absolute; <- REMOVE THIS */
/* left: 50%; <- REMOVE THIS */
/* top: 2075%; <- REMOVE THIS */
/* margin: 0 0 0 -75px; <- REMOVE THIS */
}
That will allow the submit container and button to sit below the form without having to push it down.
The problem is that your wrapper div for submit button is overlapping the first input. Since you've used float: left in all your inputs, try and contain all of them in one div tag.
Add this to your css
.clearfix::after {
content: "";
clear: both;
display: table;
}
And wrap your inputs like
<form method="post" action="#" name="getStudentInfo">
<div class="clearfix">
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
Let me start by telling that your css and containers work needs more working...
Your first input tag did not let you type since the "submitcontainer" was overlapping the input tags... I removed the submit Container and positioned the submit button slightly... But I implore you to learn some styling and not dependent on absolute positions...
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 30%;
top: 100%;
margin: 0 0 0 -75px;
}
Codepen link: https://codepen.io/anon/pen/MrJGrN
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.