jquery-ui-bootstrap / jquery-ui-bootstrap

A jQuery UI theme based on Twitter Bootstrap

#jQuery UI Bootstrap (v 1.0 Alpha)

This project was started to bring the beauty and ease-of-use of Bootstrap to jQuery UI widgets ♥.

##Why?

Bootstrap is one of our favorite projects, but having used it regularly it left us wanting two things:

• The ability to work side-by-side with jQuery UI (something which caused a number of widgets to break visually)
• The ability to theme jQuery UI widgets using Bootstrap styles. Whilst we love jQuery UI, we find some of the current themes to look a little dated. Our hope is that this theme provides a decent alternative for others that feel the same.

To clarify, this project doesn't aim or intend to replace Bootstrap. It merely provides a jQuery UI-compatible theme inspired by Bootstrap's design. It also provides a version of Bootstrap CSS with a few (minor) sections commented out which enable the theme to work alongside it.

We welcome any and all feedback as we would very much like this theme to be as solid as possible.

##Browser support

All modern browsers are targeted by this theme with 'lo-res' experiences (i.e no gradients, border-radius etc.) provided for users using older browsers.

There are some minor known issues lingering that we're working on, but the hope is that in time those will all get ironed out.

##jQuery UI support

This theme targets jQuery UI 1.10.3 (stable) and 1.9.2 (legacy), along with the default version of jQuery included in the (current) jQuery UI builds (jQuery 1.6+).

##Project status

This project is under active, but slow development. There has been a great deal of work done in branches to introduce compatibility with jQuery UI 1.9 and further work done to move us towards using LESS and improved parity with Bootstrap 3.x.

At this time, we are seeking contributors interested in helping us to finally complete the work needed to be Bootstrap 3.x compatible. This would involve helping in your spare time across a few weeks and you would be given credit in the project README.

As one of the (currently) more popular open-source jQuery UI themes we would love to get out more frequent releases and your help with this would be greatly appreciated.

##Team

• Lead Product Developer : Addy Osmani
• Chief Maintainer : Gerits Aurelien

Contributor

• Less Support : Vijay Dharap
• You? ;) We're always open to improvements.

##Demo

For a live preview of the current theme, see http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/.

Synchronize your fork

cd your_fork

git remote add your_fork [email protected]:addyosmani/jquery-ui-bootstrap.git
git fetch jquery-ui-bootstrap

#Merge your local copy with the original project
git checkout gh-pages
git merge jquery-ui-bootstrap/gh-pages

#Commit your changes
git commit -a -m "Synchronization with the original"

#Send your changes to github
git push

rock on node.js bandwagon!

<<install node>>
cd your_fork

# install modules (or globally with -g switch)
npm install

# run local webserver to see the pages.
node server.js

# compile your LESS changes to create a new css file
cd less
lessc -x style.less > style.min.css
lessc -x style2.less > style2.min.css

##Licence

The MIT License (MIT)

jQuery UI Bootstrap © Addy Osmani 2012 - 2013.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
and associated documentation files (the “Software”), 
to deal in the Software without restriction, including without limitation the rights to use, 
copy, modify, merge, publish, distribute, sublicense, 
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, 
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of 
the Software
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR 
THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The MIT License (MIT)

jquery-ui-bootstrap's Issues

Upgrading to Bootstrap 2.0 (Implementation discussion)

This issue is to discuss how we're going to implement the upgrade to 2.0 and follows from the conversations started in #52.

We probably need to hash out the LESS solution we're going to try using and decide on what we do want to target from Bootstrap 2.0, whether what we target can be matched against a jQuery UI widget or stable third party plugin etc.

//cc @panosru

Bootstrap Plugin Test Suite failed on 'Buttons'

Hello,
When i try this page: bootstrap/js/tests/index.html
i get errors on buttons:
42. bootstrap-buttons: should return set state to loading (2, 2, 4)Rerun

btn text equals mdo
Expected:   "mdo"

btn text equals fat
Expected:   "fat"

btn is disabled
btn has disabled class

and:

bootstrap-buttons: should return reset state (2, 5, 7)Rerun

btn text equals mdo
Expected:   "mdo"

btn text equals fat
Expected:   "fat"

btn is disabled
btn is disabled
btn text equals mdo
Expected:   "mdo"

