I'm utilizing the flex property to create a responsive layout for my web application.
In order to enable resizing of my navigator panel, I have implemented jQuery UI. However, upon triggering the resize event, jQuery UI is adding a hardcoded height to my element in the DOM, even when I specify the handles in the resizable settings.
When the resize event occurs, the following code is inserted into the DOM:
<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
I am looking to remove all styles from the element except for the width.
Below is the code snippet for reference:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
.mainWrapper_1
{
display: flex;
background: gold;
height: 100%;
}
.mainWrapper_1 .navigatorManager
{
background: tomato;
flex: 0 0 30px;
}
.mainWrapper_1 .mainWrapper_2
{
background: gray;
flex: 1;
display: flex;
flex-direction: column;
}
.topSideBar
{
height: 50px;
background: yellow;
}
.mainWrapper_3
{
flex: 1;
background: cyan;
display: flex;
}
.navigator
{
flex: 0 0 auto/*100px*/;
background-color: green;
}
.mainWrapper_4
{
flex: 1;
display: flex;
flex-direction: column;
background: red;
}
.tabs
{
height: 50px;
background: pink;
}
.mainWrapper_5
{
flex: 1;
background: magenta;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<body>
<div class="mainWrapper_1">
<div class="navigatorManager">side</div>
<div class="mainWrapper_2">
<div class="topSideBar">
top side bar
</div>
<div class="mainWrapper_3">
<div class="navigator">
navigator
</div>
<div class="mainWrapper_4">
<div class="tabs">
TABS
</div>
<div class="mainWrapper_5">
MAIN
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"});
});
</script>
</html>