Forum for discussing general topics related to Couch.
3 posts Page 1 of 1
Hello everybody,
i was trying to display on 2 different row, 5 check boxes and 5 conditional fields, but i couldn't.
The image below (figura1)demonstrates how much I get.

figura_1.jpg
Figura1
figura_1.jpg (56.27 KiB) Viewed 1033 times


Then I'd like to have the same style in Figure 2, but if I change
type = 'row' with type = 'group', logically nothing works anymore

Figura2.jpg
Figura 2
Figura2.jpg (27.44 KiB) Viewed 1033 times


This is the code used

Code: Select all
<cms:editable name='social_group' label='Sezione Social' desc='Social' type='row' collapsed='1' order='2' />  

    <cms:editable name='opzione_facebook' hidden='1'
              label="Opzione Facebook" desc='Spunta la casella per facebook" '
              type="checkbox"
           class='col-xs-3'
           opt_values="SI"
          group='social_group'   />
          
           <cms:editable name='opzione_twitter' hidden='1'
              label="Opzione Twitter" desc='Spunta la casella per twitter" '
              type="checkbox"
           class='col-xs-3'
           opt_values="SI"
          group='social_group'  /> 
          
      
          
            <cms:func _into='my_cond' opzione_facebook=''>
               <cms:if "<cms:is 'SI' in=opzione_facebook />">show<cms:else />hide</cms:if>
               </cms:func>

          <cms:editable name='link_facebook'
          label="Link Facebook" desc='Link Facebook'
         type="text"
       class='col-xs-3'
         not_active=my_cond
         group='social_group'  /> 
         
      
        <cms:func _into='my_cond' opzione_twitter=''>
               <cms:if "<cms:is 'SI' in=opzione_twitter />">show<cms:else />hide</cms:if>
               </cms:func>

          <cms:editable name='link_twitter'
          label="Link Twitter" desc='Link Twitter'
         type="text"
       class='col-xs-3'
         not_active=my_cond
          group='social_group'  /> 


Thank you
Hi,

To display regions side-by-side, we'll need to use 'row' i.e. we cannot change 'row' to 'group' and expect the same display of regions.

What we can do is -
create a new 'group' and nest the existing 'row' within it.

Please try this amended code -
Code: Select all
<cms:editable name='social_group' label='Sezione Social' desc='Social' type='group' collapsed='1' order='2'>  
    <cms:editable name='social_row' type='row'> 
        <cms:editable name='opzione_facebook' hidden='1'
            label="Opzione Facebook" desc='Spunta la casella per facebook" '
            type="checkbox"
            class='col-xs-3'
            opt_values="SI"
        />

        <cms:editable name='opzione_twitter' hidden='1'
            label="Opzione Twitter" desc='Spunta la casella per twitter" '
            type="checkbox"
            class='col-xs-3'
            opt_values="SI"
        /> 

        <cms:func _into='my_cond' opzione_facebook=''>
            <cms:if "<cms:is 'SI' in=opzione_facebook />">show<cms:else />hide</cms:if>
        </cms:func>
        <cms:editable name='link_facebook'
            label="Link Facebook" desc='Link Facebook'
            type="text"
            class='col-xs-3'
            not_active=my_cond
        /> 

        <cms:func _into='my_cond' opzione_twitter=''>
            <cms:if "<cms:is 'SI' in=opzione_twitter />">show<cms:else />hide</cms:if>
        </cms:func>
        <cms:editable name='link_twitter'
            label="Link Twitter" desc='Link Twitter'
            type="text"
            class='col-xs-3'
            not_active=my_cond
        /> 
    </cms:editable>         
</cms:editable>

As you can see, I have added the row to a group and this is what we get -
Screenshot from 2021-06-26 15-41-19.png
Screenshot from 2021-06-26 15-41-19.png (17.66 KiB) Viewed 1012 times

Coming now to your first problem -
the 'col-xs-3' you used dictates how many 'columns' (with regions within) a row can contain; the total should come to '12' so we can have four such 'col-xs-3' columns. Anything that follows will be automatically broken into a new row.

