I would like to apply the disabled attribute on a div and it will disabled all the elements inside the div . Although I can apply the disabled attribute to all elements in the div but this may not be an efficient way if there are a lot of elements within the div

I found out this pretty cool solution after I did some google and I learnt something cool today.

Set pointer-events as none for the div[disabled] in CSS

div[disabled]
{
pointer-events: none; // <---- key point
opacity: 0.7;
}

You can make div disabled by adding disabled attributes.

<div disabled>
/* Contents */
</div>

Today I want to attach the value to material-ui button <Button value={value} /> so that I can get the value from the event.target.value in onClick.

<Button value={o.id} onClick={handleClick}>
{o.label}
</Button>

However, I found out that the event.target could be button or span depending where did we click the button because how material-ui implements the Button. It wraps the span inside button

Therefore, I did some research on google, and I found out that we could reference the target back to button by event.currentTarget .

I learnt something really cool today.

I tried to fix this ugly issue which the table content overflowed outside the page when I reduced the width of the screen.

It was pain in the ass and I tried all different way like position, display for the table and parent element but it still didn’t work.

I applied this to one of the parent element, and the issue would be fixed. Let’s see the difference.

min-width: fit-content;

before

Fred Wong

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store