I am using angulars UI router to load each page separately. I have header navbar and sidebar inside header.html and main-content(dynamic) in login.html
The login html page is getting overlapped with sidebar and footer because it is loaded separately. How do I fix this? I applied wrapper(custom css) class but it didn't affect the layout at all.
Here the link: http://angularspring-management999.rhcloud.com/default.html
Wouldn't something like this work using bootstraps grid?
<div class="row"> <div class="col-xs-3"> <div ui-view="view-1"></div> </div> <div class="col-xs-9"> <div ui-view="view-2"></div> </div> </div>
I've only ever used 1 ui-view element in my apps, and then created custom directives for this type of functionality. But according to the docs your way should be fine. Just be careful that sometimes ui-view can override certain template properties.