Develop Reference

How to pop out nested child component outside of ancestor that has overflow hidden?

I have a sliding carousel with its overflow-x property set to hidden that contains a number of items shown 4 at a time. Within the items, there is a button that triggers an absolutely positioned pop-out menu that is longer than the carousel container and that is relative to its parent item. When the menu is visible, its full height is cut off and becomes scrollable.
What I would like is to have the pop-out menu fully visible without being cut off by the carousels overflow. Is this possible?
Ideally, I would like to find a CSS solution first before resorting to JS. The only information I can find in regards to this on the web are examples only related to parent and direct child elements and do not take into account nested child elements, so any help would be appreciated.
<div class='carousel'> //has overflow-x hidden
<div class='item'> //multiple item elements
<div class='wrapper'> //relative positioned wrapper
<div class='pop-out'> //absolutely positioned pop out
<div class='pop-out-list'> //list that contains multiple items which are cut off
<div class='pop-out-item'>
...
</div>
</div>
</div>
</div>
...
</div>
Here is a fiddle better demonstrating this problem
https://jsfiddle.net/84p9gkru/

just use a z-index property higher than carousel in pop-out-list like
.pop-out-list{
z-index:99999;
}

Is there a value of TOP in CSS that can dynamically position an element based on the length of the previous element?

I am very new to CSS..
I would like to know if there is a way to dynamically position a div element based on the length of the previous div element.
Example:
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
If these div elements were full width each and i want one to come after the other based on the length of the previous one without adjusting the length on the top property myself.
Is this possible or is there any top value that can be used?
Thank you so much.

As of now, there is no way that you can style a div (or any other element for that matter) dynamically on the basis of a previous element. But you have some options here -
either you can use Javascript to manage the styles of elements dynamically, or,
you can use CSS FlexBox Model or CSS Grid to position and change height/width of elements, which is highly recommended and super powerful for making any layout of your choice.
Here are some places which I used to learn flexbox -
freeCodeCamp flexbox tut
Brad Traversy flexbox crash course
Now for CSS grid-
Brad Traversy CSS Grid
freeCodeCamp CSS Grid

Calculate correct height of div based on different children in slider?

I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!

If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>

You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here

Ordering N elements into columns, via ng-repeat

So I have a bit of a head-scratcher on my hands.
I'm using ng-repeat to output a list of items that are positioned inside a widget.
The widgets are resizable, with three available sizes. The first two are only wide enough to have one column of elements, so displaying them in the correct order is trivial. However, when the widget is expanded to twice width, more elements are displayed at 50% of the width. The elements are arranged by default using display:inline-block; float: left which means that I end up with the ordering going from left -> right, whereas I need them to be ordered vertically.
Initially I was performing two ng-repeats with a column wrapper around each, using splice to split the results, however this causes problems with ordering, because each set of elements is only ordered relative to its container column.
So here's some stripped down code from one of the widgets:
<div class="item review" ng-repeat="review in reviews | orderBy:'date':true | limitTo:14">
<div class="header">
...
</div>
<div class="body">
<div class="comment">
<p>{{review.comments}}</p>
</div>
</div>
I would quite happily use ng-if alongside an $index comparison, something like ng-if="($index+1)==7" on the element I'd like to insert before a group, but since the ng-repeat is on the items themselves, I can't wrap them with that method.
I've tried various ideas with no real success so far. There are things I can do outside of Angular but it's messy and I would like to keep in within Angular, I'm sure what I'm after is possible. Can somebody save me?
EDIT: Illustration of what I mean

working plunk:
http://plnkr.co/edit/lP3vc57k98gPUEbShHWT
You can use css3 column-count or its shorthand columns:
ul {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}

Create horizontal ScrollableView with dojox.mobile

I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a
<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
which contains several div elements which float left. However, in this case the elements are not displayed in one single row:
http://jsfiddle.net/wf6NZ/
I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:
http://jsfiddle.net/N7MrD/
However, this requires calculation of the resulting width of all elements which I want to avoid.
So the question is: Is it possible to achieve the results of the second link without the helper div?

Try to define the style 'white-space: nowrap' in any container div.
For example,
<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">