How to get a line to NOT display! | XM Community
Skip to main content

I have this css code applied to the theme of my survey:

li:last-of-type { border-top: 2px solid #8D8D8D4D; 
}
li:last-of-type label { margin-top:10px; 
}
.Skin #Wrapper {
margin-top: 40px !important;
}
.Skin .EndOfSurvey {
color: #525252;
padding: 10px 40px 60px 40px !important;
}
.Skin .Matrix table thead th:last-of-type {
border-left: 2px solid #8D8D8D4D;
}
.Skin .Matrix table .ChoiceRow td:last-of-type {
border-left: 2px solid #8D8D8D4D;
}
.Skin .Matrix table .ChoiceRow td:last-of-type label {
margin-left:0px;
}
.JFEScope .Skin .Matrix .q-matrix.mobile table td:last-of-type {
border-top: 2px solid #8D8D8D4D;
border-left: 0px;
}
.JFEScope .Skin .Matrix .q-matrix.mobile table td:last-of-type label {
margin-top:0px;
}
.Skin .QuestionOuter.Matrix{
max-width: 100%!important;
}

However, if I DO NOT want a line to show at a specific question, I have this coded on the javascript at the question level:

Qualtrics.SurveyEngine.addOnload(function() {
    var questionID = this.getQuestionContainer().id;

    var lastListItem = document.querySelector('#' + questionID + ' li:last-of-type');

    if (lastListItem) {

        lastListItem.style.borderTop = 'none';
        lastListItem.style.margin = '0';
        lastListItem.style.padding = '0';
    }

    var labels = document.querySelectorAll('#' + questionID + ' label');

    labels.forEach(function(label) {
        label.style.setProperty('margin-top', '0', 'important');
    });
});

 

That said, there is still a line showing for this question and I have no idea how to get it to go away! Please help! 

 

You indicated your Overall Experience at ${e://Field/external_name} was&nbsp;<b>Poor</b>.&nbsp;<br>
<br>
If you would like to further discuss this experience, please contact us:
<ul>
	<li>Community Health Network Patient Relations and Advocacy
	<ul>
		<li>Weekdays: 8am-5pm EST</li>
		<li>Phone: <a href="tel:13176217000">1.317.621.7000</a></li>
		<li>Email: <a href="mailto:PatientRelationsandAdvocacy@eCommunity.com?subject=Patient%20Experience%20Survey%20Response">PatientRelationsandAdvocacy@eCommunity.com</a></li>
	</ul>
	</li>
</ul>

 

Hi,

Please try doing inspect element on preview page, look for that line selector/class/id and either make it display:none; or just make the line color white so it will be invisible on your page. This should be done on the question page itself via styling (go to HTML view) and not through look and feel option.

 

<style>

.className{display:none;}

</style>

@faaiz.rahman - shouldn’t it already NOT be displaying though, based on this

 

Qualtrics.SurveyEngine.addOnload(function() {
    var questionID = this.getQuestionContainer().id;

    var lastListItem = document.querySelector('#' + questionID + ' li:last-of-type');

    if (lastListItem) {

        lastListItem.style.borderTop = 'none';
        lastListItem.style.margin = '0';
        lastListItem.style.padding = '0';
    }

    var labels = document.querySelectorAll('#' + questionID + ' label');

    labels.forEach(function(label) {
        label.style.setProperty('margin-top', '0', 'important');
    });

This code has li: last of type/last list item = none; and according to the question, the question/type is li.

You indicated your Overall Experience at ${e://Field/external_name} was&nbsp;<b>Poor</b>.&nbsp;<br>
<br>
If you would like to further discuss this experience, please contact us:
<ul>
	<li>Community Health Network Patient Relations and Advocacy
	<ul>
		<li>Weekdays: 8am-5pm EST</li>
		<li>Phone: <a href="tel:13176217000">1.317.621.7000</a></li>
		<li>Email: <a href="mailto:PatientRelationsandAdvocacy@eCommunity.com?subject=Patient%20Experience%20Survey%20Response">PatientRelationsandAdvocacy@eCommunity.com</a></li>
	</ul>
	</li>
</ul>

 

Ideally yes but these sometimes webpage/template create additional items with different container/classes so it's better to always do inspect element and apply css based on that. 

 

I just replicated your issue in my test survey, you can put this style in your question page(go to HTML view) like below and lines will disappear. I just changed the color to white. 

 

<style>
    li:last-of-type {
    border-top: 2px solid white;
}
</style>

 

 

Leave a Reply


Terms & Conditions