btn is not disabled
btn does not have disabled class

I've tried it on Firefox 12 and Chromium 20.
Best regards
S.

IE9 Issues

• primary, success and danger buttons appear to be overriding or not correctly rendering border-radius. Default buttons do not have this issue. Decide whether to have no border-radius in IE at all or do it properly
• selecting items in the button-set lose the border-radius.
• inactive tabs have a linear gradient background in IE whilst not in other browsers
• sample-ui-state-error has no border radius, other highlight states do
• open dialog buttons have no gradients
• datepicker has gradient backgrounds for each date and a yellow highlight on the current selected date. Other browsers have a white background for dates and a gray background for selected dates.
• wijmo menu is not working in IE. The background to each menu parent (File, Edit, About) is gray whilst it should be transparent (i.e the same color at the rest of the menu-bar). Drop-downs are activating in other browsers but not IE.

generation from .less

It would be very helpful if jquery-ui-bootstrap could be generated from a .less definition that in turn takes dependencies on the bootstrap .less variables file.

Minor discrepancies between padding/margin of components in Chrome/FF

I've noticed that component padding appears to be different between Chrome and FF8/9: http://imageshack.us/photo/my-images/196/screenshot20111220at154.png/ (looking at the actual buttons rather than spacing between them).

Investigate to find out if this is the jQuery Ui demo page template breaking things or there are actual issues with the theme. Fix as necessary.

Split Button Design Issue?

On top latest Chrome, on the bottom firefox 8.

Some ui-icon-* css classes are missed

Seems these icon css classes are missed.

• ui-icon-globe
• ui-icon-file
• ui.icon-cog

Fix accordion 'jumpiness' issues

At the moment some stray styling has meant that switching between one drawer in an accordion to another actually results in some visible 'jumpiness'. This may just be down to a border or margin that's been incorrectly set, but would be great to resolve.

Confirmed in Chrome and FF.

Forms inside a modal dropdown not editable

Bear with me on this, I'm trying something ridiculous. Essentially, I have a form inside a dropdown menu which is inside a dialog

For whatever reasons, the input fields inside the dropdown are not editable. Input fields outside the dropdown are.

Here is a repository that demonstrates the issue: https://github.com/et/dropdown-experiment

Here are screenshots of what I'm talking about:

Input field editable outside dropdown

Input fields not editable within dropdown.

I've tried tweaking with firebug to isolate the issue but cannot determine what the cause is.

Positioning for jquery-ui button icons

Hi. I'm in the process of switching over an existing jquery-ui app. I found that jquery-ui-bootstrap doesn't position button icons correctly (they end up in the top left, with the text underneath). Some of the components used can't easily be changed to do it 'the bootstrap way', so I came up with the following CSS to position them correctly.

Maybe this could be included in jquery-ui-bootstrap? This shouldn't break buttons done 'the bootstrap way' due to the use of the 'ui-button-text-icon-primary' class.

.ui-button-text-icon-primary {
    position: relative;
}
.ui-button-text-icon-primary .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

LESS sources?

Hello, it would be great to have less files in order to see the changes made in original bootstrap less files.

Inactive tabs have a linear gradient background in IE9, same with datepicker dates

but not in other browsers. This needs to be fixed.

Outline: none on sliders

If possible can you put an outline:none CSS property on the sliders. The dotted border around the knob is distracting.

Tabs CSS like in boostrap, file input

Fix CSS for jQui tabs so they would look like bootstrap's ones. The grey hover and font color and spaces between tabs etc.

Another thing , maybe you could make bootstrap like styling for file input using http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/ ?

conflicts with bootstrap.css

I've been using jquery-ui-bootstrap with bootstrap.css and have noticed a couple of conflicts which seem unnecessary. For example, jquery-ui-bootstrap styles input[type="text"]. This is of course not a selection unique to jquery-ui, and bootstrap already applies its style to this selector. Conflicts with bootstrap are invited by styling selections that are not unique to jquery-ui. In this case the bootstrap .search-query style is overwritten to no longer have rounded corners, because it's a text input. In patching jquery-ui-bootstrap (to remove all style applied to input[type="text"]) I noticed that there are several applications of style to selections that are not unique to jquery-ui (e.g. textarea, input). I would recommend that these be removed or at least made more selective so that they only apply to jquery-ui components.

