Search code examples
ruby-on-railsmodel-view-controllercheckboxhaml

Rails View using HAML template: Hiding checkbox and label by default


I'm working on a Rails View, it is using HAML as template, specifically I'm trying to display some records into a table with the bellow code:

%table.dataTable.miw430p.mw600p#program_types
  %tbody
  - JSON.parse(@student.subjects.to_json).each do |subject|
    %tr{:data=>{:position => program_type["index"], :id => subject["id"]}, class: cycle("odd", "even")}
      %td
        %span(data-display-not-editing)= subject["name"]
        %input.form-styled(type='text' name='name' data-display-not-editing class="hidden" required)
        %label.ml5
          %input(type='checkbox' name='status' class="hidden") 
          = "#{t('school.admin.current_status')}"

      %td.right
        %span.glyphicon.glyphicon-pencil.clickable.ml5(data-display-not-editing data-edit class="clickable")
        %span.glyphicon.glyphicon-trash.clickable.ml5.mr5(data-display-not-editing class="clickable")
        %button.btn(type='button' data-display-not-editing class="hidden" data-button-save)= t('school.save')
        %button.btn(type='button' data-display-not-editing class="hidden" data-button-cancel)= t('school.cancel')            

By default I'm hiding a textbox and a label, if the user clicks on data-edit, they will be shown, these are the specific lines what I'm talking about:

        %input.form-styled(type='text' name='name' data-display-not-editing class="hidden" required)
        %label.ml5
          %input(type='checkbox' name='status' class="hidden") 
          = "#{t('school.admin.current_status')}"

The checkbox is hidden but the element school.admin.current_status is visible, my question is: how can I hide the element school.admin.current_status by default just like the checkbox?

Thanks a lot


Solution

  • Put class: 'hidden' one level up

        %input.form-styled(type='text' name='name' data-display-not-editing class='hidden' required)
        %label.ml5{class='hidden'}
          %input(type='checkbox' name='status')  
          = t('school.admin.current_status')
    

    Or place translation in hidden div

        %input.form-styled(type='text' name='name' data-display-not-editing class='hidden' required)
        %label.ml5
          %input(type='checkbox' name='status' class='hidden')  
          .hidden= t('school.admin.current_status')