Search code examples
ruby-on-railsslim-lang

Rails & Slim: autoclosed tag does not fetch content


I have this template:

div class="col-md-offset-4 col-md-16"
  - if @campaign.errors.any?
    ul
  - @campaign.errors.full_messages.each do |e|
    li |e
= form_for @campaign do |f|
  div.form-group
  = f.label :name, class: "control-label"
  = f.text_field :name, class: "form-control"
  div.form-group
  = f.label :ad_link, class: "control-label"
  = f.text_field :link, class: "form-control"
  div.form-group
  = f.label :image, class: "control-label"
  = f.file_field :campaign_image, class: "file"
  div.form-group
  = f.submit "Create campaign"

Which renders following html:

<div class="col-md-offset-4 col-md-16"></div>
<form ...> </form>

So it gets me to empty div and form under, instead of form inside of div.

I tried to solve it by inserting usual html:

<div class="col-md-offset-4 col-md-16">
      - if @campaign.errors.any?
        ul
      - @campaign.errors.full_messages.each do |e|
        li |e
    = form_for @campaign do |f|
      div.form-group
      = f.label :name, class: "control-label"
      = f.text_field :name, class: "form-control"
      div.form-group
      = f.label :ad_link, class: "control-label"
      = f.text_field :link, class: "form-control"
      div.form-group
      = f.label :image, class: "control-label"
      = f.file_field :campaign_image, class: "file"
      div.form-group
      = f.submit "Create campaign"
</div>

But it turned out in some strange output, where form tag started inline inside div and didn't capture any fields or submit button.


Solution

  • Indentation is very important in slim. Look there the docs. So, you must write smth like this:

    div class="col-md-offset-4 col-md-16"
      |
      - if @campaign.errors.any?
        ul
      - @campaign.errors.full_messages.each do |e|
        li |e
      = form_for @campaign do |f|
          div.form-group
            = f.label :name, class: "control-label"
            = f.text_field :name, class: "form-control"
          div.form-group
            = f.label :ad_link, class: "control-label"
            = f.text_field :link, class: "form-control"
          div.form-group
            = f.label :image, class: "control-label"
            = f.file_field :campaign_image, class: "file"
          div.form-group
            = f.submit "Create campaign"