You are viewing limited content. For full access, please sign in.

Question

Question

New Designer v11 - override "pdc-" class

Forms Version 11 Forms Layout Designer
Updated April 8
asked on April 8 • Show version history

No matter what i try in CSS, I can't seem to unset or modify the width on a "pdc-" class. Here is what I am trying:

#q423 [class*="pdc-"] {
  width: unset !important;
}



I know the pdc-'s change and are important, however I need to dynamically change the width on this customHTML field. Well, I hope to at least. 

I am trying to adjust the width on this one customHTML field rather than 2 tables. It works great with a manual change in the browser dev tools. It keeps the proportions of the 2 tables, so trying to replicate that here. 

Anyone been down this road?

0 0

Answer

SELECTED ANSWER
replied on April 8

The selector '#q423 .pdc[class*="pdc-"]' is targeting the q423 id and than anything within that element with class pdc and pdc-GUID. It is not combining the two selectors. You probably want to remove the space to target the element you have focused in your screenshot. 

 

#q423[class*="pdc-"] {
  width: unset !important;
}

Although I'm not sure what the "unset" will do this should at least target the element appropriately. You can tell in the devtools that your CSS is nowhere to be found which means it isn't being overwritten, its not even applied to the element.

2 0

Replies

replied on April 8

What is the exact behavior you're seeing? Unset seems to apply even if I only include the id selector, and that also worked to change the width.

Keep in mind that the parent pane/container uses flex display and 100% width (from the .line class), so changing the pdc width won't really affect the broader page layout.

In the following example, the blue border is the pdc, and the red border is the parent.

 

This is the CSS I used for testing.

#q1 > .pane > div:first-child {
  border: 1px solid red;
}

#q56 {
  width: unset;
  border: 1px solid blue;
}
0 0
View 1 previous reply
replied on April 8

I'm not seeing anything change. The pic above shows the css i tried to use and how the pdc- class width did not get modified. 

I tried this prior as the ideal method, but this too did not change anything:

#q423 .pdc[class*="pdc-"] {
  width: unset !important;
}

oh and just to be clear I am focusing not on the "pdc" class, but the "pdc-*" class where there is a randomly changing GUID after the hyphen. Thanks for the response!

 

0 0
replied on April 8

I'm not seeing anything change. The pic above shows the css i tried to use and how the pdc- class width did not get modified. 

I tried this prior as the ideal method, but this too did not change anything:

#q423 .pdc[class*="pdc-"] {
  width: unset !important;
}

oh and just to be clear I am focusing not on the "pdc" class, but the "pdc-*" class where there is a randomly changing GUID after the hyphen. Thanks for the response!

 

replied on April 8 • Show version history

Try adding the borders like I did in my example to make it more obvious. Keep in mind, if you only unset the width, the element will still expand to fit the content.

The id selector for that field should also be enough without the pdc and pdc-* classes because id selectors have higher specificity and take precedence over class selectors.

If #q423 is referencing the element with the pdc classes, that could be another problem because the CSS you have is looking for children #q423.

Here is what it looks like with the same CSS I used before, but with more text.

0 0
SELECTED ANSWER
replied on April 8

The selector '#q423 .pdc[class*="pdc-"]' is targeting the q423 id and than anything within that element with class pdc and pdc-GUID. It is not combining the two selectors. You probably want to remove the space to target the element you have focused in your screenshot. 

 

#q423[class*="pdc-"] {
  width: unset !important;
}

Although I'm not sure what the "unset" will do this should at least target the element appropriately. You can tell in the devtools that your CSS is nowhere to be found which means it isn't being overwritten, its not even applied to the element.

2 0
replied on April 8

that was it. thanks so much!

and thanks to jason as well. putting it on the id alone worked as well. 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...