How to set bootstrap class `pull-right` when element is loading dynamically? - html

Question

I have a navbar inside the tab-content that has pull-right bootstrap class ,we are rendering element js-property-panel based on user selection so when this element loads it is overlapping on navbar. So both are iniside cols 10. How can i set position of navbar using pull-right when js-property-panel loads it should moved to right ?
main.html
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
<div role="tabpanel" class="active" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="canvas" style="height:80vh;"></div>
<div id="js-properties-panel"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Are you looking for a pure css solution? As this can be achieved with
javascript pretty easily.
Also here is a link of css tricks that might be useful to
introduce conditional styling using css.
Update:
Here is how far I could get to- please follow the fiddle here
<div class="col-md-10" ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed,'tabContentCollapse-padding':isCollapsed}">
<div class="tab-content row">
<div class="col-md-6 col-md-push-6 navwrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
//navbar stuff here
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div role="tabpanel" class="col-md-6 col-md-pull-6" id="tab">
<div>
<div id="home" class="fade in active">
<div class="modeler">
<div id="js-properties-panel" class="panel-contents">
sample content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Observations:
What you are trying to achieve is controlling the style of an element
higher up the DOM tree using a state an element lower down the tree.
Neither those elements are direct parent-child nor are those siblings
so you could control using common class and may be adding a
:not(:empty) selector.
You could still use the column-ordering to a certain extend though