CODEWITHSUNDEEP
htmlcalc
Razzupaltuff
Razzupaltuff

Reputation: 2301

Using calc() for width of div doesn't seem to work

I am trying to have a text input and two buttons in the same row. The length of the text input should be maxed out so that everything still fits in a row:

<div style="display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; width:100%;">
    <!-- div style='width:calc(~"100% - 150px")' -->
    <div style='width: calc(50% - 120px);'>
        <SfTextBox FloatLabelType="@FloatLabelType.Never" Placeholder='' Value=@WatermarkID() Enabled="false"></SfTextBox>
    </div>
    <div><SfButton Type="button" Content="Edit..." @onclick="EditWatermark" IsPrimary="false"></SfButton></div>
    <div><SfButton Type="button" Content="Remove..." @onclick="RemoveWatermark" IsPrimary="false"></SfButton></div>
</div>

This is the result (with Google Chrome):

Screenshot

If I give the div e.g. a width of 50% (style="width:50%;"), the div's width gets set as desired. The above code shows another attempt to call calc in the commented out line, which didn't work either.

What do I have to do to get the desired result (text input as long as possible with buttons to its right), and why doesn't calc seem to work here?

Upvotes: 0

Views: 413

Answers (2)

ytung-dev
ytung-dev

Reputation: 892

Your codes are working, just not the way you expect(text input as long as possible with buttons to its right).

Few things to get it work as you expect:

  1. Remove the "justify-content:space-between;" in #d1 (text input as long as possible means no space)
  2. Replace "width: calc(50% - 120px)" with "width:100%" in #d2 to make it fill the space. As you used "display:flex" in #d1, item in it will "flex", making it not occupying the whole 100% width of #d1 but shrinking a bit to achieve "as long as possible with buttons to its right"
  3. Add "width:100%" to your input

<div id="d1" style="display:flex; flex-flow:row nowrap; align-items:center;width:100%;">
    <div id="d2" style='width:100%;'>
        <input type='text' style="width:100%">
    </div>
    <div id="d3"><button>Edit...</button></div>
    <div id="d4"><button>Remove...</button></div>
</div>

Upvotes: 0

EinLinuus
EinLinuus

Reputation: 675

If you want both buttons pushed to the right and the input field taking up all of the available space left, you can use flexbox (what you're already using):

Remove the justify-content: space-between property (it's not needed anymore) and set the width of your input field to 100%. The buttons need the property flex-shrink: 0; so they won't get shrinked.

Working example:

<div style="display: flex; width: 100%;">
  <div style="height: 30px; background: orange; width: 100%;"></div>
  <button style="flex-shrink: 0;">Hello</button>
  <button style="flex-shrink: 0;">World</button>
</div>

If you want some spacing between the elements, you an use the gap property on the flex container, e.g. gap: 10px;.

Upvotes: 1

Related Questions