Wijmo menu: parent bg issues in IE9

Menu parents are appearing gray (inheriting from ui-widget). This needs to be fixed to ensure the background color is either transparent or the same as the rest of the menu bar.

Error on Line 84 in CSS

There is a random "x" on line 84 in the CSS.

Release tasks

• Cross-browser testing: IE7+, Chrome stable+, Opera -1, stable, next, FF 5+, Safari 4/5+
• Create a release page or a release post
• Code-review

jplayer theme

It would be nice to have a theme for http://jplayer.org/ but it's probably needed to do it from scratch.

Support for Fullcalendar

You have done a wonderful job on this project. I think a great component to support would be Fullcalendar: http://arshaw.com/fullcalendar/

Using Bootstrap 2.0

Are you going to use bootstrap 2.0 in next release?!

CSS styled file input

As you asked, separet issue for this feature.

Maybe you could make bootstrap like styling for file input using http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/ ?

With that, just like with regular inputs you could make width controling styles span1 - span12 as custom input does not work well with auto size width.

I used this method before in some of my projects, worked quite nice. There is only a small bug with IE (I don't remember if it was 6 or 7) with flowing input which was few px further than end of input so clicking wasn't woring at the edge. I dod some fix some time ago, I'll look for it.

Conflict between JqueryUI buttonset and bootstrap-buttons ?

Hello,
bootstrap-buttons make possible to show a pushed button
JqueryUI make possible aligned buttons in a block.
But i can't do both together, i mean that i'd like a buttonset AND anywhere (outside buttonset) an other button which can be pushed.
If i create a buttonset and i add bootstrap-buttons.js, my buttonset become a radio button block.
And if i don't include bootstrap-buttons.js, my button can't stay pushed.
May you help me ?
Best regards
S.

jQuery 1.7.1

Just FYI...

jQuery UI 1.8.18 already comes with jQuery 1.7.1.

: )

Calendar text not centered

The numerical dates on the calendar aren't centered in their boxes.

Chrome, primary button in dialogs is "selected"

As you can see in this image when opening a dialog in chrome (i've not tested in other browsers) the primary button has a golden border like the one wee see in focused text input and around some links, It disappear after clicking somewhere

It's not a priority but it's not very nice to see it

Datepicker is not fully themed in IE9

I'm using IE9 and when I open up the index.html page of jquery-ui-bootstrap the theme is not fully loaded for jQuery datepicker, also the drag/re-size of dialog are a bit laggy.

Syntax error in CSS

On line 1348, there is an extra }.

Discussion: Bootstrap 1.0 or shift to 2.0 (once final)

I've just been reviewing Twitter Bootstrap 2.0 WIP and it introduces both a large number of new visual components and quite a shift in the visual appearance of the project since 1.0. At the request of the Bootstrap team, the WIP isn't being put up anywhere live pre-release but if you'd like to review it, you can grab 2.0 WIP here: https://github.com/twitter/bootstrap/tree/2.0-wip

This raises some interesting questions about how jQuery UI Bootstrap should proceed:

• Should we stick with version 1.0 of Bootstrap and continue improving support for it as well as theming more plugins? (this would effectively mean we're providing a 'Bootstrap' jQuery UI theme, but not supporting Twitter Bootstrap (latest). Arguments for: the current theme is visually pleasing and our time could be spent improving support for more third party plugins if we stayed this course. There is a need for a stable, modern theme in the community.
• Should we move to Bootstrap 2.0 (once final)? This will involve a very large amount of work. a) We'll have to retheme the existing components, b) extend our support to cover more 'modes' that can be customized using jQuery UI which are being included by default in Bootstrap 2.0 and c) cover support for plugins/otherwise that can match as much as possible 2.0. Arguments for: this will improve the overall visuals the theme offers, developers will be able to continue to use Bootstrap.latest and jQuery UI.latest together.

Could I have a show of votes? +1 to upgrade to 2.0, -1 to stick with 1.0 and do our own thing.

Happy to also hear further input from others about their thoughts on the above.

problem with buttons

hi .. i run the test in this folder : …/bootstrap/js/tests/index.html

