Utilizing bootstrap to create div elements. Check out the fiddle link below:
On my page, I have 4 divs - two on top and two at the bottom. The height of all 4 card divs should remain the same and not change.
In the last div, there could be one, two, or three nested divs. The maximum number of nested divs will be three.
If there is only one nested div, its height should be 100% the same as the first 3 divs.
In the last card, if there are two nested divs, they should each occupy 50% and have a scroll function. For three nested divs, each should occupy (100% / 3).
Only the last card's height should automatically adjust based on the number of nested divs within it.
Seeking assistance on how to achieve this using AngularJS for the front end. I have a flag "totalcount" that provides the count of nested divs. How can I set the height accordingly?
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.row{
border:1px solid black;
padding:10px;
}
#responseData{
display:inline-block;width:40%;border:1px solid red;padding:3px;
}
#responseDataa{
display:inline-block;width:40%;height:45px;border:1px solid red;padding:3px;overflow:auto;
}<div class="container">
<div class="row">
<div class='col-md-12'>
<div id="responseData">
Why do the divs stack on top of each other when the line gets long? Shouldn't they be side by side due to the display property being set to inline-block?
</div>
<div id="responseData">
Why do the divs stack on top of each other when the line gets long? Shouldn't they be side by side due to the display property being set to inline-block?
</div>
<div id="responseData">
Why do the divs stack on top of each other when the line gets long? Shouldn't they be side by side due to the display property being set to inline-block?
</div>
<div id="responseDataa">
Why do the divs stack on top of each other when the line gets long? Shouldn't they be side by side due to the display property being set to inline-block?
</div>
<div id="responseDataa">
Why do the divs stack on top of each other when the line gets long? Shouldn't they be side by side due to the display property being set to inline-block?
</div>
</div>
</div>
</div>