Adding border radius to Slider or Feedback Button container | XM Community
Skip to main content

Hi all
Ive been trying to get border radius working in CSS for a couple of different Intercepts/creatives.
So far, i can now get the corner radius working for the inner content of a container, but not the actual container itself.

Here's the CSS Im testing (via the look & feel CSS input):
.slider-container {
  border: 1px solid black;
  border-radius: 15px;
}

#SurveyEngineBody {
background: transparent !important;
border: 1px solid black;
border-radius: 15px;
}
.Skin #SkinContent {
background: rgba(255,255,255,.9) !important;
border: 1px solid black;
border-radius: 15px;
}
.Skin .SkinInner {
background: transparent !important;
 }

And these are the results (the offset between the container and contents is deliberate to allow me to see whats happening in the master container:)
Screenshot 2022-11-09 at 11.49.50.png
I can now control the border radius for the content, but not the Slider main container (shown in green). This is the one Id most like to change, but so far its not working.
Ive tried using Chrome Inspect to find the label for the container, but it wont show.
If anyone can help with this last hurdle, I'd really appreciate it :)

Many thanks

waynedoz
What if you include for all elements?
.QSISlider div, .QSISlider dl, .QSISlider dt, .QSISlider dd, .QSISlider ul, .QSISlider ol, .QSISlider li, .QSISlider h1, .QSISlider h2, .QSISlider h3, .QSISlider h4, .QSISlider h5, .QSISlider h6, .QSISlider pre, .QSISlider form, .QSISlider fieldset, .QSISlider textarea, .QSISlider p, .QSISlider blockquote, .QSISlider th, .QSISlider td {

border-radius: 15px;


}
Hope it helps!

Deepak Thanks so much! sadly it still doest work. Frustrating as I can do it via tweaking the CSS in Chrome Inspect mode, but the div everything sits in doesnt seem to have a tag. But hey thanks so much for trying some ideas, i really appreciate your help :)

waynedoz
If you have the option to add Javascript in your intercept.after display section.
image.png
Try adding the below code, it worked for me
(function() {
document.querySelector('.QSISlider').querySelectorAll('div')[3].style.borderRadius='15px';
document.querySelector('.QSISlider').querySelectorAll('div')[4].style.borderRadius='15px';
document.querySelector('.QSISlider').querySelectorAll('div')[5].style.borderRadius='15px';
document.querySelector('.QSISlider').querySelectorAll('div')[6].style.borderRadius='15px';
document.querySelector('.QSISlider').querySelectorAll('div')[7].style.borderRadius='15px';
{
    $("iframe").width(678);
    $("iframe").height(526);
}
/*Insert code here*/

})();
Hope it helps!

Thanks to everyone on this - in the end the solution was within the Edit Creative area. You can set the main container to have no background - then using the CSS for border-radius works perfectly.
with that set, heres the final code that i used:
#Wrapper {
 margin: 0 auto !important;
border: 0px solid black;
border-radius: 0px 30px 0px 30px;
background-color: #091535 !important;
padding: -20px 0px 0px 0px;
}



#SurveyEngineBody {

background-color: transparent !important;
  border-width: 0 !important;
  border-color: #000 !important;
  border-style: solid !important;
  border-radius: 20px !important;


}


.Skin #SkinContent {

background: transparent !important;
border-radius: 20px;
border-width: 0 !important;
border: none;
padding: 20px;


}

.Skin .SkinInner {

background: transparent !important;


 }


/* button style */

input>name='NextButton'] {
-webkit-appearance: none !important;
  background-color: #0074E0 !important;
  border-width: 0 !important;
  border-color: #000 !important;
  border-style: solid !important;
  border-radius: 20px !important;
  color: #fff !important;
  cursor: pointer !important;
  float: left !important;
  font: inherit !important;
  line-height: normal !important;
  margin: 0 0 0 0 !important;
  overflow: visible !important;
  padding: 0em !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  /*width: 33% !important; */
width: 120px !important;
height: 40px !important;
  font-size: 14px !important;
}


/* Input Text Boxes style */

.Skin .InputText,
inputxtype=text] {
background-color : #ffffff;
border-radius: 8px !important;
border: solid 0px #696b6d !important;

}

Leave a Reply


Terms & Conditions