Hi,
I dont want to change the left or width of my child div while resizing parent div from either side ie. left or right.
Below is the source output for your reference:
<div class="bar ganttRed ui-resizable ui-draggable" id="ID0" style="top: 69px; left: 130px; display: inline-flex; position: absolute; width: 74.34000015258789px;">
<div class="fn-label"> Planni...</div>
<div class="text" style="top: 0px; margin-left: 66px; display: inline-flex;">ROI<br>40%</div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90; background-color: rgb(255, 255, 255);">
</div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; background-color: rgb(255, 255, 255);">
</div>
</div>
Bar div is parent div of class='text'. Now while i am resizing it to west(left) the left of Bar is decreasing and the text is moving towards left and if i am resizing it to east(right) the width of bar is increasing letting the bar over my text.
I want my text to be at fixed position while resizing it from west and to move along with bar if moving towards east.
Below is code for text:
var txt = core.createText(
dl,
day.customClass ? day.customClass
"",
day.desc ? day.desc
"",
day.label ? day.label
"",
day.dataObj ? day.dataObj:
null,element.data);
$(txt).css({
'top' : 0,
'left' :_bar[0].clientWidth+5,
'display':"inline-flex"
});
_bar.append(txt);
//Styling for Text:
.text{
font-weight: bold;
font-size: 10px;
color: #000;
opacity: .7;
position:inherit;
}
Please help me out to make the text aligned to the Parent div