Issue by positioning of nested views

1

Hi,

I’m trying to achieve something quite simple in appearance but am somehow struggling with the CSS (or at least I don’t figure out which directives I should use).

I have illustrated the issue here: http://codepen.io/krisa/pen/iudpB

Ideally, there should be a list of friends on the left side (infinite scroll ideally) in the 10% column, and on the right side, this should be a nested view, so that when I click on a friend I display more information about him (this is not built in the demo for the sake of simplicity).

The problem is that, as we can see on the demo, the nested view (which display the word “content” is overlapping on the left side, instead of appearing, right of the col-10 div. The issue seems to be related to the “ion-content” but these ion-content are still useful because they provide the scrolling, etc.

Is there a way to achieve what I expect with the ionic directives (i.e. am I missing anything or building something wrong?) or is it just not supported and I should write my custom CSS for that?

2

Try using ion-scroll instead, this should get you in the right direction.

3

Thanks, it looks better but still buggy. the left panel is not scrolling, and when trying to scroll the right panel, it scroll the whole screen while the right panel shouldn’t move (actually it shouldn’t scroll anything)

4

This was meant to get you started, didn’t put too much thought into it.

I updated the codepen to be more “finished”

5

wow, 4 line of CSS for fixing 3 bugs, that’s quite effective :wink: Much appreciated and thank you very much!!

Though, this looks a bit like a “workaround” (which could have side effects somewhere else??):

.scroll-view{
  position: absolute !important;
  bottom: 0 !important;
  top: 0 !important;
  width: 50% !important;
}

Is it planned to support “natively” such nested views sometimes soon?

6

Yes, this is a work around. Ideally you would create your own class and apply it to the ion-scroll.

There is plans to have this and we’re working on it.

7

You might want to look at this too :

8

Yeah finally the “workaround” didn’t work well for me, I’m doing something very similar to the link of Calendee and a click on an item ruins the layout.

I will try this “multiple-views” directive, it seems to do exactly what I need thank you for the info!