CODEWITHSUNDEEP
htmlcss
Rotan075
Rotan075

Reputation: 2615

Browser zoom is causing weird behavior select box

I got a question regarding browser zoom and my select box. I have created a custom select box with the current HTML and CSS code (JSFIDDLE):

.custom-select {
  position: relative;
  width: 100px;
  display: inline-block;
}
.custom-select select {
  width: 100%;
  padding: 8px 5px 8px 10px;
  height: 36px;
  border: 1px solid #cacaca;
  color: #0085c8;
}
.custom-select.svg > svg.dropdown-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background-color: #fff;
  background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  border: 1px solid #cacaca;
  color: #0085c8;
  display: inline-block;
}
<div class="custom-select svg">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="Volkswagon Polo">Volkswagon Polo</option>
  </select>
  <svg class="dropdown-button"></svg>
</div>

Whenever you scale down your browser to for example 75% I get the following situation: enter image description here

Where the word POLO is cutoff. What am I doing wrong? This should not be zooming sensitive right? Can you set CSS styling to specific zoom levels?

--EDIT Increasing the width is not an option due to the fact that the select is been placed inside a div with a maximum width of 150px

Upvotes: 0

Views: 1031

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You can try with giving auto width to your custom select box.

.custom-select
{
    position: relative;
    width:100px;
    display:inline-block;
    overflow:hidden
}
.custom-select select{
	width:auto;
	padding: 8px 5px 8px 10px;	
	height:36px;
	border: 1px solid #cacaca;
	color: #0085c8;		 
}
.custom-select.svg > svg.dropdown-button
{
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background-color: #fff;
    background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png);
    background-repeat:no-repeat;
    background-position:center;
    pointer-events: none;
	  border: 1px solid #cacaca;
	  color: #0085c8;
	  display:inline-block;	
}
<div class="custom-select svg">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="Volkswagon Polo">Volkswagon Polo</option>
  </select>
  <svg class="dropdown-button"></svg>
</div>

Upvotes: 2

Related Questions