0

I have developed a webpart where on hover i am changing the color of document card office fabric component and on click of document card i am showing grid ,but i am not able to change color of document card if i click ,it only changing in hover

below is my code

                            const cardStyles: IDocumentCardStyles  = {
                              root: [
                                {
                                  display: 'inline-block', marginRight: 20, borderRadius: 25,  marginBottom: 20,width: 90, 
                            backgroundColor:"#fbce07", outline:'none',borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
                            selectors: {
                              ':hover': {
                                backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25

                              },

                              ':after': {
                                color: 'transparent',
                                content: '',
                                display: 'block',
                                height: '1px',
                                overflow: 'hidden',
                                visibility: 'hidden'
                              },

                              ':before': {
                                color: 'transparent',
                                content: '',
                                display: 'block',
                                height: '1px',
                                overflow: 'hidden',
                                visibility: 'hidden'
                              },

                            }
                                }
                              ]
                            };

                            const cardStyles1: IDocumentCardStyles  = {
                              root: [
                                {
                                  display: 'inline', marginRight: 20, borderRadius: 25,  marginBottom: 20,width: 90, 
                            backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
                            selectors: {
                              ':hover': {
                                backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25

                              },
                              ':after': {
                                color: 'transparent',
                                content: '',
                                display: 'block',
                                height: '1px',
                                overflow: 'hidden',
                                visibility: 'hidden'
                              },

                              ':before': {
                                color: 'transparent',
                                content: '',
                                display: 'block',
                                height: '1px',
                                overflow: 'hidden',
                                visibility: 'hidden'
                              },

                            }
                                }
                              ]
                            };


                            ShowGrid(a)
                            { 
                              var reactHandler = this; 

                               if (usertype=='Yes')    
                                         {

                                      jquery.ajax({ 
                                        url: `${reactHandler.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentReportLink,HistoricalReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq'${a}'`, 
                                        type: "GET", 
                                        headers:{'Accept': 'application/json; odata=verbose;'},
                                        success: function(resultData) {

                                        reactHandler.setState({ 

                                        items2: resultData.d.results 

                                        }); 

                                        }, 
                                        error : function(jqXHR, textStatus, errorThrown) { 
                                        } 
                                        });  


                                    }



                                   else
                               {


                                      jquery.ajax({ 

                                        url: `${reactHandler.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentNonReportLink,HistoricalNonReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq'${a}'`, 
                                        type: "GET", 
                                        headers:{'Accept': 'application/json; odata=verbose;'}, 
                                        success: function(resultData) {   

                                        reactHandler.setState({ 

                                        items3: resultData.d.results 

                                        }); 

                                        }, 
                                        error : function(jqXHR, textStatus, errorThrown) { 
                                        } 
                                        });  



                                  }




                              } 

                              public render(): React.ReactElement<IReactGetitemsProps> {
                               return (   
                            {this.state.items.map((items,key)=>
                            {    
                              return(

                                <DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.Template)}>
                                <DocumentCardTitle   title={items.Template} />
                                <DocumentCardImage styles={cardStyles1}  height={100}imageFit={ImageFit.cover}  imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
                                </DocumentCard>

                                );
                                );
  • 1
    in OnClick function you can try getting the documentCard element by some selector and then try adding some CSS through code. – Ganesh Sanap Sep 27 at 5:26
  • if i put '':active': { backgroundColor:'green' ,outline:'none',borderColor:'white',borderRadius: 25 }, ' it work on click but goes away suddenly – kumar Sep 27 at 16:46
  • 1
    active will work only when you click on it or you press and hold left button of mouse after that will go away. – Ganesh Sanap Sep 27 at 17:04
  • yes right it work only on hold and press – kumar Sep 27 at 17:08
  • 1
    As I said in my first comment, are you able to fetch te DocumentCard element in your Onclick function? If Yes, then you can add style to the element from your code(TS file... Not CSS or SCSS). – Ganesh Sanap Sep 27 at 17:22
1

I solved this issue using below code:

toggle(b)
{

  if (this.state.description === b) {
    this.setState({ description: null })
  } else {
    this.setState({ description: b })
  }

}

myColor(b)
{
  if (this.state.description === b) {
    return "#ff9933";
  }
  return "";

}

Reference: Change color of selected element - React.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.