Issue
I have some dynamic text on the left and a button on the right something like below:
<div class="dynamic-text">
{{ dynamicText }}
</div>
<div class="some-button">
<cv-button
id="some-btn"
kind="tertiary"
size="default"
:icon="someIcon"
@click="someBtnFunction"
>
{{ someBtnLabel }}
</cv-button>
</div>
with a style:
.some-button {
float: right !important;
padding-bottom: 2rem;
}
As you can see, I have the button set to float-right currently.
The current behavior that I see is that when I narrow the window, the button goes below the text and the button is right-aligned. I want to make it so that when the text and button are on same line, I want the button to be right-aligned, but when the button goes below the text, I want the button to be left-aligned. And the thing to remember is that the text on the left/above are dynamic so the length varies and depending on what the text is, the button goes below at different browser width.
Any idea? Suggestions? FYI, I'm using Carbon and Vue. Thanks in advance!
Solution
The simplest way to do this that I can think of would be to use Flexbox. Take your two elements and wrap them in a flex container. You can leverage the justify-content
and flex-wrap
properties to get the behavior you're looking for.
<div class="flex-container">
<div class="dynamic-text">...</div>
<div class="some-button">...</div>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
As you can see, when the text and button are on the same line, the button is justified all the way to the right. When there's not enough room for it, it wraps to the next line and sticks to the left.
You can get rid of the float: right;
on the button div, as you shouldn't need it anymore. You may also want to play with the align-items
property to get the vertical axis alignment you want. If you're not familiar with Flexbox and want to learn it, I highly recommend the CSS Tricks Flexbox Guide and Flexbox Froggy.
Answered By - aron
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.