Information not staying inside the containing div

Question

I've got a div table being built by a ui:repeat inside a div, but it is not staying within the borders of the containing div.

The goal is for the containing div to restrict the size and have a scrollbar to see the remainder of the table inside.

Base on my research, it should just be an overflow-y: auto in the css for the containing div, but the excess pushes down the page no matter how I load the information.

Layout snippet:

<div id="idCenterRow">
    <div id="idCenterRowMain">
        <h:form id="idForm"  enctype="multipart/form-data"  prependId="false">
            <ui:include src="#{Bean1.Content()}"></ui:include>
        </h:form>
    </div>
</div>

Content Page:

<p id="idCenterContent">
    This is some text.
        <div id="idTableMyList">
            <!--<c:set value="#{Bean2.setPersonalList(Bean3)}" var="tickle"></c:set>-->
            <ui:repeat var="x" value="#{Bean2.pl}" size="#{Bean2.getPLSize()}" varStatus="myVarStatus">
                <div class="classTableMyListRow">
                    <div class="classTableMyListRowData"><h:outputText class="classTableMyListRowDataText" value="#{myVarStatus.index+1}" /></div>
                    <div class="classTableMyListRowData"><h:outputText class="classTableMyListRowDataText" value="#{x[0]}" /></div>
                    <div class="classTableMyListRowData"><img class="classTableMyListRowDataPicture" src="#{Bean2.path}#{Bean2.folder}#{x[1]}" /></div>
                </div>
            </ui:repeat>
        </div>
</p>

CSS:

#idCenterRow
{
    height: 70%;
    height: 85vh;
    max-height: 85%;
    max-height: 85vh;
    width: 100%;
    width: 100vw;
    max-width: 100%;
    max-width: 100vw;

    border: 0px solid #e9f413;
    vertical-align: top;
    display: table-row;
}

#idCenterRowMain
{
    height: 100%;
    height: 85vh;
    max-height: 100%;
    max-height: 85vh;
    width: 70%;
    width: 70vw;
    max-width: 70%;
    max-width: 70vw;

    margin: 0px;
    padding: 0px;
    border: 1px solid #13ecf4;
    vertical-align: top;
    overflow-y: scroll;

    display: table-cell;
    vertical-align: top;
}

#idTableMyList
{
    height: 80%;
    height: 80vh;
    max-height: 80%;
    max-height: 80vh;
    width: 70%;
    width: 70vw;
    max-width: 70%;
    max-width: 70vw;

    text-align: center;
    margin: 0px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    color: #aaaaaa;
    overflow: auto;

    border: 1px solid #f702f7;

    vertical-align: top;
    display: table;
} 



.classTableMyListRow
{
    height: 75%;
    height: 50vh;
    max-height: 75%;
    max-height: 50vh;
    width: 100%;
    width: 70vw;
    max-width: 100%;
    max-width: 70vw;

    border: 1px solid #f702f7;

    display: table-row;
}

.classTableMyListRowData
{
    height: 100%;
    height: 50vh;
    max-height: 100%;
    max-height: 50vh;
    width: auto;

    border: 1px solid #f702f7;

    vertical-align: top;
    display: table-cell;
}

.classTableMyListRowDataText
{
    color: #aaaaaa;
}

.classTableMyListRowDataPicture
{
    height: 100%;
    height: 50vh;
    max-height: 100%;
    max-height: 50vh;
    //width: 35%;
    //width: 35vw;
    width: auto;
    //max-width: 35%;
    //max-width: 35vw;

    object-fit: fill;
    -o-object-fit: fill;
    -moz-object-fit: fill;
    margin: auto;

    display: block;
}

After doing some additional testing, the assumption that the ui:repeat was drawing my table past the restriction on the containing div are wrong. I tested with rows of plain text and given enough rows, it pushes the information outside the containing div instead of causing it to scroll. — Kamurai, May 03 '17 at 03:11
Please do not add "help please" and other such chatty material to your titles, it's considered a bit spammy on most tech sites. Succinct titles are much preferred, thanks! — halfer, May 03 '17 at 17:09

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

After reading this post: Using max-height on DIV element

I tried removing the display: table elements in the CSS and the behavior is working now.

I restored the display: table-row and table-cell to line up the information, but at least the overflow issue is resolved.

edited May 23 '17 at 11:54

Community

1
1

answered May 03 '17 at 13:49

Kamurai

143
2
4
19

After further experimentation, removing a "display: table-cell" from the containing div's CSS allowed a different page to have a table restricted to the containing div. Removing that table-cell also did not affect the layout. – Kamurai May 03 '17 at 17:18

Information not staying inside the containing div

1 Answers1