帶標籤的依賴內容的div

<div id="combobox"> 
    <label><input type="checkbox" id="tag3" 
     name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label><br/> 
    <label><input type="checkbox" id="tag2" 
     name="checkbox" onclick="toggleTag('tag2')"/>fds</label><br/> 
</div>

我使用div作爲帶標籤複選框的容器。對應的CSS：帶標籤的依賴內容的div

div#combobox 
{ 
    max-height: 150px; 
    overflow: auto; 
    border: 1px solid #000000; 
}

而這不正是我想要的 - 垂直滾動條（無橫一），加蓋高度依賴於內容的寬度。有一個例外 - 它不考慮垂直滾動條的寬度。所以當有幾條線/複選框並且不需要垂直滾動條時 - div的寬度是最寬的複選框的寬度。但滾動條上出現時，所述div的寬度是不變的： enter image description here

的label被分成2行。我解決了這個問題與span：

<span><label><input type="checkbox" id="tag4" 
    name="checkbox" onclick="toggleTag('tag4')"/>InitializeWindow</label></span><br/>

和：

span 
{ 
    white-space:nowrap; 
}

但div的寬度仍然是不正確的：

enter image description here

有沒有什麼辦法讓使div只要html/css考慮滾動條的寬度？如果沒有，用javascript做到這一點的最好方法是什麼？

來源

2013-05-04 NPS

你找到解決你的問題？ – 2013-05-11 09:19:25

我會建議你使用這樣的：如果沒有激活的滾動

(function($) { 
    $.fn.hasScrollBar = function() { 
     return this.get(0).scrollHeight > this.height(); 
    } 
})(jQuery);

所以，你可以檢查：

$('#combobox').hasScrollBar(); // returns true if there's a `vertical` scrollbar

後，您可以用擴展div的大小一些JavaScript ...這可能適合你：

$('#combobox').css("width",$('#combobox').width+13); //這只是一個使用13px的例子，但你需要在所有的兄弟測試它看看它是如何工作

來源

2013-05-04 10:29:19

我沒有使用jQuery，雖然我幾乎做了你所描述的 - 檢查是否有一個滾動條，並相應地改變了JS的寬度。儘管如此，不能將它標記爲被jQuery接受。 – NPS 2013-05-11 09:50:35

@NPS好的沒問題，我只想看看我是否幫忙 – 2013-05-11 09:53:27

帶標籤的依賴內容的div

回答

相關問題