- Posts: 15
- Thank you received: 0
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
Less
More
2 years 7 months 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 :
Je gère donc la taille des cellules avec la fonction en bas du script :
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.
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 :
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.
The topic has been locked.
- Nickko
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 1955
- Thank you received: 410
2 years 7 months ago #219913
by Nickko
Nickko
Head of ergonomics, UX & UI.
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.
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
Less
More
- Posts: 15
- Thank you received: 0
2 years 7 months 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 ...
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
Less
More
- Posts: 15
- Thank you received: 0
2 years 6 months 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?
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
Less
More
- Posts: 1955
- Thank you received: 410
2 years 6 months ago #220390
by Nickko
Nickko
Head of ergonomics, UX & UI.
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.
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