Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
en:create:layout-inputs [07.01.2015 22:24] – [Image Set Guidelines] alexander.ritteren:create:layout-inputs [13.05.2015 10:17] – Disabling single inputs admin
Line 16: Line 16:
 ===== Image Set Guidelines ===== ===== Image Set Guidelines =====
  
-  * All images needed for custom input buttons are located in __one___ image with a total size of 96 x 256 pixels in a 32-pixel grid.  +  * All images required for custom input buttons are arranged in __one___ image with a total size of 96 x 256 pixels in a 32-pixel grid.  
-  * The necessary elements are arranged as in the grid as displayed below. +  * The necessary items are arranged as in the grid displayed below. 
-  * The image is put to the top left in every grid cell. How many grid cells are displayed is determined in the //side length// specification in "Questionnaire Layout"+  * The image is put to the top left in every cell. The number of grid cells displayed is determined in the //side length// option in "Questionnaire Layout"
      
 ^  Radio button\\    Checkbox\\    Other  ^ ^  Radio button\\    Checkbox\\    Other  ^
Line 32: Line 32:
  
  
-A completed image set looks as follows (only with a transparent background and without ledger lines and frames.+A completed image set looks as follows (only with a transparent background and without guides and frames)
  
-^Image Set with Different Displays for Radio Buttons and Checkboes^Image Set with a Consistent Display for all Input Buttons^+^Image Set with Different Displays for Radio Buttons and Checkboes^Image Set with a Standardized Display of all Input Buttons^
 |{{:de:create:exp.inputs-custom.medium.png?nolink|Image Set for Larger Input Buttons}}|{{:de:create:exp.inputs-custom.circles.png?nolink|Image Set for Circles with Crosses (non-differentiated)}}| |{{:de:create:exp.inputs-custom.medium.png?nolink|Image Set for Larger Input Buttons}}|{{:de:create:exp.inputs-custom.circles.png?nolink|Image Set for Circles with Crosses (non-differentiated)}}|
  
 +
 +===== Disable Selectively =====
 +
 +The custom modification may be disabled for single questions or inputs. To do so, the input must contain the CSS class "preventCustomInputs" or a parent HTML element must contain this class.
 +
 +For complete questions, it's sensible to use a surrounding ''<div>'' HTML element:
 +
 +<code php>
 +html('<div class="preventCustomInputs">');
 +question('AB01');
 +html('</div>');
 +</code>
 +
 +You may also place the question in the questionnaire via drag & drop and place //HTML code// elements before and after. The result is the same:
 +
 +<code html>
 +<div class="preventCustomInputs">
 +</code>
 +
 +<code html>
 +</div>
 +</code>
 +
 +To display single inputs in the browser's default layout, [[:en:create:javascript|JavaScript]] is helpful. This JavaScript code will prevent the layout modification for the input ''AB01_021'', if placed below the question.
 +
 +<code html>
 +<script type="text/javascript">
 +<!--
 +document.getElementById("AB01_021").classList.add("preventCustomInputs");
 +// -->
 +</script>
 +</code>
en/create/layout-inputs.txt · Last modified: 19.03.2021 09:43 by sophia.schauer
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki