reduce the padding in a individual question

More
6 months 4 weeks 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 ?

Please Log in to join the conversation.

More
6 months 4 weeks 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

Please Log in to join the conversation.

More
6 months 4 weeks ago - 6 months 4 weeks ago #221433 by bierbier
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:
#question368{ padding-top:0px }
Attachments:
Last edit: 6 months 4 weeks ago by bierbier.

Please Log in to join the conversation.

More
6 months 4 weeks 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
.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
Attachments:
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
6 months 3 weeks 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
Attachments:

Please Log in to join the conversation.

More
6 months 3 weeks ago #221591 by pnickel
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?)

Please Log in to join the conversation.

More
6 months 3 weeks ago #221603 by tpartner
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

Please Log in to join the conversation.

More
6 months 3 weeks ago #221640 by pnickel
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?

Please Log in to join the conversation.

More
6 months 3 weeks 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

Please Log in to join the conversation.

More
6 months 3 weeks ago #221717 by pnickel
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.

Please Log in to join the conversation.

More
6 months 3 weeks ago #221718 by tpartner

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.

Please Log in to join the conversation.

More
6 months 3 weeks ago #221722 by pnickel
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?

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now