question

NehaAhuja-1257 avatar image
0 Votes"
NehaAhuja-1257 asked YuZhou-MSFT edited

Grid layout is NOT fully supported in Edge browser when number of tags are dynamic in <dl>

When we have the below code where number of <dt> and <dd> are not known prior and depending on the API response. The grid layout doesn't work in Edge browser causing the overlapping issue. It only works when we use -md-grid-row: 1, -md-grid-row: 2, -md-grid-row: 3, and so on....

This is an issue as users may not how many <dt> and <dd> tags will be present in <dl>. Also, they may not be using any helper css libraries for that and won't prefer to manipulate css using JavaScript code.

Note: This is very well handled in all other browsers.

<dl>
<dt></dt>
<dd></dd>
....
....
....
</dl>


ms-edge
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@NehaAhuja-1257 Which version of Edge are you using? I test with below code sample and it works well in Edge 89.0.774.63:

style:

 dl {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto;
  }

html:

 <dl>
         <dt>first</dt>
         <dd>aaaaaaaaaa</dd>
    
         <dt>second</dt>
         <dd>bbbbbbbbb</dd>
    
         <dt>third</dt>
         <dd>cccccccccc</dd>
  </dl>

No matter how many <dt>, <dd> you have, the layout is always two columns in browsers. If your grid layout is not like this, please provide the related css styles which can reproduce the issue so that we can have a test and see how to help.

0 Votes 0 ·

0 Answers