I'm having trouble using css to position some buttons on the right side of my header, while also ensuring that the text collapses if it becomes as wide as the buttons. I want to maintain justification and show ellipsis for the main text of the breadcrumb trail, but I'm struggling to make it work.
Here's a link to the Fiddle for reference: https://jsfiddle.net/hLcm8jsf/
I've tried using justify-content and text-overflow, but they don't seem to achieve the desired effect. The buttons are just jumping down to a new row. I would appreciate any help as I'm still learning css.
body {
font-size: 16px;
background-color: #222;
color: white;
}
h2 {
font-size: 2em;
}
a {
color: rgb(85, 109, 172);
}
a:hover {
color: rgb(85, 109, 172);
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
.row {
margin: 0px;
padding: 3px;
width: 100%;
}
.rowjustify {
justify-content: space-between;
}
.header {
background: #002550;
display: flex;
height: 40px;
overflow: hidden;
white-space: nowrap;
}
.textbreadcrumb {
margin-top: 11px;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
} <div class="row header rowjustify">
<div class="textbreadcrumb">
<a href="" ng-show="showPhotos||showImage||showConfig" ng-click="setPage('Albums')">Albums</a>
<span ng-show="true">>
<a href="" ng-click="setPage('Photos')">{{album name here}}</a>
</span>
<span ng-show="showImage"> > {{photo name here, which can be a long name}}</span>
</div>
<div ng-show="showImage">
<button type="button" class="btn btn-primary btn-sm" ng-click="prevImage()" ng-disabled="photo_id==0">Prev</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="nextImage()" ng-disabled="photo_id >= gallery.albums[album_id].photos.length-1">Next</button>
<button type="button" tooltip="Set as Album Cover Photo" class="btn btn-primary btn-sm" ng-show="showLogin" ng-click="setCover()">Set As Cover</button>
</div>
</div>