Skip to content

Expand / collapse not scrolling #10

@klacus

Description

@klacus

When the container div is within a div that has a given size and the container div itself is set to "overflow-y: auto;" the expand and collapse signs are not scrolling.

But if I set the position property of exp_col and exp_col_empty to relative in Aimara.css then everything works within my structure and in your example also.

I am not sure if this is a bug in my code or in Aimara.css.

Modified Aimara.css:

img.exp_col {
	position: relative;
	margin-top: 4px;
	margin-left: -20px;
	vertical-align: sub;
}

img.exp_col_empty {
	position: relative;
	margin-top: 4px;
	margin-left: -20px;
	vertical-align: sub;
	width: 16px;
}

My Layout and CSS:

<div id="content">
        <div id="tabAssets" >
            <div id="treeAssets"></div>
            <div id="assetDetails"></div>
        </div>
</div>
#content {
  display: block;

  /* make the content to fill entire page (parent is body) - header and footer */
  position: absolute;
  top: 50px;
  bottom: 30px;
  left: 0px;
  right: 0px;
  padding: 5px;
}

#tabAssets {
  display: grid;
  grid-template-columns: 2fr 6fr;
  grid-template-areas:
  "treeAssets assetDetails"
  ;
  grid-gap: 5px; 

  /* make the content to fill entire parent */
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  padding: 5px;
}

#treeAssets {
    grid-area: treeAssets;
    display: inline-block;
    max-height: inherit;
    overflow-y: auto;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions