7

When I put select into div with width and padding-left, my options have no border on the right. What is more, it happend only if select have width 118px and parent have 15px of padding left! Someone have idea, what is going on?

My simply code:

<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<div style="width: 1000px; padding-left: 15px;">
    <select style="width: 118px;">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
</div>
</body>
</html>

And result:

enter image description here

Here is a plunker: click

It happend only on firefox on Windows. I tested it on 40.0.2 version

kubut
  • 315
  • 5
  • 16

2 Answers2

1
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068

And the good use of GOOGLE !

Edit: (source of problem, explained)

After reading the bugreport, i read that it is possible it has something to do with widows.size or resolution. the problem can be fix as explained previous.

Community
  • 1
  • 1
  • Please explain why though :) – Michael Jones Aug 24 '15 at 12:13
  • @MichaelJones already posted the solution and the source but i will please you better :) (a second please) –  Aug 24 '15 at 12:16
  • @kubut give me a minute.. i will look for you a little deeper. –  Aug 24 '15 at 12:22
  • @kubut can you try to remove width: 118px; from the SELECT ELEMENT and applied to OPTION ELEMENT and see if border is missing ? –  Aug 24 '15 at 12:34
  • Still I have no border... :( – kubut Aug 24 '15 at 12:39
  • @kubut i cannot find the bug for me, so i need you to test... remove the width.. no width at all, then hes back ? –  Aug 24 '15 at 12:45
  • @PhilAndelhofs If I remove width from select everything looks fine. What is more it is enough to change width to 120px. The same situation is with padding-left on parent - when I removed it (and select still has 118px width) - border is coming back. – kubut Aug 24 '15 at 12:53
  • @kubut than the problem is found.. when element.width > 100% then border goes away.. add margin: 0; padding: 0 to SELECT ELEMENT and still 118px should show the right-border –  Aug 24 '15 at 12:57
  • @PhilAndelhofs like that: – kubut Aug 24 '15 at 13:02
  • @kubut i'm not good explaining myself in English ;) try this: –  Aug 24 '15 at 13:08
  • @PhilAndelhofs 117px works, 119 too. Only 118 is unlucky, but I can't ignore that value (it is set by user). 18em works, 19 nope, 20 yes, 21 yes, 22 nope... It is really weird... – kubut Aug 24 '15 at 13:13
  • @kubut it is a bug.. and how so it i set by user ? –  Aug 24 '15 at 13:26
  • @PhilAndelhofs It is part of multibook viewer, where all elements (including selects) I get define in book's files (json files where are defined images, texts and interactive elements). In this files I have define width of any element, something like: "element" : { "type" : "combo", "width" : "118", "height" : "20", "x" : "10", "y" : "10", "options" : [...], ... } – kubut Aug 24 '15 at 13:54
  • 1
    Would these styles be applied globally on the html or body tags? Or specifically to the select option elements? – Chester Rivas Oct 17 '16 at 15:59
-1

We can place a border-right on the option i.e. border-right:1px solid grey. This way I didn't have to make any adjustments to the width defined.enter image description here

or if you are okay making width adjustments then can set the width to auto for the css of select,i.e. width:auto

Nupur Gupta
  • 1
  • 2