How to align to highest column in the next row of a loop? I would like it to look like in the first image, not the second. Divs are rendered in loop:
<div class="container">
<div class="row">
<? foreach($a as $b): ?>
<div class="col-xs-12 col-sm-6 col-md-4"" >
$b->foo
</div>
<? endforeach ?>
</div>
</div>
First image (undesirable):
Second image (desirable solution):
This is a side effect of floating, you will need to clear the float on every x-th element, with different “x” for the sm and md breakpoints.
The nth-child selector helps with that. To not have to select the columns based on any specific col-xy-foo class, I would simply go with the child selector here, .row > :nth-child(…), the row itself made more uniquely selectable by an additional class or id, if necessary.
Related
I don't find any clue to do that from the Semantic UI documentation/API, is there a clean way to do that?
For now, what I see is to play with :
$('.ui.accordion > .title').addClass('active')
$('.ui.accordion > .content').css('display', 'block')
You actually can do this like so:
$('.ui.accordion .individual').each(function(i){
$(this).parent().accordion('open',i);
});
You just iterate through each individual element to get its index position, then ask the parent (the accordion) to open each one. This way you still get the transition.
Here is the answer:
onOpen(commentID: string){
jQuery(`.replies${commentID}`).accordion('open', 0);
}
<div class="ui accordion replies{{commentID}}">
<div class="title" (click)="onClick(commentID);">
</div>
<div class="content">
hello
</div>
</div>
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
I want to wrap columns in set of css classes .. some thing like below. However its not working.
#grid.GetHtml(
#
<div class="prod_box">
<div class="center_prod_box">
columns: grid.Columns(grid.Column("Model"),
grid.Column("DiscountCost",
style:"reduce"))
,displayHeader:false
</div>
</div> );
I have the following HTML code:
<table id="userPlaylistTable" cellspacing="0" cellpadding="0">
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 1 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 2 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 3 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
Basically, now if I define my css as:
css=table#userPlaylistTable div[class='listArrow up']
It picks the first such element it finds. But, how would I have to define my css, so that it picks second element of this type?
So, basically how would I define my css to pick a particular element, if multiple elements of the same kind exist on the page?
Could someone please help me with this query?
Thanks.
You need to do something like:
css=table#userPlaylistTable>div[class='listArrow up']:nth(1)
css=table#userPlaylistTable>div[class='listArrow up']:nth(2)
This will give you the 2nd and the 3rd instance
add [1] which is the index into the array. usually 0 based, so [1] is the second element
css: #userPlaylistTable .listArrow.up:nth-of-type[2]
Instead of [2] replace with item you want to select
Description:
id is # -- #userPlaylistTable
class by . listArrow up, but we have space between class name so replace space with . -- .listArrow.up
:nth-of-type(n) will select child
I have a page which brings database entries in and displays them, and i have given every other entry/listing this style:
hjl:nth-child(odd) { background: #F2F2F2;}
And this is my HTML/PHP
<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p>
</div>
<div class = "hjljobinfo">
<h1><?php echo $rsjobinfo['job_title'];?></h1>
<h2><?php echo $rsjobinfo['company_name'];?> |</h2>
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p>
</div>
</div>
</a>
However, when i try to wrap each entire entry in an anchor tag, every entry changes to the background style listed above, no longer recognising the 'odd'.
This is the HTMl that's generated:
<a href="paging.php?job_id=253">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br />11 Jul 2011</p>
</div>
<div class = "hjljobinfo">
<h1>Entry One</h1>
<h2>Company |</h2>
<p class = "location">New York, NY, USA</p>
</div>
</div>
</a>
I'm not used to using nth-child so i'm not sure how to fix it (i've tried playing around with adding an 'a' to the above but its not making any difference).
Does anyone have any pointers they can kick me towards?
Thanks
Dan
:nth-child works between siblings documentation. That means that the counter (odd in this case) applies to elements with the same parent.
If you wrap each .hjl in a a then they no longer share the same parent so the selector tries to find odd .hjl elements inside the a element and finds just the first one (the only one that exists in the a).
So, you should change your selector to work with a tags (perhaps apply a class as well for more precision)
on another note, placing div and h1/h2 elements inside a a tag is invalid and will cause other issues.
You need to add ":" right in front of it, like so:
YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}
Your element is something like tr, li, or anything like that. Hope that helps.