function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Stefano AmentaStefano Amenta 

Survey Force thank you message

Hi,

does anyone know where to change, in the code, the width of the thank you message box (survey force)?

I tried a few things but it didn't work.

User-added image
Best Answer chosen by Stefano Amenta
ApuroopApuroop
Try adding the following to the Survey Container CSS after #survey_container{.... #CCCCCC;}

This should do the trick I guess. If you want to adjust even more, try changing the min-width attribute.
  
.surveyforce .slds-notify--toast{
    border-radius: .25rem;
    margin: .5rem;
    padding: .75rem 1.5rem;
    min-width: 16rem;
    display: inline-block;
    text-align: left;
}

 

All Answers

ApuroopApuroop
Hey Stefano,

Navigate to Survey Force > Getting Started tab > Click View Sample Survey > Find the inner tab - Header, Thank You & CSS > Grab the CSS in Survey Container CSS and replace it in your Survey Container CSS.

This is the CSS I have #survey_container{ margin: 0 auto; width: 600px; box-shadow: 0 0 14px #CCCCCC; -moz-box-shadow: 0 0 14px #CCCCCC; -webkit-box-shadow: 0 0 14px #CCCCCC; }

You need to adjust the width: 600px based on your needs.

Thanks.
Stefano AmentaStefano Amenta
Hi Apuroop Naidu
Thanks for your feedback.

I need to keep the survey container width as it is now, so for me changing it back to 600px wouldn't be ideal.

Is there any other way to only adjust the thank you message container so that it can fit within the survey container?
ApuroopApuroop
Try adding the following to the Survey Container CSS after #survey_container{.... #CCCCCC;}

This should do the trick I guess. If you want to adjust even more, try changing the min-width attribute.
  
.surveyforce .slds-notify--toast{
    border-radius: .25rem;
    margin: .5rem;
    padding: .75rem 1.5rem;
    min-width: 16rem;
    display: inline-block;
    text-align: left;
}

 
This was selected as the best answer
Stefano AmentaStefano Amenta
Thank you Apuroop Naidu

It did the trick :)