1

The following CSS element from this answer works ok in this JS fiddle example, however once I place the elements in my website, the standard drop down arrow becomes visible again due to my div having a float:right.

So: No float:right: Everything works, except that my div is in the wrong location.

Add float:right: Drop down becomes visible again, but then my div is in the correct location.

Sort of: Can't have your cake and eat it.

Browser: Firefox, latest.

Using this, I created a new fiddle with the issue:

<form id="bookingForm">
    <div class="col-md-6" style="float:right">
        Not working due to float:right
        <div class="input-group">
            <select style="width:200px;" class="form-control">
                <option>
                    hr
                </option>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        Working but not in the right place (no float:right)<br/>
        <div class="input-group">
            <select style="width:200px;" class="form-control">
                <option>
                    hr
                </option>
            </select>
        </div>
    </div>
</form>

and the CSS

.input-group {
    width:100%;
    display: inline-block;
}

.input-group select {
    padding: 0% 20% 0% 20%;

    -webkit-appearance:none;
    border: 1px solid #cccccc;
    -webkit-border-radius: 4px;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;

    background: url(data:image/png;base64,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) no-repeat right 0% bottom 0% #ffffff;    

}

For the https://jsfiddle.net/norbertnobel/jtx52dd7/

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Norbert
  • 6,026
  • 3
  • 17
  • 40
  • 1
    Before I post an answer.. is [*this*](https://jsfiddle.net/ctmbocb1/) what you're trying to achieve? – Josh Crozier Mar 17 '15 at 01:23
  • @JoshCrozier : Yes, that is the look I try to achieve. The look and feel is now only sensitive to placing it in the right location with the float:right. Your version is not sensitive to this. Trying to spot the difference... – Norbert Mar 17 '15 at 01:26
  • 1
    @JoshCrozier : Found the difference. I tested those in 1 variation, but not with the padding etc correct I guess. It was to easy for you :) – Norbert Mar 17 '15 at 01:30

2 Answers2

1

(This answer is based on the latest version of FF)

Explanation:

The root of the problem is the percentage based padding on the left/right of the select element.

When the parent element is floated, it basically has a "shrink-to-fit" based width which is reducing the width of the element in your case. Since the percentage based padding on the select element is calculated relative to the parent element's width, the amount of padding differs between both of the elements in your example.

Here is a visual demonstrating how the amount of padding controls whether or not the dropdown arrow appears:

This element's parent is floated:

floated

This select element's parent is not floated:

not-floated

In other words, the floated element has less padding because its parent element's width is smaller.

As you can see, the default arrow is not appearing if the amount of padding exceeds the width of the select element itself. This essentially explains why floating the element causes these visual differences.

Potential solution:

When it comes down to it, you are basically just trying to remove the default dropdown arrow, regardless of the width/padding of the elements. In the latest version of Firefox (v35), you can now simply remove the arrow using -moz-appearance: none:

Updated Example

.input-group select {
    padding: 0% 20% 0% 20%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #cccccc;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    background: url(...);
}
Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • I have to wait 21hrs before I can assign the bounty. It is coming your way – Norbert Mar 17 '15 at 02:25
  • just a quick note, latest stable release version of FF is V36.0.1 [check here](https://www.mozilla.org/en-US/firefox/new/), plus the `-moz-appeareance` solution won't work in FF versions from 30 to 34. – dippas Mar 17 '15 at 02:51
0

It seems like it's your padding that's at fault:

https://jsfiddle.net/jtx52dd7/2/

It works better with this:

.input-group select {
    padding: 0 10px;
}
jlowcs
  • 1,933
  • 1
  • 10
  • 16
  • Tested it, however the current padding (padding: 0% 20% 0% 20%;) makes the "working version" work. This padding:0 10px; makes both show up with the unwanted drop down arrow. – Norbert Mar 14 '15 at 23:04
  • Oh, you **don't** want the arrow? Well, remove the background on the select then. https://jsfiddle.net/jtx52dd7/3/ – jlowcs Mar 14 '15 at 23:06
  • I do not want to have the default arrow. That is why I added the background. Having the default arrow is easy, would not ask that question. Hence that is why I provided a working and not working example in the code and provided the point that adding the float:right messed up my working code. – Norbert Mar 14 '15 at 23:07
  • The background is an arrow. It's not the default arrow, but it is an arrow. https://jsfiddle.net/jtx52dd7/3/ doesn't show an arrow (in chrome anyway) because there is no background. – jlowcs Mar 14 '15 at 23:08
  • Aha: My browser: Firefox latest. That is important information. – Norbert Mar 14 '15 at 23:10
  • Ok, got it. Well, I really don't like the solution from the SO post you're referencing, because the behavior depends on the size of the container (because of the %). I don't have a solution for you though. Usually, when I need a personalized select, I just code one from scratch using div and ul/li. Way less issues that way, although some JS is needed. – jlowcs Mar 14 '15 at 23:21
  • I was going for pure CSS as a way of trying not to use JS for once... ANd it all works until you use rounded corners, then 99% of the solutions fail. This float:right is a curve ball. Just thought I cracked it. – Norbert Mar 14 '15 at 23:37