Style select text overflow - html

Question

Trying to figure out a problem with a styled select box. It is wrapped within a div with a background to create a mask-look to it.
When there is too much text in the input it will overflow into the button.
HTML:
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option style="" value="">Please Select Address</option>
</select>
</div>
CSS:
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 50px;
border-radius: 10px;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
Can anyone solve this?

Answer 1

The problem is, that you are using padding-right: 10%; in your css on the select itself. Measuring the image - the select is approx 270px wide, making 10% of the width only 27px - which is correct by my measures.
To solve this - the background-image for arrow seems to be 60px wide, so use padding-right: 78px; (that is 60px for the background image's width and 18px to respect the padding in mobile media query you've previously set).

Answer 2

See this Fiddle
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border: 1px solid #0082ff; /* Just to see the area of the form in white bg */
border-radius: 10px;
-webkit-appearance: none;
padding-right: 55px;
box-sizing: border-box;
}
.styled-select {
width: 200px;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 50px;
height: 50px;
border-radius: 10px;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
<div class="styled-select">
<select class="form-control required" name="address">
<option style="" value="">Please Select Address</option>
<option style="" value="">Please Select Address2</option>
<option style="" value="">Please Select Address3</option>
</select>
</div>

Answer 3

without seeing any of your code, it is a bit hard to tell how you're setting up the HTML to be structured. But one thing you could do is fudge it. Make it appear as if thats what is happening. Assuming your dropdown arrow is a separate element from your select item you could give it some of the following code. (.select button is the class i gave to your button on the dropdown)
.selectButton {
display: block;
position: absolute;
height: 100%;
width: 20%;
max-width: 40px;
background: blue;
z-index: 12;
right: 0;
top: 0;
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
}
basically what this does is put it in front of the input text element and then the box shadow does the trick of gradually covering up the additional text.
If you need to fudge it without altering the original element, create a parent wrapper with a div or something within the it and have the select element be a sibling then give it a style of pointer-events: none; in order to prevent it from being clicked on but will still have the appearance that you want.
Some people may say this is bad practice, but given the situation this is about the best thing you can do. very easy, very light and more functional than many of the options provided.
Holler if you have any questions!
Good Luck buddy!
after comment
try this css per info from comment. It'd be best to create a psuedo element with a background color, bg image and a box shadow on it with a z-index that is higher than the select to create a fake button that will still be make the select clickable.
.styled-select {
/*have this create the size of the select*/
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: 80% 80%;
background-size: 80% 80%;
height: 50px;
position: relative;
}
.style-select::before {
content: '';
display: block;
position: absolute;
right: 0;
background-color: $blue;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 100%;
background: url(../images/bg/down-arrow.jpg);
/* ^^^^ use this as just the white arrow png ^^^ */
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
pointer-events: none;
}

Answer 4

Hello there:
This is my solution, you shall take in a variable, which will be the BG-size of the 'down-arrow'. In this case 60px, so here is it:
.styled-select select{
width: calc( 100% - 60px / 2); //before was width: 100%;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
width:100%; //remove it, only one in the mobile first declarationis needed
}
}
Keep all the other CSS same, only changed the above mention ones. HOPE THIS HELPS

Answer 5

You are using a percentage value (10%) for the padding-right of the select element in 2 different places. However, for the background-size property of the .styled-select element you are using a fixed pixel value (60px).
This means that when the .styled-select element is exactly 600px wide, the text of the child select element will be clipped at the point the background-image begins - any bigger and you will start to see white space appear between the text and image, any smaller and the text will start to overlap the image.
So, to solve this, you should change the padding-right to a fixed pixel value equal to the background-size value plus a few extra pixels so the text doesn't run right up to the background-image.
I've also taken the liberty of cleaning up your CSS a bit; you don't need to redeclare all styles within a media query, only those you wish to override or change.
.styled-select{
background:#fff linear-gradient(0deg,#00f,#00f) right / 60px repeat-y;
/** DELETE LINE ABOVE AND UNCOMMENT LINE BELOW **/
/* background:#fff url(../images/bg/down-arrow.jpg) right center / 60px no-repeat;*/
border-radius:10px;
height:50px;
overflow:hidden;
width:100%;
}
.styled-select select{
-webkit-appearance:none;
background:transparent;
border:0;
border-radius:10px;
font-family:Circular,Helvetica,Arial,sans-serif;
font-size:16px;
height:50px;
line-height:1;
padding:15px 75px 15px 15px;
width:100%;
}
#media (min-width:768px){
.styled-select{
height:55px;
}
.styled-select select{
font-size:18px;
height:55px;
line-height:1;
padding-right:78px;
}
}
body{
background:#003;
}
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option value="">Please Select Address</option>
</select>
</div>

Answer 6

Try this:
.styled-select select {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}