CODEWITHSUNDEEP
htmlhaml
Ryflex
Ryflex

Reputation: 5769

Getting the same output order in haml for table headers with spans and icons

I'm trying to make my titles in tables all the same across every file however I am running into issues were it doesn't like the haml and as such doesn't work.

My code looks like below, where you can see 3 different titles and you can see they're all different different style/layout and as a result they render differently...

main.haml:

- import "_macs.haml" as mac
%tr
  %th
    %span{"data-title": "Title tip"} Title 1
    = mac.doaction("sort_action1", is_sortable, "asc")

  %th
    = mac.doaction("sort_action2", is_sortable, "asc")
    %span Title 2

  %th
    Title 3
    = mac.doaction("sort_action3", is_sortable, "asc")

I'm ignoring the actual contents of the I tags in the examples below

The first title renders simply like:

<th>
  <span data-title="Title tip">Title 1</span>
  <i></i>
</th>

The second title renders simply like:

<th>
  Title 2
  <i></i> 
</th>

The third title renders simply like:

<th>
  <i></i> 
  <span>Title 3</span>
</th>

Desired Output

I want to be able to make them all appear like below where the I tags are above the span.

<th>
  <i></i>
  <span data-title="Title tip">Title 4</span>
</th>

AND

<th>
  </i></i>
  <span>Title 4</span>
</th>

_macs.haml:

The content of the below isn't important but we want to keep this macro.

- macro doaction(column, is_sortable, default_dir)
  -if is_sortable
    %i.icon{'class': 'sortable', 'data-column': '#{column}', 'data-title': 'Sort', 'data-default-dir': '#{default_dir}'}
-endmacro

Upvotes: 0

Views: 41

Answers (1)

Ritesh Ranjan
Ritesh Ranjan

Reputation: 1012

Try this:

- import "_macs.haml" as mac
%tr
  %th
    = mac.doaction("sort_action1", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 1


  %th
    = mac.doaction("sort_action2", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 2

  %th
    = mac.doaction("sort_action3", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 3

Upvotes: 1

Related Questions