Bootstrap styles are not respected about jquery.selectboxit.js HOT 27 CLOSED

Here's what I had to do in order to get desired styling:

Replace selectboxit.css with:

.selectboxit-container,
.selectboxit,
.selectboxit-default-icon,
.selectboxit-text,
.selectboxit-arrow {
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.selectboxit {
  cursor:pointer;
}

/* Dropdown List Optgroup Header hover psuedo class */
.selectboxit-optgroup-header[data-disabled='true']:hover {
  cursor: default;
}

/* play nice with bootstrap */
.dropdown-menu.selectboxit-options {
  top: auto;
  left: auto;
}

I also had to manipulate the DOM after calling initialize or refresh:

        hackSelectBoxItDom: function() {
            var el = this.$().data('selectBoxIt').div;
            el.find('.selectboxit-arrow-container').replaceWith(el.find('.selectboxit-arrow'));
            el.find('.selectboxit-default-icon').removeAttr('style');
            el.find('.selectboxit-text').removeAttr('style');
            el.find('.selectboxit-arrow').removeAttr('style');
        },

from jquery.selectboxit.js.

Since the drop down is not a button, I will not be supporting the Bootstrap button CSS classes.

from jquery.selectboxit.js.

The business has required that the page I'm working should have dropdowns styled like bootstrap's dropdowns. If I weren't able to hack selectBoxIt, then I would have to abandon selectBoxIt because of this decision. This is anecdotal, but I'd suspect its a common use-case.

from jquery.selectboxit.js.

But your use case is to use the twitter large buttons right? Couldn't you just change the padding to match the Bootstrap padding?

from jquery.selectboxit.js.

I have four dropdowns on the page already and will potentially add two more for future user-stories. Each of the dropdowns gets different classes (mix of size and color classes).

I definitely could write selectboxit css to customize each one but that's undesirable for a lot of reasons. And this is nit-picking but changing the padding is not going to give pixel-perfect results. I'd have to overwrite a lot of properties which are set in selectboxit.css (e.g. text-indent, font, etc).

from jquery.selectboxit.js.

I definitely understand that for your use case, changing a bunch of the SelectBoxIt CSS properties is not ideal, but I don't think it is too much to ask. After you finish creating your btn-mini and btn-large drop downs, maybe you could create a blog post or post your examples somewhere (which I could link to from the SelectBoxIt homepage)?

from jquery.selectboxit.js.

I think asking users to create corresponding styles for every bootstrap style they want to use is too much to ask.

I have opted to hack selectboxit to get it into a state where styling can be accomplished purely with css (ideally the plugin would support that out-of-the-box) and which doesn't assume anything about how I want the dropdown to appear (e.g. fixed width, font size, etc). The result is something that will work with every bootstrap style that exists or might exist.

from jquery.selectboxit.js.

You really shouldn't have to "hack" SelectBoxIt. You should be able to fairly easily create large and small Bootstrap looking drop downs purely in SelectBoxIt.css. Maybe I should show this in the demos folder.

from jquery.selectboxit.js.

What if the goal is pixel-perfect equality and not just something resembling a bootstrap dropdown?

For example, right now the js assumes (and forces) the dropdown arrow to be vertically centered. That's not the case for bootstrap dropdowns.

from jquery.selectboxit.js.

Actually, the JS does not force you to vertically center the dropdown arrow at all. All of the dropdown arrow styles can be adjusted in the CSS file to make it look EXACTLY like the bootstrap dropdowns. The reason I did not use the default Bootstrap handling for the down arrow, is because I think my way looks better. Obviously that is just my opinion.

from jquery.selectboxit.js.

Maybe you know something I don't then.

Take a look at http://jsfiddle.net/gavacho/7RfRP/

The .selectboxit-arrow-container element gets a height property set in its style attribute (via js)
The .selectboxit-arrow element gets a margin-top property set in its style attribute (via js)

Since properties set in style attributes are always honored it follows that the selectBoxIt can not be styled however I want. Also, I wonder if you have an easier way of getting pixel-perfection than I do. Could you show me how you would do that?

from jquery.selectboxit.js.

Here's my pixel-perfect implementation: http://jsfiddle.net/gavacho/kJTtc/

Notice that it requires undesirable js and css hacks (two at the bottom of the css).

Updated fiddle

from jquery.selectboxit.js.

Here is my CSS only version: http://jsfiddle.net/7RfRP/3/

Note: The !important tag is used twice.

Until I see more users complaining about making pixel perfect Bootstrap dropdowns, I am going to keep the dynamic CSS properties inside of the JS (specifically the the max-width and margin-top properties)

from jquery.selectboxit.js.

I see. I notice both of our solutions require duplicating properties from bootstrap.css instead of allowing those properties to cascade. That approach is too brittle for me. For that reason I prefer not to import selectboxit.css (so bootstrap's styles can cascade correctly).

The problem I run into is that bootstrap doesn't define their properties with !important, so they can't override the properties you set via JS in the style attribute. So I'll have to keep the js hacks too.

from jquery.selectboxit.js.

I don't duplicate that many styles... here is my entire CSS I have to write for a large button:

.selectboxit-container .selectboxit {
    padding: 11px 28px 11px 15px;
    border-radius: 6px;
    width: auto;
    height: 20px;
}

.selectboxit-text {
    font-size: 17.5px;
    max-width: none !important;
}

.selectboxit-arrow-container {
    width: 0;
}

.selectboxit .selectboxit-arrow-container .selectboxit-arrow {
    margin-top: 6px !important;            
}

Bootstrap's styles will cascade perfectly fine... I'm not declaring any bootstrap classes in my CSS. I don't see why you need the JS hacks

And on top of that, I think Bootstrap not positioning their dropdown arrows in the center of their container is a bug (again, just my opinion). Like I said before, pixel perfect is relative =)

from jquery.selectboxit.js.

In my pixel-perfect fiddle, I was able to change both elements to btn-small and everything worked. Your approach wasn't able to do that. The rules which you would have to define in order to achieve that are the "duplication" to which I refer.

It's essentially copying sections out of bootstrap.css, pasting them into a custom.css and adding a selectbox class to each selector.

.btn.selectboxit {
  padding: 4px 12px;
}

.btn-large.selectboxit {
  padding: 11px 19px;
}

.btn-small.selectboxit {
  padding: 2px 10px;
}

.btn-mini.selectboxit {
  padding: 1px 6px;
}

.selectboxit-arrow.caret {
  margin-top: 8px !important;
  margin-left: 0;
}

.btn-mini .selectboxit-arrow.caret,
.btn-small .selectboxit-arrow.caret,
.btn-large .selectboxit-arrow.caret {
  margin-top: 6px !important;
}

.btn-large .selectboxit-arrow.caret {
  border-top-width: 5px;
  border-right-width: 5px;
  border-left-width: 5px;
}​

from jquery.selectboxit.js.

Sure, you will have to add CSS but it is not that difficult... http://jsfiddle.net/7RfRP/7/

The reality is that there is no way to make everyone happy here.

from jquery.selectboxit.js.

What would make me happy is not having to use !important. Because then I wouldn't need my js hacks anymore.

from jquery.selectboxit.js.

Why do you need your JS hacks to begin with? I just showed you an all CSS way you can accomplish this.

from jquery.selectboxit.js.

Because I only use bootstrap.css and bootstrap.css doesn't declare margin-top with !important on .carret.

SelectBoxIt sets margin-top on .selectboxit-arrow (the same element as .carret) in the style attribute.

The JS hack is required to remove that style attribute, allowing bootstrap (and not selectboxit) to position that element.

from jquery.selectboxit.js.

But what I'm saying is, just let SelectBoxIt style that particular element. Considering you are only using these styles within SelectBoxIt, why would letting SelectBoxIt do this be bad? Maybe I'm missing something... are you incapable of using the SelectBoxIt.css file because of a project restriction?

from jquery.selectboxit.js.

Are you asking "why not use selectbox.css" or "why not keep that style property" to style that particular element?

from jquery.selectboxit.js.

Why not use SelectBoxIt.css?

from jquery.selectboxit.js.

I don't use selectboxit.css because if I did and I wanted to use every single size of .btn I would have to copy 7 css rules out of bootstrap.css, duplicate them in my site's css (adding a selectboxit class to each selector). This seems wrong. Did I get everything I needed from bootstrap.css? The styles are already there, why should I be redefining them? What if they change in the future? What if they add .btn-huge in the future, will I have to copy those styles and paste them into my sites .css too? Why can't it just work? It can just work if you don't use selectboxit.css.

from jquery.selectboxit.js.

You should be redefining them because select boxes are not buttons. With the CSS I already gave you in my jsfiddle, it would take you all of 5-10 mins to implement all of the Bootstrap sizes.

If you find that this still not satisfactory, then I suggest maintaining your own fork of SelectBoxIt for people with similar use cases (kinda like Lodash vs. Underscore). If enough people start complaining about this issue, then I might reconsider my position.

from jquery.selectboxit.js.

I find my existing approach to be satisfactory.

"You should be redefining them because select boxes are not buttons."

I think this is the core of our disagreement. My opinion is that selectboxit should render the same as the dropdowns that bootstrap has on their demo page. So to me, it's not correct if it doesn't look like their button. I think you're saying that it doesn't matter what bootstrap shows as a dropdown on their demo page because that's a button and selectboxit has its own opinions on what a <select> replacement should look like.

from jquery.selectboxit.js.

I think you hit the nail on the head. I don't promote SelectBoxIt as Twitter Bootstrap dropdowns nor do I say that SelectBoxIt will look identical to Twitter Bootstrap.

Bootstrap is only one of the supported theme options (keyword theme). This basically means the color scheme. In the future, I suspect that SelectBoxIt will support other CSS projects such as Foundation as well.

from jquery.selectboxit.js.