I am making an app in react . So , here , I have the following code :
body{
font-family: 'Raleway', sans-serif;
background:#3E4651;
}
.list-choice{
width:300px;
margin:1em auto;
position: relative;
cursor: pointer;
}
.list-choice input[type="radio"]{
position:absolute;
left:-9999px;
}
.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects input[type="radio"] span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] span:hover {
background:#BBB;
}
.list-choice:hover input[type="radio"]:checked span:hover {
background:#74D68E;
}
.list-choice input[type="radio"]:checked span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked span{
border-radius:0 0 0.2em 0.2em;
}
.list-choice:hover .list-choice-objects {
max-height: 540px;
}<div >
<div >Month</div>
<div >
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
</div>
</div>So , when I run this code, it works well , but , the problem is that some of the options are appearing below , and it can't be reached . So I think so that adding a scroll bar would fix the problem but how do I do that ?
thanks .
CodePudding user response：
You may set a size and overflow to the list-choice.
You may also use position:sticky;top:0;z-index:1; on the list-choice-title element to keep at top.
Example
body{
font-family: 'Raleway', sans-serif;
background:#3E4651;
}
.list-choice{
width:300px;
margin:1em auto;
position: relative;
cursor: pointer;
height:70vh;/* any value you like */
overflow:auto;/* sets scrollbar if content overflows */
}
.list-choice input[type="radio"]{
position:absolute;
left:-9999px;
}
.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
position:sticky;/* stick me */
top:0;/* stick me here */
z-index:1;/* let me be hover others */
box-shadow:0 0 2px;/* whatever to make a little difference */
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects input[type="radio"] span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] span:hover {
background:#BBB;
}
.list-choice:hover input[type="radio"]:checked span:hover {
background:#74D68E;
}
.list-choice input[type="radio"]:checked span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked span{
border-radius:0 0 0.2em 0.2em;
}
.list-choice:hover .list-choice-objects {
max-height: 540px;
}<div >
<div >Month</div>
<div >
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
</div>
</div>CodePudding user response：
I positioned the month as absolute and added a z-index so it always stays at the top and added an overflow:auto to the option content to make it have a scroll bar.
body {
font-family: 'Raleway', sans-serif;
background: #3E4651;
}
.list-choice {
width: 300px;
margin: 1em auto;
position: relative;
cursor: pointer;
}
.list-choice input[type="radio"] {
position: absolute;
left: -9999px;
}
.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
position: absolute;
z-index: 1000;
}
.list-choice:hover .list-choice-title {
border-radius: 0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span {
border-radius: 0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects input[type="radio"] span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] span:hover {
background: #BBB;
}
.list-choice:hover input[type="radio"]:checked span:hover {
background: #74D68E;
}
.list-choice input[type="radio"]:checked span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked span {
border-radius: 0 0 0.2em 0.2em;
}
.list-choice:hover .list-choice-objects {
max-height: 400px;
overflow: auto;
}<div >
<div >Month</div>
<div >
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
<label>
<input
onChange={this.changeUsState}
type="radio"
name="month"
value="Alabama"
/>
<span>Alabama</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Alaska"
type="radio"
name="month"
/>
<span>Alaska</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arizona"
type="radio"
name="month"
/>
<span>Arizona</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Arkansas"
type="radio"
name="month"
/>
<span>Arkansas</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="California"
type="radio"
name="month"
/>
<span>California</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Colorado"
type="radio"
name="month"
/>
<span>Colorado</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Connecticut"
type="radio"
name="month"
/>
<span>Connecticut</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Delaware"
type="radio"
name="month"
/>
<span>Delaware</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Florida"
type="radio"
name="month"
/>
<span>Florida</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Georgia"
type="radio"
name="month"
/>
<span>Georgia</span>
</label>
<label>
<input
onChange={this.changeUsState}
value="Hawaii"
type="radio"
name="month"
/>
<span>Hawaii</span>
</label>
</div>
</div>CodePudding user response：
Created a simple stackblitz please check
https://stackblitz.com/edit/html-basics-ujcmaj?file=style.css