0

I'm trying to set an auto-height to a parent div that has an absolute inner-most child. Let's say I have 3 elements. One parent div, a table, and an inner-div (which has the absolute position) inside the table. By default, all of the inner-most divs are hidden. But then after click a a certain event that makes this inner-most divs appear, the parent div have to accommodate these by setting up an auto-height. But the problem with absolute elements, their dimensions cannot affect the dimensions of the parents. Can you tell me how to achieve this using JavaScript? Thank you.

<div class="parent">
    <table>
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row1<td>
                <td>row1<td>
            </tr>           
            <tr>
                <td>row2<td>
                <td>row2<td>
            </tr>   
            <tr>
                <td class="inner-div">
                    row3
                    <div class="inner-child">
                        <table>
                            <thead>
                                <tr>
                                    <th>col1</th>
                                    <th>col2</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>row1<td>
                                    <td>row1<td>
                                </tr>           
                                <tr>
                                    <td>row2<td>
                                    <td>row2<td>
                                </tr>   
                            </tbody>
                        </table>
                    </div>
                <td>
                <td>row3<td>
            </tr>                    
        </tbody>
    </table>
</div>

Please see image below.enter image description here

DaOneRom
  • 284
  • 4
  • 18

2 Answers2

0

With jQuery you can used outerHeight() and count height all elements what you need. After set height parent with https://api.jquery.com/css/

Jakub Novák
  • 54
  • 5
0

Is it necessary to use position: absolute?

Maybe you could use position: relative to position inner divs, and they will automatically affect parent's size.

606ep
  • 116
  • 2
  • Already tried that. But if you'll notice, the inner-child is under 'td class="inner-div"'. If I set position:relative to td, with position-absolute to the inner-child, that table will only fit all the contents inside that cell. – DaOneRom Apr 29 '19 at 04:24
  • I meant set position:relative to div.inner-child and avoid absolute positioning at all. That should automatically affect height of td.inner-div. If it fits desired layout of course. – 606ep Apr 29 '19 at 04:37
  • That was the first thing on my mind. But unfortunately, even if I've forced it to be that way, it never happened. So no, not the desired layout I needed. So what happened is that I got stucked with absolute positioning with the javaScript as my only solution. Thank you anyways dude! – DaOneRom Apr 29 '19 at 04:48