Adding heavy vertical borders to multiple column question | XM Community
Question

Adding heavy vertical borders to multiple column question

  • 7 October 2020
  • 1 reply
  • 16 views

I have a survey question with three-columns of responses (two columns with three radio-buttons each, and one column with free text). How do I designate the identifier tag for the vertical border between the radio-button columns and the free text column? I tried using the column (cx) tag with many values for x but cannot change the vertical border all the way to the top (i.e. intra-column vertical).


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, I explored changing the Separator color in a Side by Side question in this post a bit, but the code I posted doesn't change the color of the top portion of the Separator. To change the color of top portion as well, I used the id of the top portion element which can be found using the inspect browser tool. Like with the bottom portion of the Separator, the Separator color is driven by the "border-right" attribute of the first of 2 Separator elements that follow the column or table cell (Separator1 and Separator2). In your case, the id of the top portion of the Separator between columns 2 and 3 is "style~header~qid~4~2", like in the below screen shot. For the bottom portion, using the inspect browser tool and the approach described in the other post, the Separator between columns 2 and 3 is c12. So to change the color of the entire Separator between columns 2 and 3, try adding the below to the question's JavaScript in the OnReady section.
var qid = this.questionId;
var topsep = document.getElementById("style~header~"+qid+"~4~2");
var bottomsep = "#"+qid+" td.Separator1.BorderColor.c12";

jQuery(topsep).css({"border-right":"2px solid red"});
jQuery(bottomsep).css("border-right","2px solid red");
SBSBordering.png

Leave a Reply