Simple Layout - CSS to remove right padding | XM Community
Solved

Simple Layout - CSS to remove right padding

  • 15 February 2024
  • 9 replies
  • 186 views
R
Rank
Userlevel 1
Badge +4

In Simple Layout, the navigation buttons are aligned to the far right of the screen, with padding added to push the “next button” far beyond the edge of questions.  This design makes centering images, e.g. a logo, impossible.  (In the attached screen shot, the html to resize the graphic is being ignored, but that’s a separate issue.)

 

My end-goal is to remove the additional right-padding and have the navigation button align to the right, or centered.

 

I have seen the code from user @tom_1842, but it does not seem to impact Simple Layout; various code snippets for moving the navigation buttons also seem to fail on Simple Layout.

.Skin .SkinInner {
width: 100% !important;
max-width: 100% !important;
}

 

In short, is there a way to change padding (or make the container 100% width), and a way to move the nav buttons? (I’ve looked for a Simple Layout CSS guide, but have come up empty)

 

Screen shot example

 

icon

Best answer by Tom_1842 21 February 2024, 16:31

View original

9 replies

Sachin Nandikol
Rank
Userlevel 6
Badge +21

Hello @rbjak, 

If you're using the Simple Layout, making changes to its look and feel can be a bit challenging compared to other layouts. To center the buttons, you can use the following custom CSS code:
#navigation {
    justify-content: center !important;
}

Please try this code and let me know if it works for you. If you encounter any issues or if possible, please share the survey link with us so that we can inspect it and provide further assistance.

Sachin
R
Rank
Userlevel 1
Badge +4

Hello @rbjak, 

If you're using the Simple Layout, making changes to its look and feel can be a bit challenging compared to other layouts. To center the buttons, you can use the following custom CSS code:
#navigation {
    justify-content: center !important;
}

Please try this code and let me know if it works for you. If you encounter any issues or if possible, please share the survey link with us so that we can inspect it and provide further assistance.

 

Thanks for the suggestion; that did indeed center the navigation button within the question container.

 

Do you have any leads on how to either remove the right padding, or force questions to span the entire container width?

Sachin Nandikol
Rank
Userlevel 6
Badge +21

Hello  @rbjak, 

you can use the following custom CSS code to centre the questions:

{

margin: auto !impotant

padding: initial !important;

}

Sachin
A
Rank
Userlevel 7
Badge +21

@rbjak The simple layout doesn’t use .Skin or .SkinInner config, therefore your css is having no effect.

Please try this JS to center your image.

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qid = quest.questionId;
	const qc = quest.getQuestionContainer();
	const questionHolder = qc.querySelector("#question-display-" + qid);

	// These two lines will center your image
	questionHolder.style.marginLeft = "auto";
	questionHolder.style.marginRight = "auto";

	// These two lines will expand the image to cover the entire container.
	questionHolder.style.width = "100%";
	questionHolder.style.maxWidth = "100%";
});

 

R
Rank
Userlevel 1
Badge +4

For future user, the CSS code below did NOT work.

{

margin: auto !impotant

padding: initial !important;

}

However, @ahmedA’s JS code did center a specific question and is a good work-around until a global CSS solution is discovered.

Tom_1842
Rank
Userlevel 7
Badge +27

Hi, the below CSS should make the container 100% for Simple layout. I've also left in the lines that center the navigation buttons and added a couple that will center images.

/*full container simple layout*/
/*whole page*/
#page #auto-advance-banner-container, #page #footer, #page #header-container, #page #logo-container, #page #survey-canvas {
    width: 100% !important;
}

/*text entries*/
#app.no-mo-compo-layout .te .question-content .resize-wrapper, #app.no-mo-compo-layout .te .question-content input[type=text], #app.no-mo-compo-layout .te .question-content input[type=password], #app.no-mo-compo-layout .te .question-content textarea {
    width: 100% !important;
}

/*multiple choice*/
.mc.horizontal .choices .choice, .mc.vertical .choices .choice {
    max-width: 100% !important;
}

/*textgraphics*/
.question .question-display {
    max-width: 100% !important;
}

/*other codes*/
/*center buttons*/
#navigation {
    justify-content: center !important;
}

/*center images*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

 

R
Rank
Userlevel 1
Badge +4

@Tom_1842   That’s impressive, and worked exactly as I wanted.  Thank you very much.  Did you have to piece together the pieces, or is there a published CSS guide you used?

Tom_1842
Rank
Userlevel 7
Badge +27

Glad to hear! I created a Simple layout survey and filled it up with a bunch of question types. Then I previewed the survey and used my browser's Developer Tools/Inspect Element (F12) to see which CSS rules were in place that were affecting the width of the elements, and I created new rules where the width/max-width for these elements are set to 100%.

 

R
Rank
Userlevel 1
Badge +4

@Tom_1842 Rock on, thanks!  I had done some inspection, but missed some of the top level containers.   I appreciate you sharing the knowledge.

Leave a Reply


Terms & Conditions