Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

reduce the padding in a individual question

  • bierbier
  • bierbier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago #221426 by bierbier
hi,

I'm trying to unpadding a single question right now. Removing padding for all questions is not a problem.

I tried to address the question with the question id but in that format I can't remove the padding.

can someone help me ?
The topic has been locked.
  • tammo
  • tammo's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 5 months ago #221431 by tammo
Please tell us what version of LimeSurvey you use and what template for the survey.

A sketch of what you want to achieve would possibly help faster.


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • bierbier
  • bierbier's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago - 2 years 5 months ago #221433 by bierbier
Replied by bierbier on topic reduce the padding in a individual question
hi,

i use the version 5.1.16+211020 and the extension of fruity.

I would like to reduce the distance between the text and the question container.

I use a list (radio buttons). I can change the color via the direct address but not the spacing.

Among other things i tried:
Code:
#question368{ padding-top:0px }
Attachments:
Last edit: 2 years 5 months ago by bierbier.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #221436 by Joffm
Hi,
sorry, but what is this used for?
You have a single punch question with only one answer option and no question text?

I think you didn't show everything, or?
Therefore you only get what you showed. (No question text, only one answer option)

Well, with this in your custom.css
Code:
.no-pad .question-title-container, .question-valid-container {
  padding-top:0;
  padding-bottom:0;
}
 
.no-pad .answer-container, .no-pad .ls-answers {
  padding-top: 0;
  padding-bottom: 0;
}
.no-pad .list-unstyled {
    margin-bottom:0;
}

you get this


You see that I used the class ".no-pad" which you have to add to the question setting, not to affect all questions of your survey.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • tammo
  • tammo's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 5 months ago #221455 by tammo
Although I think that Joffm's solution is a good one, there is also another approach, using inline styling.
Using Fruity theme in LS 5.x: research.respondage.com/index.php/635525?newtest=Y&lang=en
Please see attached survey .lss for solution

Tammo


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
More
2 years 5 months ago #221591 by pnickel
Replied by pnickel on topic reduce the padding in a individual question
I'm not sure what the .no-pad style does. Does that only set to 0 or if I put in "5px" will it set to 5 pixels?

I'm also confused about your example. The bottom padding / margin on "Option 1" is clearly not 0. So is there a minimum spacing above 0 that we cannot reduce?

Likewise, since none of object paddings or margins are visible in any of the existing CSS files, how do I know that 'margin' does not need to be changed.

(And a bigger question: Why does LimeSurvey not allow these paddings and margins to be set in a basic set-up field? Ie: Is there any plan to add this to the program?)
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #221603 by tpartner
Replied by tpartner on topic reduce the padding in a individual question
no-pad is a classname applied to the question and the corresponding rules are defined in your custom.css file.

You will need some CSS/HTML skills, but you can change the question layout in a custom survey theme - manual.limesurvey.org/New_Template_System_in_LS3.x/en

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
More
2 years 5 months ago #221640 by pnickel
Replied by pnickel on topic reduce the padding in a individual question
I know some HTML/CSS. I added the recommended code to my Custom.css. No change in layout.

Is there anyplace that lists all the CSS style names used by LimeSurvey and what they apply to? I have looked through all the CSS files and not found anything that appears related to margins or padding of objects. So I can only guess that there are a number of "secret" styles hidden somewhere, .nopad being one of them.

Then, too, if I change the definition of a style in Custom.css, will that override the previous definition in one of the standard css files?
The topic has been locked.
  • tammo
  • tammo's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
2 years 5 months ago #221653 by tammo
Joffm and  Tpartner referred to a class called .no-pad and you call it .nopad, which is a difference.

LS gives you the opportinity to add a class to a question, but when that class does not already exits (as is the case with .no-pad) you have to create this class by defining it in the custom.css.

So: (1) add a class to the question and (2) define it in custom.css

Or: add styling in the question text as I explained. That way you do not have to add a class to the question and extra css styling for that class to custom.css.

The solution that Joffm and Tpartner refer to is adding a class that is after that als available for other questions where you may want to use it. The solution that I described works on this one question only and does not clutter your custom.css.

Tammo

 


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
More
2 years 5 months ago #221717 by pnickel
Replied by pnickel on topic reduce the padding in a individual question
I apologize for not being specific in my spelling. Yes "no-pad" and "nopad" are different, but only if I define it as one spelling and use it as another. However, "no-pad" seems to be a previously defined class and thus spelling is important.

In this case, adding styling to the question does not help, because a style, applied to the text, does not affect the container. For that I need to customize the container styles. I can't enter styles into the HTML outside of text.

I posted 4 or 5 questions concerning modification of LimeSurvey layout and I don't know if I said it on this thread, but I do not like the wide margins and/or padding for containers and how questions can have containers within containers. Such spacing may be nice for use on a phone, but is wasteful on anything larger. Larger spacing can make the survey look longer and could then affect how people respond.

I really want to reduce the spacing within and between questions. To do that, I need to know the names of the classes used for the various container objects. Is there any source that will list for me all the classes used by LimeSurvey? I have looked thru all the css files in LimeSurvey and have found nothing about padding or margins. (Someone did give me a link to Bootstrap that shows a lot of classes it uses and does mention some of the default settings. So I can change some of that.) .No-pad does eliminate the space between the question stem and the response options and I can adjust that by changing "0" to another number. However, .no-pad does not change the spacing between questions, which I also want to reduce.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #221718 by tpartner
Replied by tpartner on topic reduce the padding in a individual question

Is there any source that will list for me all the classes used by LimeSurvey?

Use the browser developer tools (F12) to explore what classes and rules are affecting elements.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
2 years 5 months ago #221722 by pnickel
Replied by pnickel on topic reduce the padding in a individual question
Thanks! I hadn't even thought about that. I downloaded the HTML. That shows me the whole <style> section, plus the classes used on each object. Then I can use the web tool to see the characteristics of each object.

Am I correct that I can use Custom.css to change the definition of any style? Thus where they have: body {padding-bottom: 10px; padding-top: 60px;}, I could enter that into Custom.css and change to maybe 5 and 15?
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose