Styling input controls globally interferes with other plug-ins - more granular selectors needed

[rhollhumer]

The issue is bootstrap styles input controls globally. For example:

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

This is only one example. When you have plugins like jqGrid for example it interferes with its controls. Bootstrap needs to be more granular in styling controls intended for bootstrap DOM elements and create higher-level selectors. I suggest for the example above to wrap it inside "controls".

Here is another example of styling that interferes with non-bootstrap controls:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: #555555;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
margin-bottom: 9px;
padding: 4px;
}

[mdo]

We'll be sticking with our current selectors. Third party plugin support is never guaranteed.

[envex]

The great thing about Bootstrap is you can edit the .css once you've downloaded it!

Amazing, right?!

[kcivey]

I don't understand why button isn't styled too, without requiring a btn class. Seems inconsistent.

[mdo]

@kcivey Because we'd still need to include input[type=button], a.btn, input[type=submit], etc. It's just more code and complication in that instance then a simple class. The changes in the form selectors we added in 2.0.4 prevent us from needing to do massive overrides on default browser controls. That's something we really want to avoid in Bootstrap.

[rhollhumer]

Great point kcivey! Although if the BS team cannot see the benefits then it's a moot point. So basically anyone using BS will have to override styling 100% of the time on all input controls on all their web pages for all the plug-ins they use that render their own styling for input controls. This seems to chisel away any reason for using Bootstrap. Overriding Bootstrap css in this case seems illogical at best as it implies the BS styling is not correct or as granular as it is supposed to be. It also suggests you realize there is an issue here. Any person who has written a fair amount of css will realize that it is a mammoth task to to take an existing app, converting it to BS and then having to find all non-BS input controls and styling them all. The worst part is that there is no generic styling for this as each input control has a different source/context, some are regular tags and some belong to plug-ins, each with their own flavor of styling. For new web apps the challenge is not that different, each time you add a new plug-in you will have to test all facets of it, and I mean all of it, pop-ups, etc, that contain any kind of input control to make sure it is styled correctly. I am having a hard time seeing the benefits of BS in this context.

In order to try and move us closer to a point where we agree on a design that me make a recommendation. If we add a higher-level qualifier to the input selector we may not break anything if we make it "control" and/or "control-group" as they have to be declared inside those classes anyway as far as I understand the design approach of BS. So in my example below can modify the css without possible breaking anything, see the css at the bottom. I tested this briefly and seems to render just as expected. May not be complete as I only spent a few minutes on the css. Your feedback will be greatly appreciated and hopw we can move forward with this.

First Name

Here is the css updates, just pasted the css that needs to be altered:
.control-group .controls {
label,
input,
button,
select,
textarea {
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
}
.control-group .controls {
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
label {
display: block;
margin-bottom: 5px;
}
.control-group .controls {
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: 18px;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
}
}
.control-group .controls {
input,
textarea {
width: 210px;
}
}
.control-group .controls {
textarea {
height: auto;
}
}
.control-group .controls {
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
}
.control-group .controls {
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

}
.control-group .controls {
input[type="radio"],
input[type="checkbox"] {
margin: 3px 0;
margin-top: 0;
/ IE7 */

  line-height: normal;
  cursor: pointer;
}

}
.control-group .controls {
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
}
}
.uneditable-textarea {
width: auto;
height: auto;
}
.control-group .controls {
select,
input[type="file"] {
height: 28px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */

  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */

  line-height: 28px;
}

}
.control-group .controls {
select {
width: 220px;
border: 1px solid #bbb;
}
}
.control-group .controls {
select[multiple],
select[size] {
height: auto;
}
}
.control-group .controls {
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
.control-group .controls {
.input-mini {
width: 60px;
}
}
.control-group .controls {
.input-small {
width: 90px;
}
}
.control-group .controls {
.input-medium {
width: 150px;
}
}
.control-group .controls {
.input-large {
width: 210px;
}
}
.input-xlarge {
.input-xlarge {
width: 270px;
}
}
.input-xxlarge {
.input-xxlarge {
width: 530px;
}
}
.control-group .controls {
input[class_="span"],
select[class_="span"],
textarea[class_="span"],
.uneditable-input[class_="span"],
.row-fluid input[class_="span"],
.row-fluid select[class_="span"],
.row-fluid textarea[class_="span"],
.row-fluid .uneditable-input[class_="span"] {
float: none;
margin-left: 0;
}
}
.control-group .controls {
input,
textarea,
.uneditable-input {
margin-left: 0;
}
}

[barbalex]

Wanted to use bootstrap for the fluid layout (looks great) and some of the beautiful widgets. But uups, I would have to overhaul my project completely because of all the css conflicts with jquery ui and my own css. Deinstalling was a quick decision...

[osCMattiFinn]

"BS Team" is fairly descriptive for those who think this is a good approach.... rhollhumer should be appointed as project lead, at least he is sane.

[Yohn]

@barbalex you might want to check out http://addyosmani.github.com/jquery-ui-bootstrap/ if you're looking to use jquery ui

[rhollhumer]

Thanks! Unfortunately they are not 100% compatible so plug-ins like jqGrid are are fully integrated into jquery-ui have some issues. Having said that, I do use jquery-ui-bootstrap and had to make some minor tweaks to take of edge cases.

Date: Thu, 25 Oct 2012 01:09:51 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [bootstrap] Styling input controls globally interferes with other plug-ins - more granular selectors needed (#4008)

@barbalex you might want to check out http://addyosmani.github.com/jquery-ui-bootstrap/ if you're looking to use jquery ui

          —

          Reply to this email directly or view it on GitHub.

[barbalex]

@Yohn: Thanks, that's a great help!

Am Donnerstag, 25. Oktober 2012 schrieb Yohn :

@barbalex https://github.com/barbalex you might want to check out
http://addyosmani.github.com/jquery-ui-bootstrap/ if you're looking to
use jquery ui

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4008#issuecomment-9769180.

---

Alexander Gabriel
Wiesenstrasse 22
8800 Thalwil
079/ 372 51 64
[email protected]
www.barbalex.ch