Question

I am using the toChecklist plug-in for jQuery. Everything works fine on my development machine. However, when I install my application, which uses the plug-in, on my staging server, the toChecklist plug-in does not look right.

Basically instead of having all of checkboxes line up in a column, one on top of the other, the checkboxes form more like a step look. Each checkbox is indented a little from the one above it.

When I install the application on my local machine it looks fine as well.

I am developing in an ASP.NET MVC environment.

I assume it has something to do with the CSS. So, I did play around with the CSS. If I removed the font-size from both the default css that comes with the plug in as well as the body tag in my site wide css the checkboxes do line up correctly. However, this is not a viable solution, obviously, since this effects my entire site.

I am not a designer, more of a middle tier guy, so any suggestion would be much appreciated.

Here is the default css that comes with the plug in:

div.checklist, div.checklistHighlighted { overflow-y: auto; overflow-x: hidden; /* If 

you don't want scrollbars, leave this one blank. */ }
div.checklist { border: 1px solid gray; border-left: 3px solid #ccc; color: #555; font-family: arial; font-size: 10px;  line-height: 1.6em; clear:both;}
div.checklistHighlighted { border: 1px solid gray; border-left: 3px solid ##93BFE5; }

ul.checklist { list-style-type: none; margin: 0; padding: 0; }
div.checklist li { padding: 2px; }
div.checklist li.even { background-color: white; }
div.checklist li.odd { background-color: #f7f7f7; }
div.checklist li.even:hover, div.checklist li.odd:hover, div.checklist li.focused, div.checklist li:hover label { background-color: #93BFE5; }
div.checklist li.checked { background: #93BFE5; font-style: italic; }
div.checklist li.checked:hover, div.checklist li.checked:hover label { background: #93BFE5; font-style: italic; }

div.checklist label.disabled { color: #ddd; }

/*div.checklist li { position: relative; }*/
div.checklist li input { display: block; float: left; }
div.checklist label { display: block; margin: 0; padding: 0; }
div.checklist label.leaveRoomForCheckbox { display: block; padding-left: 25px; /* If hiding checkboxes, set padding-left to 3px */ } 

ul.showSelectedItems { color: #770; font-size: .8em; list-style-position: outside; margin-left: 0; padding-left: 1.4em; }

/**** Search box ****/
div.findInList { margin-bottom: 5px; }
div.findInList input { background-color: #ffffef; border: solid 1px #eee; color: black; font-family: arial; font-size: .8em; padding: 2px; }
div.findInList input.blurred { background-color: white; color: gray; }

div.checklist li.optgroup { font-size: 1.1em; font-weight: bold; font-style: italic; background-color: #ccc; border-top: 1px solid #777; border-bottom: 1px solid #777; padding-left: 7px; }
div.checklist li.optgroup:hover { background-color: #ccc; }

Jeremy,

I am still working on this issue (got sidetracked late last week)

Per you request, he is the link: http://jsfiddle.net/kMkqk/

Basically, I stripped almost everything out of my page beside the CSS and code for the plugin. Hopefully the issue can to identified easier by doing this.

Now here is the odd part. When I run link on my local development machine all the checkboxes line up one on top of each other, which is what I want. However, when I go to the link on my staging server and QA server, the check boxes have that step effect (each check box is indented from the one above it), which is what I don’t want.

Let me know what you see and what your thoughts are.

Any help would be much appreciated. Thanks for you help.

R

Answer 1

It’s hard to say without seeing your code, but it sounds like you need to make sure each checkbox has a clear on it. It sounds like now the elements floating left of each other. So use whatever class you have on your checkboxes and try:

.yourCheckboxClass{
  clear:both;
}