CODEWITHSUNDEEP
reactjsantd
Mitch
Mitch

Reputation: 97

How increase the clickable zone around my Icon before select?

I use an clickable icon when it selected the background change to grey. But the zone around the icon when it is unselected is not clickable for select it and when it selected the zone around is clickable for unselected it.

I try to change padding, margin and more and nothing

this is my icon before selection:

enter image description here

and this after selection:

enter image description here

So when the icon is unselected the zone around (who have the same size of grey when it selected) is clickable but don't work for selected it. But if it selected when click on the grey zone that's unselected it. 

<Icon
    type="book"
    onClick={e => this.onChangeIcon(e, project)}
    style={{
       height: 34,
       width: 44,
       fontSize: 30,
       alignItems: "center",
       justifyContent: "center",
       color:
       "book" === project.imagePath
        ? "white"
        : "#363636",
        backgroundColor:
        "book" === project.imagePath
        ? "#363636"
        : "white",
        borderRadius: "10px",
        marginRight: "10px",
        marginLeft: "10px",
        marginTop: "2px",
        paddingTop: "3px",
        display: "inline-block",
    }}
/>

Upvotes: 3

Views: 131

Answers (1)

iLiA
iLiA

Reputation: 3153

you can wrap element around PIcon and write its width & height like this

<div style={{width: '300'; heigth: '400'; cursor: 'pointer'; background: 'transparent'}} onClick={yourEvent}>
    <PIcon />
</div>

Upvotes: 1

Related Questions