By chris on Tuesday, 15 November 2016
Likes 0
Views 601
Votes 0
For a better design:

<div class="es-card__meta">
<ol class="g-list-inline g-list-inline--delimited">
<li class="pull-right">
<a class="btn btn-es-default-o btn-sm" href="javascript:void(0);" data-es-groups-leave="" data-id="2">
Leave this Group</a>
</li>

</ol>
</div>

Better this way:

<div class="es-card__meta">
<ol class="g-list-inline g-list-inline--delimited">
</ol>
</div>

<li class="pull-right">
<a class="btn btn-es-default-o btn-sm" href="javascript:void(0);" data-es-groups-leave="" data-id="2">
Leave this Group</a>
</li>


The code is not complete. Sorry, it's just in a hurry

But for a better look it would be better to put the btn-es-default-o parallel to "g-list-inline g-list-inline--delimited". This is the list view and the button is not well placeable. Therefore, something emerges as in the photo.
Hello Chris,
I think is not about the DOM, is the layout too narrow unable to fit the content hence the button will drop to another row.
·
Wednesday, 16 November 2016 10:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Chang,
I have found another way for a clean design.

Here can be closed. Thank you for the reply.
·
Wednesday, 16 November 2016 17:15
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.
·
Wednesday, 16 November 2016 17:34
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post