div with role=group looks bad in nav

[davi4046]

Description

Having a div with role="group" in the nav does not vertically center-align the group and the other nav items.

<nav>
  <ul>
    <li>Hi</li>
    <li>
      <div role="group">
        <input />
      </div>
    </li>
  </ul>
</nav>

Expected behaviour

The group and the other nav items should be center-aligned vertically.

Reproduction URL

https://codepen.io/davi4046/pen/XJXdzqK

Environment

OS: Windows 11 Browser: Firefox 143.0.1 Pico version: 2.1.1

[suchislife801]

That's the thing. Pico CSS states it is a minimalist framework and in this case, they chose to use CSS Grid. What you want is easily achieved with CSS Flex but CSS Flex is not part of Pico CSS.

More on that here: https://picocss.com/docs/grid

In the mean time, here is an example of how to roll your own:

/* CSS Flex Box */
.d-flex {
  display: flex !important;
}

/* Horizontal Alignment */

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

/* Vertical Alignment */

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

Lastly, consider the possibility that, Pico CSS is a semantic Framework. Perhaps they didn't intend for in role="group" to go inside Navs because they were really meant to go inside Forms.

[davi4046]

Consider all the websites that have a searchbar in the nav. That is often an input field and a button ("Search") grouped together like Pico's role=group does.

[walterdavis]

Perhaps they didn't intend for in role="group" to go inside Navs because they were really meant to go inside Forms.

If you have an input, you de facto have a form. They are useless without one. Note that the form might be external to the part of the DOM that contains the input, and rely on the form attribute on the input to indicate which form in the DOM is related to that input.