CODEWITHSUNDEEP
cssreactjstypescript
kastaplastislife
kastaplastislife

Reputation: 295

Allow one of two buttons in div to grow to fit text

We have created modals and are having an unwanted outcome with the text of the submit button wrapping in some cases. For example, see the image at the bottom.

In this, the buttons are the same size, but the "Create User" text is being wrapped.
I want to be able to allow the submit button (create user) to grow to fit the text so that it does not wrap, while keeping the Cancel button the same size. The code for these looks like so:

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  display: flex;
  justify-content: flex-end;
  flex-flow: row wrap;
  gap: ${theme.spacing.pixel[100]} ${theme.spacing.pixel[100]};
  margin-top: ${theme.spacing.pixel[200]};
  width: 100%;

  :empty {
    display: none;
  }

  & > * {
    display: flex;
    flex: 1 0
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
          numberOfButtons - 1
        })`};
  }
`;

I assume it is acting this way due to the flex: 1 0 property. How can I change this so that ONLY the submit button will grow to keep the text from wrapping, without affecting the cancel button?
[1]: https://i.sstatic.net/ys7eU.png

Upvotes: 1

Views: 160

Answers (1)

ghybs
ghybs

Reputation: 53185

An extremely simple solution is to use non-breaking space (e.g. with &nbsp; HTML entity) between your words.

<button>Create&nbsp;user</button>

With this, the entire button content is seen as a single word that must fit in 1 line, forcing the element minimum width.

By default flex items don't shrink below their minimum content size.

Demo: https://codesandbox.io/s/cool-archimedes-k1b802?from-embed=&file=/src/App.tsx

Another possible solution could be to apply flex-grow: 0; instead, on all the child elements of your <ModalFooter> component, then to target specifically your "Create user" submit button and give it an overriding flex-grow: 1; rule:

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  & > * {
    display: flex;
    flex: 0 0 // flex-grow 0 (first number)
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
          numberOfButtons - 1
        })`};
  }

  // Specifically target the submit button
  & > button[type=submit] {
    flex-grow: 1; // Override the flex-grow property
  }
`;

<ModalFooter>
  <button>Cancel</button>
  <button type="submit">Create user</button>
</ModalFooter>

Demo: https://codesandbox.io/s/admiring-currying-vh0y6n?from-embed=&file=/src/App.tsx

But note that flex items grow with their container, rather than with their own content (except for their minimum size, as done in the 1st solution).

A mixed solution would be to apply a white-space: nowrap; rule on that button instead:

suppresses line breaks (text wrapping)

const ModalFooter = styled.div<{ numberOfButtons?: number }>`
  & > * {
    display: flex;
    flex: 1 0 
      ${({ numberOfButtons = 2 }) =>
        `calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
          numberOfButtons - 1
        })`};
  }

  // Specifically target the submit button
  & > button[type=submit] {
    white-space: nowrap; // Prevent line breaks on white spaces, like &nbsp;
  }
`;

Demo: https://codesandbox.io/s/cool-sea-iwr4iv?from-embed=&file=/src/App.tsx

Upvotes: 1

Related Questions