Width of expanded list affected by user div style

[GoogleCodeExporter]

** What steps will reproduce the problem?

a user defined div style like:

/*though it may not correct, but id does affect DDCL*/
body div {
  border:2px solid $0089a3;
  width:825px;              /*this affects expanded DDCL width*/
  height:auto;
  margin:0px auto;
}

** What is the expected output? What do you see instead?

the layout of expanded div for DDCL screwed up 

** What is your environment?
-- DropDownCheckList version:
-- jQuery version:
-- jQuery UI version:
-- Browser and version:

latest DDCL package

** Please provide any additional information below/Please attach sample
html

1. the result html for un-expanded DDCL is fine

<span class="ui-dropdownchecklist-selector ui-state-default 
  ui-state-active" style="display: inline-block; overflow-x: hidden;
  overflow-y: hidden; white-space: nowrap; width: 385px; "
  tabindex="0" 
>

2. the layout screwed up for expanded div

<div class="ui-dropdownchecklist 
  ui-dropdownchecklist-dropcontainer-wrapper ui-widget"
  id="ddcl-inputAccessLevel-ddw"
  style="height: 226px; width: 825px; position: absolute; top: 494px;
  left: 180px; z-index: 1; "
>

Original issue reported on code.google.com by lovecrea...@gmail.com on 16 Aug 2011 at 9:32

[GoogleCodeExporter]

What you have described is a consequence of how css works.  Your definition of 
"body div" applies to every div within the body tag, at every level, which 
includes the DDCL components. So when DDCL is computing the width to use, it 
sees the 825 setting and assumes that is how wide the dropdown needs to be.
There is not much that DDCL can do since it relies on the browser to tell it 
how wide the dropdown is, based on all the items contained therein.  And your 
css definition affects how the browser does that calculation. If you do not 
want to change your css, I would suggest using the explicit DDCL width option.

Original comment by womohun...@ittrium.com on 16 Aug 2011 at 2:18

• Changed state: WontFix

[GoogleCodeExporter]

I used width in DDCL like this:
  $("#selectAccessLevel").dropdownchecklist( {icon: {}, width: 385  } );
but still have to change my css.

Thanks for your software

Original comment by lovecrea...@gmail.com on 24 Aug 2011 at 7:50

[GoogleCodeExporter]

This is not unexpected, since the 'width' option affects the inline display, 
not the popup (unless the popup is narrower than the width).  You are having 
problems with the popup, which attempts to size itself based on the width of 
the widest display item.  But your css definition affects the popup itself, so 
that is why you need to change your css.

Original comment by womohun...@ittrium.com on 24 Aug 2011 at 1:58