Welcome to the LimeSurvey Community Forum

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

Soucis de mise en page

hercut
Topic Author
Offline
New Member

More

5 years 2 weeks ago #219909 by hercut

Soucis de mise en page was created by hercut

Bonjour,
J'ai des difficultés concernant la mise en page et la gestion des couleurs des titres.

Concernant la mise en page, j'ai un problème sur les tableaux.
Quand je traite une question, j'ai réussi gérer la taille des cellules comme il faut.
Mais, une fois que l'on passe en groupe, paf, ca remet la présentation normal.

Sachant que pour les tableaux j'utilise une fonction d'ajout de ligne manuel :

Warning: Spoiler!

Code:

<h2><span style="color:#00467f;">Enfants et personnes à charge (majeurs protégés)</span></h2>
<script>
$(document).ready(function() {

   // A function to add or remove rows of an Array (Multi Flexible)(Text) question
    function varLengthArray(qID) {
        
        if ($('#question'+qID+'').length > 0) {
            
            // The HTML content of the Add/Remove elements - modify as you wish
            var addContent = '[+] Ajouter une ligne';
            var removeContent = '[-] Retirer une ligne';

            // Create the Add and Remove elements & insert them
            var el1 = document.createElement('div');
            el1.setAttribute('id','addButton'+qID);
            el1.setAttribute('class','btn btn-primary');
            document.body.appendChild(el1);
            var el2 = document.createElement('div');
            el2.setAttribute('id','removeButton'+qID);
            el2.setAttribute('class','btn btn-danger');
            document.body.appendChild(el2);

            // Move them to after the array
            $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
            $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

            // Insert their HTML
            $( 'div#addButton'+qID ).html( addContent );
            $( 'div#removeButton'+qID ).html( removeContent );

            // Style the elements - you can modify here if you wish
            $( 'div#addButton'+qID ).css({
                'margin':'10px 0 10px 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });

            $( 'div#removeButton'+qID ).css({
                'margin':'10px 0 0 10px',
                'padding':'1px',
                'text-align':'center',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });

            // Initially hide the Remove element
            $( 'div#removeButton'+qID ).hide();

            // Call the functions below when clicked
            $( 'div#addButton'+qID ).click(function (event) {
                addRow(qID);
            });
            $( 'div#removeButton'+qID ).click(function (event) {
                removeRow(qID);
            });

            // Function to add a row, also shows the Remove element and hides the
            //Add element if all rows are shown
            function addRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                $( 'div#removeButton'+qID ).show();
                if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                    $( 'div#addButton'+qID ).hide();
                }
            }

            // Function to remove a row, also clears the contents of the removed row,
            // shows the Add element if the last row is hidden and hides the Remove
            // element if only the first row is shown
            function removeRow(qID) {
                var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
                var rowCount = $( arrayRow ).size() - 1;
                $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                $( 'div#addButton'+qID ).show();
                if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' )  {
                    $( 'div#removeButton'+qID ).hide();
                }
            }

            // Just some initialization stuff
            var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
            var rowCount = '';

            // Initially hide all except first row or any rows with populated inputs
            $( arrayRow ).each(function(i) {
                if ( i > 0 ) {
                    // We also need to give the hidden rows a name cause IE doesn't
                    // recognize jQuery :visible selector consistently
                    $( this ).attr('name', 'hidden').hide();

                    $('input[type=text]', this).each(function(i) {
                        if ($(this).attr('value') != '') {
                            $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                            $( 'div#removeButton'+qID ).show();
                        }
                    });
                    rowCount = i;
                }
            });
        }
    }

    // Call the function with a question ID
    varLengthArray({QID});

});

</script><script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');

    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });


    // Insert selects
    $('.answer-item.answer_cell_XSQ005', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">Oui</option>\
  <option value="2">Non</option>\
</select>');
    

        // Listeners on select elements
        $('.inserted-select', thisQuestion).on('change', function(i) {
            if($(this).val() != '') {
                $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
            }
            else {
                $(this).closest('.answer-item').find('input:text').val('').trigger('change');
            }
            
            
        });
 
        // Returning to page
        $('.with-select input:text', thisQuestion).each(function(i) {
            var thisCell = $(this).closest('.answer-item');
            var inputText = $.trim($(this).val());
            var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
            $('select.inserted-select', thisCell).val(selectval);
            
            // 4th column conditional on 2nd column
            if($(this).closest('.answer-item').hasClass('answer_cell_X002')) {
                 handleColumn4($('select.inserted-select', thisCell));
            }
        });

    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
  .custom-array table.subquestion-list thead .column-0 {  width: 3%; }
</style>

Je gère donc la taille des cellules avec la fonction en bas du script :

Code:

  .custom-array table.subquestion-list thead .column-0 {  width: 3%; }

Voir les screens en PJ.

Je recherche aussi la possibilité de changer les titres des groupes dans le CSS, mais je ne trouve pas (je n'ai aucune notion en css), j'aimerais changer la taille et la couleur.

Merci beaucoup de votre aide.

Capture d’écran 2021-09-20 à 10.58.13.png

Capture d’écran 2021-09-20 à 10.57.49.png

Capture d’écran 2021-09-20 à 10.57.58.png

The topic has been locked.

Nickko
Offline
LimeSurvey Community Team

More

5 years 2 weeks ago #219913 by Nickko

Replied by Nickko on topic Soucis de mise en page

Le titre des groupes, c'est du contenu, ça ne se change pas dans les CSS.

Je pense que lorsque du passe de Groupe à pas groupe, la structure de la page change et donc tu dois adapter ton sélecteur CSS.

Aide toi de l'inspecteur de code de ton navigateur.

Nickko
Head of ergonomics, UX & UI.

The topic has been locked.

hercut
Topic Author
Offline
New Member

More

5 years 2 weeks ago #219917 by hercut

Replied by hercut on topic Soucis de mise en page

Merci de ton retour,
J'ai bien essayé de regarder dans mon navigateur avec l'inspecteur.
Et je comprend ton orientation, mais et étant donné que je n'y connais rien en CSS et bha je mouline ...

The topic has been locked.

hercut
Topic Author
Offline
New Member

More

5 years 4 days ago #220389 by hercut

Replied by hercut on topic Soucis de mise en page

Je me permets de remonter le sujet.
Je ne comprends pas comment faire :'(

Si vous aviez un endroit particulier ou il faut que je regardes?

The topic has been locked.

Nickko
Offline
LimeSurvey Community Team

More

5 years 4 days ago #220390 by Nickko

Replied by Nickko on topic Soucis de mise en page

Il faudrait t'adresser à une personne qui peut le faire pour toi.
Un développeur web ou peut-être un webdesigner.

Je peux difficilement d'apprendre le CSS par forum interposée.

Nickko
Head of ergonomics, UX & UI.

The following user(s) said Thank You: DenisChenu

The topic has been locked.

Moderators: Nickko, holch, tpartner

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Soucis de mise en page

Lime-years ahead

Legal

About Us

Open Source