My Dropkick Plugin's Dropdown Looking Strange

My dropkick jquery list look not correct

Hey now problem is that i think you don't used css reset please used this

more info http://meyerweb.com/eric/tools/css/reset/

used to this

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

jQuery: Dropkick plugin not working correctly

If you read the documentation on the homepage of the DropKick plugin you will see the following :

The name attribute is the only one that is required.

You need to add a name attribute to your select lists

Accessing onchange using the jQuery plugin DropKick dropdown list

I couldn't get this working, so I ended up using selectBox instead

http://labs.abeautifulsite.net/jquery-selectBox/

Can't get why same dropdown's have different width

Add this to your CSS:

.row .nav-pills .dropdown-menu a {
    width:245px;
    height: 25px;
}

And add the width of the class="dropdown-toggle" to the .row .nav-pills .dropdown-menu in your CSS

Edited CSS:

.row .nav-pills .dropdown-menu {
    border-width:0 1px 1px 1px;   
    width: 243px;
}
.menu .nav-pills .dropdown-menu a { 
    padding-top: 5px; 
    height: 20px;
    padding-left: 10px;
    width: 235px;
} 

.menu .nav-pills .dropdown-toggle { 
    border: 1px solid #B4D287; 
    width:243px;
} 

Maybe this should do it.

I need suggestions for a solid jQuery/CSS select box plugin

Here are a few options I know of (in no particular order):

StyleSelect

Website

Wraps the existing <select> tag, so all the events, properties and so on should remain accessible. The default styling isn't that nice though, and there are limits to how much it can be customised.

Chosen

Website - Github

Nice default styling, but the generated markup is kind of weird and it doesn't support the whole range of callbacks you might need (only change)

jQuery UI Selectbox

Website - Github

A good option if you are already using jQuery UI - otherwise potentially too much overhead. It doesn't use the <select>'s events, but has equivalent callbacks (and even ones not present on a regular submit, like open/close). Also it's ARIA compliant.

jStyling

Website - Github

Again, wraps the original <select> tag. Supports disabled options. Default styling is fairly uninspiring and it's designed to cover more than just select boxes (potentially unwanted cruft).

Uniform

Website - Github

Simple to implement, supports multiple themes. Lack of callbacks though, sometimes have to force update elements (mentioned already), covers more than just select boxes (again, potentially unwanted cruft).

HTML5 multiselect dropdown with checkboxes plugin. Designed as standard select dropdown

Bootstrap Multiselect -
http://davidstutz.github.io/bootstrap-multiselect/

In terms of appearance, you may have to use CSS to get the styling you want.

---

Related Topics