Issue
i have a container with two divs, one div is always there and has three children and the second is configurable, it may or may not be there and it has one child. I am having a challenge making the items in the two divs occupy the full parent width regardless of the configuration. I have tried removing the style flex in the parent container but it will only work if the items are four and not three. Any advise/links to read will be appreciated
<div class="container">
<div class="chartExtensions">
<div
data-extension-id="order-basket-action-menu"
>
<button
role="button"
tabindex="0"
class="siderail-nav-button"
type="button"
>
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button
role="button"
tabindex="0"
class="siderail-nav-button"
type="button"
>
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button
role="button"
tabindex="0"
class="siderail-nav-button"
type="button"
>
<span>Clinical form</span>
</button>
</div>
</div>
<div class="nonChartExtensions"
></div>
</div>
//style
.container {
display: flex;
align-items: center;
width: 100%;
}
.chartExtensions {
background-color: $ui-02;
flex-basis: 0.75%;
flex-grow: 3;
display: flex;
width: 100%;
& > div {
flex: 1;
cursor: pointer;
}
}
.nonChartExtensions {
background-color: $ui-02;
flex-basis: 0.25%;
flex-grow: 1;
display: flex;
& > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
Solution
Is there any real requirement to have them separated into chartExtensions and nonChartExtensions? If not, you can just put all the items in one flex row and have them share the space evenly.
.container {
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.container div {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
flex-basis:100px;/* the min size you want these to be */
}
.container button {
width:100%;
}
Three items:
<div class="container">
<div data-extension-id="order-basket-action-menu">
<button>
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button>
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button>
<span>Clinical form</span>
</button>
</div>
</div>
Four items:
<div class="container">
<div data-extension-id="order-basket-action-menu">
<button>
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button>
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button>
<span>Clinical form</span>
</button>
</div>
<div data-extension-id="i-dunno">
<button>
<span>Parent Lists</span>
</button>
</div>
</div>
So many items that it is forced to wrap:
<div class="container">
<div data-extension-id="order-basket-action-menu">
<button>
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button>
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button>
<span>Clinical form</span>
</button>
</div>
<div data-extension-id="i-dunno">
<button>
<span>Parent Lists</span>
</button>
</div>
<div data-extension-id="order-basket-action-menu">
<button>
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button>
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button>
<span>Clinical form</span>
</button>
</div>
<div data-extension-id="i-dunno">
<button>
<span>Parent Lists</span>
</button>
</div>
</div>
Alternatively, if you need to keep chartExtensions and nonChartExtensions you can hide .nonChartExtensions
if it is :empty
. EG:
.container {
display: flex;
align-items: center;
width: 100%;
}
.container button {
width: 100%;
}
.chartExtensions {
background-color: $ui-02;
display: flex;
flex-grow: 3;
&>div {
flex: 1;
cursor: pointer;
}
}
.nonChartExtensions {
background-color: $ui-02;
flex-grow: 1;
display: flex;
&>div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
.nonChartExtensions:empty {
display: none;
}
<div class="container">
<div class="chartExtensions">
<div data-extension-id="order-basket-action-menu">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Clinical form</span>
</button>
</div>
</div>
<div class="nonChartExtensions"></div>
</div>
<div class="container">
<div class="chartExtensions">
<div data-extension-id="order-basket-action-menu">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Order basket</span>
</button>
</div>
<div data-extension-id="visit-note-nav-button">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Visit note</span>
</button>
</div>
<div data-extension-id="clinical-form-action-menu">
<button role="button" tabindex="0" class="siderail-nav-button" type="button">
<span>Clinical form</span>
</button>
</div>
</div>
<div class="nonChartExtensions">
<div data-extension-id="i-dunno">
<button>
<span>Parent Lists</span>
</button>
</div>
</div>
</div>
Answered By - Moob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.