CODEWITHSUNDEEP
css
jlmmns
jlmmns

Reputation: 845

Width of absolute positioned div not the same as children's width

I'm using the Dropkick jquery plugin for custom select boxes.

It seems the absolute positioned dropdown always gets its width from the parent, and not the full width of the child list items.

How can I fix this?

See this jsfiddle.

Structure:

<label class="filter-lbl">
    <div class="dk_container dk_theme_default" style="display: block;">
        <a class="dk_toggle">
            <span class="dk_label">
                <nobr>status</nobr>
            </span>
        </a>
        <div class="dk_options">
            <ul class="dk_options_inner">
                <li class="dk_option_current">
                    <a>state</a>
                </li>
                <li class="">
                    <a>longerwords</a>
                </li>
                <li class="">
                    <a>longerwords</a>
                </li>
                <li class="">
                    <a>longerwords</a>
                </li>
            </ul>
        </div>
    </div>
</label>

UPDATE:

It seems like the float on my .filter-lbl, is causing this.

It's because of the inline style of my .filter-lbl.

Is there a workaround to this?

Upvotes: 0

Views: 53

Answers (1)

Pogrindis
Pogrindis

Reputation: 8091

Your dk options class does not need to be absolute unless you are looking for an overflow, absolute will ignore anything else.

Try this in your CSS

.dk_options {
  /*display: none;*/
  margin-top: -1px;
  position: relative;
  right: 0;
  width:auto;
}

This should ensure the wrapper is the right width.

Upvotes: 1

Related Questions