To override this automatic breaking, you can use 'col-break' class - so, for example, in your case if we use this class with he third region..
Code: Select all
        <cms:editable name='link_facebook' 
            label="Link Facebook" desc='Link Facebook'
            type="text"
            class='col-xs-3 col-break'
            not_active=my_cond
        />

.. you'll get the following
Screenshot from 2021-06-26 15-37-36.png
Screenshot from 2021-06-26 15-37-36.png (17.44 KiB) Viewed 1012 times

As an alternative, you may create multiple rows within the group; so, since the existing row shows two of the five regions you want, you can create new rows that hold the rest of the regions.

Hope this helps.
Thanks KK for the great help.
Eventually I found the right balance with the code below.

Code: Select all
<cms:editable name='social_group' label='Sezione Social' desc='Social' type='group' collapsed='1' order='2'>  
          <cms:editable name='social_row' type='row'>

    <cms:editable name='opzione_facebook' hidden='1'
              label="Facebook"
              type="checkbox"
           class='col-xs-2'
           opt_values="SI"
         />
          
           <cms:editable name='opzione_twitter' hidden='1'
              label="Twitter" 
              type="checkbox"
           class='col-xs-2'
           opt_values="SI"
            /> 
         
         
          <cms:editable name='opzione_instagram' hidden='1'
              label="Instagram" 
              type="checkbox"
           class='col-xs-2'
           opt_values="SI"
            /> 
         
         
          <cms:editable name='opzione_youtube' hidden='1'
              label="Youtube"
              type="checkbox"
           class='col-xs-2'
           opt_values="SI"
            /> 
         
         
           <cms:editable name='opzione_pinterest' hidden='1'
              label="Pinterest" 
              type="checkbox"
           class='col-xs-2'
           opt_values="SI"
            /> 
         
         
      
          
            <cms:func _into='my_cond' opzione_facebook=''>
               <cms:if "<cms:is 'SI' in=opzione_facebook />">show<cms:else />hide</cms:if>
               </cms:func>
            
            
             <cms:editable name='link_facebook' order='3'
          label="Link Facebook" desc='Link Facebook'
         type="text"
       class='col-xs-2 col-break'
         not_active=my_cond
         group='social_group'  /> 

       
            <cms:func _into='my_cond' opzione_twitter=''>
               <cms:if "<cms:is 'SI' in=opzione_twitter />">show<cms:else />hide</cms:if>
               </cms:func>
      
         <cms:editable name='link_twitter' order='4'
          label="Link Twitter" desc='Link Twitter'
         type="text"
       class='col-xs-2 '
         not_active=my_cond
          group='social_group'  /> 
          
      
               <cms:func _into='my_cond' opzione_instagram=''>
               <cms:if "<cms:is 'SI' in=opzione_instagram />">show<cms:else />hide</cms:if>
               </cms:func>
            
            
          <cms:editable name='link_intsagram' order='5'
          label="Link Instagram" desc='Link Instagram'
         type="text"
       class='col-xs-2 '
         not_active=my_cond
         />     
      
            
           <cms:func _into='my_cond' opzione_youtube=''>
               <cms:if "<cms:is 'SI' in=opzione_youtube />">show<cms:else />hide</cms:if>
               </cms:func>
            
            
          <cms:editable name='link_youtube' order='6'
          label="Link Youtube" desc='Link Youtube'
         type="text"
       class='col-xs-2'
         not_active=my_cond
            />     
            
            
            <cms:func _into='my_cond' opzione_pinterest=''>
               <cms:if "<cms:is 'SI' in=opzione_pinterest />">show<cms:else />hide</cms:if>
               </cms:func>
      
      
      
         <cms:editable name='link_pinterest'  order='7'
          label="Link Pinterest" desc='Link Pinterest'
         type="text"
       class='col-xs-2'
         not_active=my_cond
            /> 
        
      </cms:editable>
   </cms:editable>


I used col-break only for link_facebook, otherwise all the other links were positioned on subsequent rows.
The problem would reappear only if the user chooses not to display the facebook link (somewhat impossible), but that's okay.

Sezione-social.jpg
Final results
Sezione-social.jpg (38.77 KiB) Viewed 1008 times


Thank you
3 posts Page 1 of 1
cron