All geek questions in one place

How can I make child div containers match the width of the largest child in IE7?

It seems that this should be a duplicate - I found a lot of similar questions, but no one answered my work. If I missed one, point it to me and I will delete this one.

I have an absolutely positioned div containing several child divs. I want the container to expand to the width of the widest child, and all other children to expand to the same width. The container must have a minimum width and maximum height; if there are too many children, it should scroll.

Thus, this is similar to the behavior of a drop-down list, but it is used in a different context.

In the solution, I started working on Chrome, Firefox, and IE8, but not in IE7 (standard mode), where children do not expand to the width of the container. I tried a number of changes, some of which made the children expand, but all this led to additional problems. What is the right way to do this?

I created the following example to illustrate the problem:

<html>
<head>
<style>

.container {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 100px;
    max-height: 100px;
    border: 1px solid #999;
    overflow-x: hidden;
    overflow-y: auto;
}

.entry {
    display: block;
    width: auto;
    height: 20px;
    padding: 3px 20px 3px 5px;
    white-space: nowrap;
    background: #eee;
}

</style>
</head>
<body>
    <div class='container'>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
    </div>
</body>

+3
source share
2 answers

In IE7, the parent div needs a certain width for width:100%or width:autofor the children to work properly. Unfortunately, for you, determining the width of the parent is counterproductive, since you want the size of the parent to be dynamic relative to the largest child, and not static.

, , , - IE7, JavaScript , .

JavaScript, :

$(function() {
    /* function finds largest width of the .entry child of .container
    and assigns that width to the parent .container.
    This is for IE7 bug that requires a defined parent width in order for 
    width:auto to work on the children elements
    */
    var elemWidth = 0;
    var maxWidth = 0;
    $('.container')
        .find('.entry')
        .each(function() {
            // iterate through .entry and assign largest width to var elemWidth
            if ( $(this).width() > elemWidth ) {
            elemWidth = $(this).width();
            }
         });
    maxWidth = elemWidth + 30; // extra 30px spacing to compensate for y-overflow
    $('.container').width(maxWidth);
});

jsfiddle: http://jsfiddle.net/qG8Qf/1/

+2

...

$(function() {
    var maxWidth = 0;
    $('.container')
        .find('div')
        .each(function() { maxWidth = Math.max($(this).width(), maxWidth) })
        .each(function() { $(this).width(maxWidth) })
        .width(maxWidth);
});

EDIT: IE7, , . , - ?

0

Source: https://habr.com/ru/post/1795859/

More articles:


All Articles