Feedback Widget messing with layout

0
Hi everyone, I’ve run into an issue when trying to add a feedback widget to my app. I added to the custom layout we use and the button itself works fine, but the layout of everything on the page is now messed up. Has anyone come across this issue before? Thanks, Jon   edit: Above is a screenshot of one of the issues. Those two panels are supposed to next to each other rather than on top of each other.    Above is a screenshot of the custom styles I added to my widget. I had not previously had the highlighted class name. I just added it to the first section, and added that name to the class for my feedback widget. When I did this, the text for feedback disappeared. Also, I believe the feedback widget is used in content and there are no other custom styles.     
asked
1 answers
1

Hi Jonathan,

I think there is some issues with custom styling that you have added.

Can you remove the feedback widget from the page and/or custom styles added for feedback widget to check if this is what causing layout issues? Did this issue start after adding custom styles for feedback button? If yes, then there is some problem with the custom styles you have added. Please can you review your custom styles.

Update:

Please find the steps below to add custom styles based on your scenario; 

  • Install or open and setup Calypso
  • Go to your project directory > ‘\theme\styles\web\sass\app’
  • Create a new folder for your widget (in your case this will be ‘widgetscustom’) 
  • Add a new scss file under this new folder (in your case filename will be ‘_feedback-widget.scss’)  
  • Open ‘_custom.scss’ from app folder and import newly added file, (in your case, add @import"widgetscustom/feedback-widget"; and save it (make sure Calypso is running)
  • Go to newly created file and add required custom style for your feedback widget and save it so that Calypso compiles the code. (in your case go to _feedback-widget.scss’ add your custom styles for feedback widget and save)

 

Hope this helps!

answered