Overridding inline CSS | XM Community
Skip to main content

I’m not optimistic about finding a solution, but thought I’d ask here as a last ditch effort.

So I have a side by side question and I wanted to style the columns specific sizes because by default in Simple layout the columns have some inline styling doesn’t work well for the data I have in those columns. And I am attempting to override those inline styles, but what already I’ve tried hasn’t worked.

My attempt is the div.sticky-container.sbs-table CSS. And if I uncheck the first grid-template-columns under element.style, then mine seems to work. But even when I try to apply important! to mine it still doesn’t override the inline CSS.

I’m not sure what else I could try. When I attempted adding the important! it gave me a little error and since it wasn’t accomplishing anything, I removed it.

@courtrc Since inline styles are hard to override with just CSS, a common approach is to use JavaScript to remove or change the inline styles directly. Please try to add this JavaScript for your question in the addOnReady method:

var table = document.querySelector('.sticky-container.sbs-table');
       if (table) {
           table.style.gridTemplateColumns = '125px 225px 200px 200px 125px 200px';
       } 
 
Another approach is to increase the specificity of your CSS selector, although this might not always work against inline styles. An example could be this custom CSS:

.question-content > .sticky-container.sbs-table {
       grid-template-columns: 125px 225px 200px 200px 125px 200px !important;
   }

Best

Christian

@chackbusch Amazing thank you for both options! I was trying to increase the specificity but I didn’t have the > in there. Appreciate your help so much!

Leave a Reply


Terms & Conditions