I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing this issue?
Before Resize
After Resize
jQuery Function Used to Generate Elements:
function create_bar() {
var table_container = $("<ul />", {
class: "app_container_T t_ul ui-widget-content"
});
table_container.resizable({ handles: "n" });
var row = $("<li />");
var menu = $("<ul />", {
class: "menu_T t_ul"
});
var section_1 = $("<li />");
var add_element_button = $("<button />", {
text: '+',
click: add_content_selection_element,
class: "large_menu_button_T"
});
section_1.append(add_element_button);
/*Remaining buttons are created and added similarly*/
menu.append(section_1);
row.append(menu);
table_container.append(row);
$('body').append(table_container);
CSS Styles:
.app_container_T {
position:fixed;
bottom:0;
left:0;
z-index: 998;
background-color:grey;
margin: 0;
padding: 0;
}
.app_container_T > li {
display: inline-block;
}
.t_ul {
list-style: none;
}
.app_container_T * {
box-sizing: border-box;
border-radius:5px;
vertical-align : text-bottom;
}
.menu_T {
background-color:lightblue;
padding: 0px;
width:60px;
}
.large_menu_button_T {
background: #0016f0;
color: #ffffff;
height: 50px;
width: 50px;
margin: 3px;
font-size: 20px;
border-radius:10px;
}
.ui-resizable-n {
cursor: n-resize;
width: 100%;
top: 0px;
left: 0;
border-top: 5px solid #f00;
z-index: 999;
}
Generated HTML Structure:
<ul class="app_container_T t_ul ui-widget-content ui-resizable">
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90; display: block;"></div>
<li>
<ul class="menu_T t_ul">
<li>
<button class="large_menu_button_T">+</button>
<button class="large_menu_button_T">T</button>
<button class="small_menu_button_T options">o</button>
</li>
</ul>
</li>
</ul>