and i get some message like this one : http://prntscr.com/5da78

can you tell where the problem is ? i am not expert in using Javascript..

Fix background positioning issues on buttons once active

If you click on the 'run last action' button, you'll see that the active/down state currently results in this happening: http://imageshack.us/photo/my-images/196/screenshot20111220at142.png/

I believe it's down to some styles from the default/base jQuery UI theme this theme was built from changing the background position to 50%. Ideally, we don't want this to happen. Would be great to fix.

[feedback] buttons

I've noted that not all buttons use the animation on the styles, like the download buttons do. The text of buttons is also selectable, which for a UI component doesn't seem like a great idea.

Wijmo menu: border tweaks

From twitter:

Just 2 little issues on the menu: The border-radius on top left corner & padding:

http://t.co/h71aRGzU

DateRangePicker conflict with code prettify

It seems that DateRangePicker conflicts with google-code-prettify most of the times you don't need code prettify but in case you want it, consider removing DateRangePicker :)

CSS styled select

jQuery UI team is developing plugin/widget to style select forms input. It is currently in jQuery UI Labs and probably will be added to official release some time. Maybe you should style it bootstrap like in advance?

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
https://github.com/fnagel/jquery-ui
https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Resizable not working in combination with Bootstrap 2.0

I realize there is an on-going discussion about how to implement 2.0 but this JSFiddle shows how the resizable functionality doesn't work when used in conjunction with 2.0.

http://jsfiddle.net/pltaylor3/9WZ7j/

More cool features

I love Twitter bootstrap and I love jQuery and jQuery UI so this means that I love jQuery UI Bootstrap theme and so do many people.

A request was made previously for adding custom input type fields and I loved the idea, now I believe there are more things that could be made for example plupload integration, chosen, multiselect and others...

Tools like these are used in almost every web app and I believe they are very useful specially if they are all integrated in a nice ui like twitter bootstrap.

although chosen has already great UI it could be improved even more I believe ;)

Wijmo menu is not working in IE9

Wijmo menu is not properly rendered and worked in IE9.

Remove text-shadow from keyboard shortcuts in Wijmo menu

todo.

ui theme-able?

hi, nice integration of projects, just wondering if themroller is still an option?

thanks for the work Addy.
tia,

Add align options

Possibility to use pills for tabs

it would be cool if we could use pills style tabs http://twitter.github.com/bootstrap/#navigation

Number of IE9 issues

primary, success and danger buttons appear to be overriding or not correctly rendering border-radius.

Filament Group File Input issue

The input field shrinks every time a file is selected.

File Input Problems on IE

The File Input does not upload anything when using IE. Tested on IE9.
You can click browse, select a file, and the file name appears in the text part of the control. However when trying to submit/post the form nothing happens.

Wijmo Menu Text Inputs Box Shadow

This isn't a bug, but I would remove the bottom box-shadow from the text inputs in the wijmo menu.
It makes no sense there, nothing else has shadows.
Plus, when getting focus, it looks like the box is moving and growing a little.

What do you think?

Support for jqGrid

I would love to see support for triands' jqGrid.

http://trirand.com/blog/jqgrid/jqgrid.html

I took a quick stab at substituting the jquery ui css for it and the problem with the bootstrap css is that the jqGrid uses dialog and accordion classes so it get a white title bar with silver header and footers. If anyone has an idea of a way to make this look good I'm all ears.

Great job Addy -

Paul Speranza

Convert Dropdown to Button Set

This is not so much an issue as there is no documentation and I am horrible at JS. How can I convert some dropdowns to the nice looking button sets? I am using Roots Theme (WP + TWBS) and TheCartPress.

Slider dragging issue

My slider has a weird behavior, the background color and the picker are not synchronized with the mouse dragging.

The official JQuery UI slider have the correct behavior.

Tested on Firefox 8 e latest Chrome

Hardcoded input width breaks bootstrap

This CSS:

input[type="text"],
input[type="password"],
.ui-autocomplete-input,
textarea,
.uneditable-input {
display: inline-block;
width: 210px;
height: 18px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: #808080;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Breaks the Bootstrap grid system (e.g., <input class="span7" ...> (and most likely application CSS that also set input width because the specificity takes precedence. You shouldn't be hardcoding widths of generic elements like this.