2

I wanted to create a filter element that can be collapsed using the <details> element as it comes out of the box with an open/close functionality.

However when it came to styling the fields inside, I wanted to use grid and it seems like <details> can't be set to display: grid?

Has anyone come across this behavior?

Your input is much appreciated!

details {
  display: grid;
  grid-template-columns: 100px 100px;
}

input {
  width: 100%;
}

label {
  display: block;
}

label:first-of-type {
  color: red;
  grid-column: 1;
}

label:last-of-type {
  color: blue;
  grid-column: 2;
}
<form>
  <details open>
    <summary>Filter</summary>
    <label>
        I should be on the left
        <input type="text">
      </label>
    <label>
        I should be on the right
        <input type="text">
      </label>
  </details>
</form>

Codepen here!

Toto
  • 89,455
  • 62
  • 89
  • 125
sammiepls
  • 1,340
  • 2
  • 13
  • 19
  • Indeed, strange. Would it be an option to put the elements you'd like to grid-align in a container that is set to display: grid? – Holzchopf Sep 07 '18 at 08:03
  • I think that's the route I'll have to go down. I have added a div inside the details and that seems to work. – sammiepls Sep 07 '18 at 08:52

1 Answers1

0

Have had to wrap the form input's within the details in a <div> or another container to get display: grid to work and style them.

sammiepls
  • 1,340
  • 2
  • 13
  • 19