sontek sontek - 3 months ago 25
CSS Question

Pure CSS dropdown with dynamic sizing?

I've created the following pure CSS drodpown menu:

http://codepen.io/sontek/pen/akPaWK



@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
margin-top: 15px;
}

.dropdown {
display: block;
position: relative;
width: 200px;
}
.small {
width: 50px;
}
.right {
float: right;
}

.dropdown input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}

.dropdown label {
display: block;
cursor: pointer;
background-color: #FFF;
padding: 7px;
border: solid 1px;
}

.dropdown label a {
text-decoration: none;
color: #555;
}

.dropdown label:after {
font-family: 'FontAwesome';
padding-left: 10px;
content: '\F0D7';
}

.dropdown ul {
position: absolute;
top: 100%;
background-color: #FFF;
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;

display: none;
margin-top: 0px;
padding: 0px;
width: 99%;
list-style: none;
}

.dropdown ul a {
display: block;
padding: 5px;
text-decoration: none;
}

.dropdown ul a:hover {
background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
display: block;
}

<div class="dropdown small right">
<input id="toggle2" type="checkbox" />
<label for="toggle2">(S)</label>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>

<div class="dropdown">
<input id="toggle" type="checkbox">
<label for="toggle">sontek@gmail.com</label>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div>
Hello there, How are you?
</div>





The menu on the left works properly because its the same size as the menu, but the one floated on the right has two problems:


  • The label is short so the menu doesn't display properly.

  • Once its a longer with I need to make sure it doesn't go off the screen, its right side shouldn't go past the right side of the screen.



Is there an easy way to make the UL expand to its content but not go off the screen?

I'm not tied to any of this HTML/CSS... Anything that works is good for me.

Answer

first:

li {
white-space: nowrap;
}

second:

.right ul {
  right: 0;
  width: auto;
  min-width: 100%;
}

third:

.dropdown ul {
  width: auto;
  min-width: 100%;
  box-sizing: border-box;
}

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-top: 15px;
}

.dropdown {
  display: block;
  position: relative;
  width: 200px;
}
.small {
  width: 50px;
}
.right {
  float: right;
}

.dropdown input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.dropdown label {
  display: block;
  cursor: pointer;
  background-color: #FFF;
  padding: 7px;
  border: solid 1px;
}

.dropdown label a {
  text-decoration: none;
  color: #555;
}

.dropdown label:after {
  font-family: 'FontAwesome';
  padding-left: 10px;
  content: '\F0D7';
}

.dropdown ul {
  position: absolute;
  top: 100%;
  background-color: #FFF;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  
  display: none;
  margin-top: 0px;
  padding: 0px;
  width: auto;
  min-width: 100%;
  box-sizing: border-box;
  list-style: none;
}

.right ul {
  right: 0;
  margin-top: -1px; /* border compensation */
  border-top: 1px solid;
}

.dropdown ul a {
  display: block;
  padding: 5px;
  text-decoration: none;
  white-space: nowrap
}

.dropdown ul a:hover {   
    background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
  display: block;
}
<div class="dropdown small right">
  <input id="toggle2" type="checkbox" />
  <label for="toggle2">(S)</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

<div class="dropdown">
  <input id="toggle" type="checkbox">
  <label for="toggle">sontek@gmail.com</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>
<div>
  Hello there, How are you?
</div>