Adjusting text width (not column width) within a pick, rank, drop question column | Experience Community
Skip to main content
Question

Adjusting text width (not column width) within a pick, rank, drop question column

  • October 23, 2020
  • 1 reply
  • 72 views
S

I would greatly appreciate help with some custom CSS in a PIck, Group and Rank question that will change the width of my item text after it has been dragged into the category box so that it matches the width of the box. I have been able to change the width of my survey and my group columns using this code:
.Skin .SkinInner {width: 90%}
.Skin .PGR .DragAndDrop td.groupsContainerTd div h2,.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul{width:250px}
.Skin .PGR .DragAndDrop td.groupsContainerTd div>div{width:250px}
.Skin .PGR .DragAndDrop td.itemsContainerTd {width:25%}
.Skin .PGR .DragAndDrop .Group h2, .Skin .PGR .DragAndDrop .Group ul, .Skin .PGR .DragAndDrop .Items h2, .Skin .PGR .DragAndDrop .Items ul {width:100%}

However, now there is empty space within the box.
Screenshot 2020-10-23 at 15.03.34.png
I found this question asked previously but without an answer here: https://www.qualtrics.com/community/discussion/comment/21184#Comment_21184
Thank you in advance!

    1 reply

    C
    • chris_mike
    • December 1, 2020

    I adjusted the CSS. Specifically, it's the padding of the .questionbody.
    Not perfect... but sufficient for my needs.

    html 
    .Skin .SkinInner {width: 50%}
    .Skin .PGR .DragAndDrop td.groupsContainerTd div h2,.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul{width:150px; background: #eee}
    .Skin .PGR .DragAndDrop td.groupsContainerTd div>div{width:150px; text-align: left;}
    .Skin .PGR .DragAndDrop td.itemsContainerTd {width:25%}
    .Skin .PGR .DragAndDrop .Group h2, .Skin .PGR .DragAndDrop .Group ul, .Skin .PGR .DragAndDrop .Items h2, .Skin .PGR .DragAndDrop .Items ul {width:100%; text-align: left;}
    .Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li { padding: 32px 5px 10px 5px; text-align: left; }

    Terms & ConditionsAccessibility statement