Html Question posted in
Some basic documentation can be found here.

Html – How to pin control elements in the chip list with flexWrap?

In base I have a list of filter chips. This chips are li elements and placed in the ul parent element:

<Stack
  className={`${className} filter-list`}
  width='100%'
  component='ul'
  padding={0}
  margin={0}
  spacing={1.5}
  direction='row'
  useFlexGap
  flexWrap='wrap'>
  <FilterButtonMolecule className='filter-list__filter-button' />
  {currentFilters.map((filter) => (
      <Box
        className='filter-list__item'
        component='li'
        key={filter.id}
        sx={{ listStyle: 'none' }}>
        <FilterChipMolecule
          className='filter-list__item-chip'
          filter={filter}
        />
      </Box>
    ))}
</Stack>

The flexWrap and flexGap properties are specifically applied in the parent ul so that the children li are moved depending on the size of the parent ul. Everything works as intended.

Initial wide

Initial compact with css

But now I needed to add another button to the upper-right corner without breaking the moving of elements, e.g. :

Desired wide

Desired compact

Is this even possible?
I’m thinking now of removing the buttons from the list. Put them in the parent, which is made absolute. And add invisible chips to the list, which will displace visible chips from the upper corners. But I would like to ask for advice first.

Tags:

2

Answers


  1. 0

    I would step back and consider the semantics of your <ul>. As an unordered list, it should contain a list of items, like your filter tags. The icon buttons before and after the tag list aren’t really part of that list.

    In fact, your markup is invalid because the <ul> has direct children that aren’t list items (<li>).

    So the short answer to your question is: you don’t. What you should do is restructure your markup to be valid and semantic. Something like:

    <div>
  <button class="icon-button filter">Filter</button>
  <ul>
    <li>Tag 1</li>
    …
    <li>Tag N</li>
  </ul>
  <button class="icon-button other-thing">Other thing</button>
</div>

    Then only the list items wrap, which is what you want.

    Login or Signup to reply.
  2. 0

    If you are not afraid of float, then use it:

    body {
  min-width: 320px;
}

.list {
  display: flow-root;
  font-size: 0;
  * {
    display: inline-block;
    padding: 4px 8px;
    border: solid 1px;
    border-radius: 12px;
    font-size: 1rem;
  }
}

.filter-left {
  float: left;
  margin: 0 12px 12px 0;
  background: orange;
}

.filter-right {
  float: right;
  background: orange;
}

.tag {
  margin: 0 12px 12px 0;
}
    <div class="list">
  <div class="filter-left">FL</div>
  <div class="filter-right">FR</div>
  <div class="tag">tag 1</div>
  <div class="tag">tag 2</div>
  <div class="tag">tag 3</div>
  <div class="tag">tag 4</div>
  <div class="tag">tag 5</div>
  <div class="tag">tag 6</div>
  <div class="tag">tag 7</div>
  <div class="tag">tag 8</div>
  <div class="tag">tag 9</div>
  <div class="tag">tag 10</div>
  <div class="tag">tag 11</div>
  <div class="tag">tag 12</div>
  <div class="tag">tag 13</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search