Asset Manager loads css in different order with debug=1

More
3 years 1 week ago #171406 by aellison9
I am encountering an issue with the rendering order of CSS between debug=0 and debug=1. I understand the asset manager is disabled when debug=1 and I always clear my asset manager cache within the global settings to make sure I am working with the current versions.

$config = '3.9.0';
$config = 349;
$config = '180604';
$config = true;
$config = '30036';

I have extended the Fruity theme and added some CSS into the custom.css file. I also have a custom question theme with CSS that is intended to override some settings within custom.css. I know I can accomplish my intent by manipulating the specificity on some of the directives but that is not the intent of this question.

My question is why is the CSS loaded in a different order when debug is on or off? With debug = 1, I do not have to for specificity using the !important directive. With debug = 0, the CSS loads in a different order requiring specificity using the !important directive.

I have attached two screen shots from the chrome dev tools showing the different CSS load order for the same question within the same survey.

I appreciate any insight as to why this might be occurring.
Attachments:
The topic has been locked.
More
3 years 1 week ago #171424 by DenisChenu
Hi,

I think it's an issue and must be reported.

And i think the good order must be
- All LimeSurvey core css
- Question template css
- Survey theme css

Survey theme must be the last, always (and more for custom.css)

If you can : update to last version and report the issue www.limesurvey.org/community/bug-tracker

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The topic has been locked.
More
3 years 1 week ago #171432 by tpartner
I agree that it should be reported as a bug but I don't agree with your order. I think the custom question theme should be last - the questions are more granular and can be placed in any theme so should override theme styles.

- Core styles CSS
- Custom survey themes CSS
- Custom question theme CSS

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
3 years 1 week ago #171433 by DenisChenu

the questions are more granular and can be placed in any theme so should override theme styles.

But then : admin GUI don't have a clean solution to update css of question template.

I really think question template mus be before for this reason :)

Question template can easily add own class, not in «default» theme.

For example :
<input class="form-control my-form-control">

And the question css have .my-form-control.form-control{background:red}

Or use .myquestion-template .form-control{background:red}

then Survey theme css can set .myquestion-template .form-control{background:orange}


Really more easily :)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The topic has been locked.
More
3 years 1 week ago - 3 years 1 week ago #171434 by DenisChenu
@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}

@tparner : i think css class of question for Question template have automatically set to question template name. Don't seem to be. can you confirm ?
I think it's the solution : here : github.com/LimeSurvey/LimeSurvey/blob/50...ntimeHelper.php#L387

Set the question class to : "core-class question-template-class"
No ?

PS : adding the template name to question class here : github.com/LimeSurvey/LimeSurvey/blob/50...timeHelper.php#L1703

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
Last edit: 3 years 1 week ago by DenisChenu.
The topic has been locked.
More
3 years 1 week ago #171437 by tpartner
Sorry, I still think the CSS should cascade down through the structure - Core --> Survey --> Question.

Yes, you can enforce rules by making them more specific but that works both ways.

Regarding your comment about the GUI, I assume that at some point it will be possible to edit custom question themes as we now can with survey themes.

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
3 years 1 week ago - 3 years 1 week ago #171438 by DenisChenu
Yes but : survey theme are attached to Survey.

Maybe in one survey you want : green color, and in another red color for same question template. Then : if question template is loaded after Survey template : only solution for such situation is to use !important;

Related feature request : bugs.limesurvey.org/view.php?id=13883

PS :
For css : i'm always to more global to more specific, then here it's
- Question type (core class and css)
- Question (question class and css)
- Question in THIS survey (Survey theme class and css)
- THIS Question in THIS survey (Survey theme class and css + Question setting class)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
Last edit: 3 years 1 week ago by DenisChenu.
The topic has been locked.
More
3 years 1 week ago - 3 years 1 week ago #171466 by aellison9
Thank you both and much like each of you, I can argue pros and cons to the load order each of you propose. If pushed for a position, I might agree more with Denis that Question Themes should load before the Survey Theme custom.css since this would lend itself better for "survey branding and color schemes".

@tpartner - using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important. If the custom question themes loaded before the Survey Themes, I would still need to include the class in my custom.css but it would not encumber me with specificity requirements and in my opinion, be the cleaner option.

On the flip side, my custom question theme incorporates several question types (list-radio, array, multiple-choice, etc) which essentially leverage the same CSS (and classes) so it made more sense to incorporate it into the Survey Theme custom.css and use the Question Theme .css file for anything that might be slightly different in the implementation.

At the end of the day, we just need a consistent load order between debug and non-debug. At least then we can work around any nuances without being overly convoluted. I will upgrade to the latest to see if the issue persists. More to come.

@denischenu - I am not sure this makes sense to me.

@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}


.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.
Last edit: 3 years 1 week ago by aellison9.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
3 years 1 week ago #171474 by LouisGac
as always with hard debate, it will finish with an option to choose the order :-p
The topic has been locked.
More
3 years 1 week ago #171477 by jelo
If there is an option, the debate will get to the question: What is the default order?
;-)

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
More
3 years 1 week ago - 3 years 1 week ago #171481 by tpartner

using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important.

@aellison9, that's not true. Yes, you need to add a rule to the survey theme CSS file (as you would anyway), but simply specify the survey theme class. The <body> element is assigned a theme-specific class for situations like this.

.your_theme_name .card-sort-question .card {
    background-color: purple;
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 3 years 1 week ago by tpartner.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
More
3 years 1 week ago #171488 by DenisChenu


@denischenu - I am not sure this makes sense to me.

@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}


.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.

OK,

Then you need survey theme replace Question theme .label-placement . Sorry for missunderstanding , i dond't have your theme for testing ;)

The <body> element is assigned a theme-specific class for situations like this.

Oh tight , it fix the issue :). Question : did this apply to child themes ? vanilla3 extend vanilla2 extend vanilla : have 3 Survey theme class ?


But i still think less is better :). In general : i think Question theme dev create new specific class for new Question and set a "default style" in class. LimeSurvey admin can set another style more easily (and in future : have css for each survey ;) ).

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The topic has been locked.
More
3 years 6 days ago #171547 by aellison9
Sorry for the delay. upgraded to 3.13.2 and still have the load order issue.

@tpartner thanks, I will try your suggestions to see if I can work around the issue.

Did we determine that a bug report was in order if the issue persisted into 3.13.2?
The topic has been locked.
More
3 years 5 days ago #171554 by tpartner
Sure, file a bug report - that will keep it on Louis' radar.

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
3 years 4 days ago #171570 by DenisChenu



Did we determine that a bug report was in order if the issue persisted into 3.13.2?

Load order must be same with debug and without debug :).

then yes

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development . I don't answer to private message.
The topic has been locked.

Start now!

Just create your account and start using Limesurvey today.

Register now