11

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

Sohail
  • 2,058
  • 7
  • 33
  • 57
  • Not used ui-router before, but can't you add classes to these divs and then style those with css to achieve your layout?
    – LT86 Dec 23 '15 at 12:27

3 Answers3

2

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>
Chris Wood
  • 21
  • 3
1

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.

Community
  • 1
  • 1
csbarnes
  • 1,873
  • 2
  • 28
  • 35
  • It's true you can add your id's, classes, etc. directly to the tag containing the ui-view attribute for styling purposes. However, since the body of the view is in another partial, that results in a split between the component's identity (the class or id that defines its namespace in the CSS) and its content or children. I personally find this pretty annoying. The custom directive idea seems pretty hacky. We're about to upgrade to 1.6 so maybe "true components" fixes this issue? – suigeneris Jun 12 '17 at 16:23
0

Try adding your desired sizes to the style of the containers. 

<div data-ui-view="content" style="width: 75%;"></div>
<div data-ui-view="sidebar" style="width: 25%;"></div>
zekone
  • 173
  • 7