Basically, I have a #left-bar div element that functions as a navigation bar and a topic window that includes an iFrame inside it. The page looks like this if you would run the snippet:
/* main styling page, empty because there are no pages generated manually so we don't have to deal with this for now */
body{
max-width: 1780px;
font-family:Arial, Helvetica, sans-serif;
}
#top-bar{
background-color:cadetblue;
width: 1830px;
height: 100px;
}
#logo-container{
width: 125px;
height: 100px;
margin-left:15px;
float: left;
}
#logo{
width: 100%;
height: 100%;
}
#logo-container:hover{
cursor: pointer;
}
#search-bar-container{
position: relative;
top: 60px;
left: 220px;
width: 366px;
height: 30px;
}
#search-bar-container > input{
position: absolute;
left: 0px;
width: 100%;
height: 100%;
font-family: 'Times New Roman', Times, serif;
font-size: large;
}
#center-main{
background-color: red;
width: 1830px;
height: 805px;
margin-top: 5px;
position:relative;
outline: thin solid black;
}
.document{
overflow: auto;
}
#left-bar{
background-color: yellow;
width: 220px;
height: 775px;
position: relative;
float: left;
resize: horizontal;
}
#left-bar-icons{
background-color:#b3b4b5;
width: 100%;
height: 30px;
position: relative;
outline: thin solid black;
}
#reset-container{
background-color: #b3b4b5;
width: 20px;
height: 20px;
position: relative;
top: 5px;
left: 195px;
}
#nav-bar-reset-icon{
width: 100%;
height: 100%;
}
#reset-container:hover{
cursor:pointer;
}
#toc{
background-color: lightgray;
border-right: thin solid black;
width:99.5%;
height:770px;
overflow: auto;
padding-top: 5px;
}
.content{
padding: 3px;
margin-left: 5px;
}
.content-drop{
float:left;
}
.content-drop:hover{
cursor: pointer;
}
.content-link{
color: black;
text-decoration: none;
}
.l1-drop-container{
margin-left: 20px;
margin-top: 4px;
width: 100%;;
display: none;
}
.l1-content-link{
display: inline-block;
text-decoration: none;
color: black;
}
.l2-drop-container{
margin-left: 30px;
margin-top: 4px;
width: 100%;
display:none;
}
.l2-content-link{
text-decoration: none;
color: black;
margin-bottom: 5px;
}
.l1-content-drop:hover{
cursor:pointer;
}
#topic-window{
background-color:#e9e9ed;
width: 1610px;
height: 100%;
position:relative;
float:right;
outline: thin solid black;
}
#docWindow{
width: 100%;
height: 100%;
position:relative;
float: right;
}
.show-l2-content{
display: block;
}
.show-left-bar{
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Udex</title>
<link href="style/index.css" rel="stylesheet" type="text/css"/>
<link href="style/dropdown.css" rel="stylesheet" type="text/css"/>
<link href="style/searchbar.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top-bar">
<div id="logo-container">
<a href="placeholder_page.html" target="docWindow">
<img src="images/ulak.png" alt="ulak-logo" id="logo">
</a>
</div>
<div id="search-bar-container">
<input type="text" placeholder="Search documents...">
</div>
</div>
<div class="main" id="center-main">
<div class="nav-bar" id="left-bar">
<div id="left-bar-icons">
<div id="reset-container">
<img src="images/reset.png" alt="reset-nav-bar" id="nav-bar-reset-icon">
</div>
</div>
<div class="toc-container" id="toc">
<div class="content">
<img id="lib-info" class="content-drop" src="images/plussearch.png" >
<a class="content-link" href="#">Library Information</a>
</div>
<div class="content">
<img id="feat-ovw" class="content-drop" src="images/plussearch.png" onclick="dropDown('feat-ovw')" >
<a class="content-link" href="#">Feature Overview</a>
<div class="l1-drop-container">
<img class="l1-content-drop" id="feat-dtsht" src="images/plussearch.png" onclick="l1dropDown('feat-dtsht')">
<a class="l1-content-link" href="feature_table_names.html" target="docWindow">Feature Datasheets</a>
</div>
</div>
<div class="content">
<img id="feat-chg" class="content-drop" src="images/plussearch.png" >
<a class="content-link" href="#">Feature Changes</a>
</div>
<div class="content">
<img id="ran-fun" class="content-drop" src="images/plussearch.png" >
<a class="content-link" href="#">RAN Functions</a>
</div>
<div class="content">
<img id="cld-air" class="content-drop" src="images/plussearch.png" >
<a class="content-link" href="#">CloudAIR</a>
</div>
<div class="content">
<img id="net-inf" class="content-drop" src="images/plussearch.png" >
<a class="content-link" href="#">Network Infrastructure</a>
</div>
</div>
</div>
<div class="document" id="topic-window">
<iframe id="docWindow" name="docWindow" src="placeholder_page.html"></iframe>
</div>
</div>
<script src="javascript/Search.js"></script>
<script src="javascript/dropDown.js"></script>
<script src="javascript/parent_dropDown.js"></script>
<script src="javascript/l1_dropDown.js"></script>
<script id="table_anchors">
var tableNames = ['NRDUCell', 'NRDUCellPucch', 'NRDUCellUlTaConfig', 'gNBRlcParamGroup', 'IntraFreqCellReselectionInfo', 'CellReselectionInfoCommon', 'gNBOperator', 'NRDUCellPrach', 'NRDUCellPusch', 'NRDUCellCsirs', 'NRDUCellPdsch', 'CellResServingFreqInfo', 'NRDUCellUlPcConfig', 'gNBDUDrxParamGroup', 'NRDUCellTrp', 'NRDUCellAlgoSwitch', 'NRDUCellUeTimerConst', 'NRDUCellSelConfig', 'NRDUCellDlSch', 'NRDUCellPdcch', 'NRCUCell', 'NRDUCellCoreset', 'gNodeBConf', 'NRDUCellIntrfParam', 'gNBTrackingArea', 'gNBSibConfig', 'NRDUCellCarrMgmt', 'NRDUCellSrs', 'NRDUCellPagingConfig', 'None', 'NRDUCellChnPwr', 'NRDUCellRimConfig', 'NRDUCellNsaDcConfig'];
function createAnchorTags() {
var l1DropContainers = document.querySelectorAll('.l1-drop-container');
// Iterate through each table name
for (var i = 0; i < tableNames.length; i++) {
var tableName = tableNames[i];
const htmlScript = `<div class="l2-drop-container">
<a class="l2-content-link" href="feature_tables/${tableName}/homepage_${tableName}.html" target="docWindow">${tableName}</a>
</div>`;
var temporary_container = document.createElement('div');
temporary_container.innerHTML = htmlScript;
for (var j = 0; j < l1DropContainers.length; j++) {
l1DropContainers[j].appendChild(temporary_container.firstChild.cloneNode(true));
}
}
}
createAnchorTags();
</script>
</body>
</html>I tried adding resize: horizontal; to #left-bar in my CSS file, but I can’t really see the resize button that pops in one of the corners when you add resize.
I’m thinking the problem could be some kind of elements overlapping each other or something but even so, I don’t know why and what would overlap.
Help would be appreciated.
2
Answers
I found the problem. Pretty basic as I thought it would be.
I just had to make the
overflow: visible;literally anything butoverflow: visible;. Changing it tooverflow: auto;worked, I didn't test the others but my bet is on them working too.The thing is when you do resize you also have to do an overflow: auto on the same element.
so by just adding an overflow: auto to #left-bar will do the trick.
But as you can see this isn’t the desired behaviour you wanted.
Try this instead
codepen
(Note: I have reduced the HTML and CSS for simplicity it should but implimentation remains the same.)