<i className="fa fa-close closeButtonSmall" onClick={e => removeColumn(id)} ></i>
I have been attempting to hide the font displayed by the closeButtonSmall class using display:none, but it doesn't seem to be working as expected.
.closeButtonSmall{
display:none ;
}
What could possibly be causing this issue?
Below is my entire CSS file, and just to note, I am also utilizing Bootstrap 4:
.d-inline{
display:inline ;
}
.closeButton{
color:red ;
float : right ;
transition: all 0.3s ;
margin-top : -20px ;
}
.closeButtonSmall{
display:none ;
transition: all 0.3s ease-in-out;
color:red ;
float : right ;
position: relative;
top:-10px;
right:-15px;
}
.closeButton:hover , .closeButtonSmall:hover{
color: #eee ;
background-color:orangered ;
}
.tabChoosePanel{
background-color: rgba(216, 216, 216 ,0.8 );
}
.tabChooseItem{
transition: all 0.7s ;
flex-grow: 1;
font-size:150%;
}
.tabChooseItem:hover{
transition: all 1s ;
cursor: pointer;
user-select: none;
background-color: rgba(150, 128, 209, 0.5);
flex-grow:1.2 ;
font-size:200%;
}
.tabChooseItem:active{
transition: all 0.1s ease-in-out ;
background-color: rgba(146, 127, 200, 0.6);
}
.columnAddArrow{
transition: all 0.3s ease-in-out;
border: 2px dotted brown ;
padding:35px;
opacity: 0.3 ;
}
.columnAddArrow:hover{
opacity: 1 ;
font-size: 120%;
border:2px dashed black ;
}
.columnAddArrow:active{
font-size: 140%;
color:green;
}
/* THIS THE STYLE FOR VariableNameWithNumbers component */
.columnFormatBlock{
border: 1px solid green ;
margin : 2px 10px 0 10px ;
}
.columnFormatBlock:hover .closeButtonSmall{
display:inline;
}
.numberOptionBox{
border: 2px dotted blueviolet ;
border-radius: 10px ;
}
.columnText{
border : 1px dashed black ;
border-radius:10px ;
color:black ;
font-size:110%;
background-color: rgba(230, 230, 230, 0.774) ;
}
.resultDisplayGrid .outputStringTextArea{
width:70%;
height: 12em;
}