Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-03-2020 04:32 PM
So looking at the HTML that is rendered through the following after angularjs runs:
<small class="text-muted">
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >INC0010019</span>
</div>
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >1 - High</span>
</div>
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >Avano Ishida</span>
</div>
<div>
<span>My Group Name</span>
</div>
</small>
What you are wanting to do is get the last two divs to be side by side rather than one above the other. There are a few ways to deal with that but I will show you a CSS only one.
// Added this class to the small html element. "<small class="text-muted secondary-wrapper">"
.secondary-wrapper {
// Use flexbox to order the elements to make it easiet to align the items
display: flex;
// Allows the elements to wrap to a new line
flex-wrap: wrap;
// Most elements should be max width so there is one on each line
div {
width: 100%;
}
// Second last and last element should share a line
div:nth-last-child(2), div:last-child {
width: unset;
}
// Add some distance between the second last and last element
div:last-child {
margin-left: 1em;
}
}
The result looks like:
Note that this will always make the second last and last lines in the small element share a line.