how to replace display:contents in browser Edge

user_6903491 0
Viewed 8524

So, I have a table with rows where the row height is way bigger than it needs to be. In every browser but Edge, I can fix the problem with display:contents, but in Microsoft Edge, which doesn't support this feature at this time, I have to find an alternative. Can someone please point me in the right direction?

microsoft-edge display css
3 Answers

Try adding the following code to your CSS after [your element] that is using display: contents;

`@supports not (display: contents) { /* workaround because Edge doesn't support display: contents; */
 a.remove {
    display: inline;
 }
}`

Replace a.remove with your element name.

user_123279290

This feature is not yet implemented by edge browser and IE. Basically there are two ways the break the flex-row

1)Page-break(Works only in Mozilla)

2) display: contents;(Works only in Mozilla,Chrome).

So if know number of rows and have repeated instances to break could use display:block and inline to get the required result. But in dynamically repeating rows and number of tiles available its not possible to break the flex box. Kindly report Edge browser to implement display: contents. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis which is very important feature and missed out.

user_101268600

I try to check your code with Edge and check the result. I made change in line below and set 'height: 30 px' instead of 300 px.

  <tbody data-link="row" class="rowlink" style="overflow-y: auto; overflow-x: hidden; height: 30px; display: contents;">

Now it is displaying the rows properly in all major browsers including Edge.

Below is the testing result with Edge.

Click here to see the image

I think this can be the easiest alternative to display the output properly in Edge.

Regards

Deepak

user_103093810
Related