CSS customization for specific items -- Item ID needed?

[richrau]

Years ago, I've customized an item's appearence in the run settings. Now, I've setup an identical run on another formr istance but the customization fails. Perhaps the item IDs used in the CSS code are not correct any longer? If so, where can I find the correct item IDs? For instance, part of my CSS code looks like:

#item19496446_1{
display: none !important ;
}

[rubenarslan]

Hi @richrau yes the item ID will change when you recreate the study. A portable solution would be to assign a class to the item in the class column of the item sheet (e.g. "myhiddenclass") and change your CSS as follows. This specific class already exists though, so you should be able to just add the class "hidden" and the item should be hidden from view even without custom CSS.

.myhiddenclass {
display: none !important ;
}

[richrau]

got it, thanks!

[richrau]

Okay, I'm realizing it affects many more items than I originally thought, so inspecting all the HTMLs is too troublesome. Can I come back to your offer to send reproducible snippet? Here's the spreadsheet: https://docs.google.com/spreadsheets/d/12BZAaHLccn-1tYJf_udZtd_IkJCOepKHJjvvYUeRJbw/edit?gid=0#gid=0 (you can focus on the politics3 item on the first survey page). For the CSS code, see my comment above.

[rubenarslan]

Can't you just use type rating_button 1,7 to achieve the desired look? Or do you want the radio buttons?

[rubenarslan]

Anyway, here is a CSS snippet that works in my test. Currently, it targets the answer_below_label because you use it already but you can also replace .answer_below_label with .myspecialradiolayout as long as you add that class in the survey item sheet.

.answer_below_label label.radio-inline:first-of-type input[type="radio"] {
pointer-events: none;
}

.answer_below_label label.radio-inline:first-of-type input[type="radio"]
 .circle{
display: none !important ;
}

.answer_below_label label.radio-inline:first-of-type input[type="radio"]  .check{
display: none !important ;
}

.answer_below_label label.radio-inline:first-of-type input[type="radio"] {
display: none !important ;
}
@media (max-width: 765px) {
.answer_below_label label.radio-inline:first-of-type .mc-span {
        transform: translateY(2.5em);
        display: inline-block;
}
}

[richrau]

amazing, thanks!