I have a page where I load contents from two different html pages. The problem is that the 2 views overlap each other. This is my code for the main page where both the views will be loaded.
<ion-view title="Dashboard">
<ion-content class="has-header">
<div class="row">
<div class="col" ui-view="set">
</div>
<div class="col" ui-view="set">
</div>
</div>
</ion-content>
</ion-view>
It doesn't matter what I load into these views, a single line or a slide-box they always overlap.Ionic's CSS should take care of the the divs with "col" class and keep them separate.But it doesn't seem to be happening.Am I doing something wrong or do I need to add some CSS styling to get this correct?
The problem was with the views I was loading. Each of the html page I was loading had content inside the <ion-content
> tags i.e.
... ..
The views stopped overlapping after I removed the <ion-content>
tags.
I'm not sure why this is so. If someone can help understand this it would be great. Thanks!