Replace ui-view with the loaded content

Question

I have multiple views like here : http://www.funnyant.com/angularjs-ui-router/

And I load them in my page like this

<div data-ui-view="content"></div>   --- 75% width
<div data-ui-view="sidebar"></div>   --- 25% width

Now, when the content is loaded, I want the loaded content not load inside these ui-view divs, but to replace them. Is it possible ? because if they don't replace then in my situation the float won't work and the sidebar shows bellow the content.

Help please

thanks

Answer 1

Using Bootstrap rows would this achieve your aim?

<div class="row">
    <div class="col-md-9" ui-view="content"></div>
    <div class="col-md-3" ui-view="sidebar"></div>
</div>

Answer 2

This is not possible and would be undesirable as it would leave you unable to change states. A simple workaround would be to add the width/float styles directly to the ui-view divs.

If you are determined to make it work you could create a custom directive wrapper like the solution provided here.