Topic: Table header doesn´t show properly

Christian Leon free asked 4 years ago

Expected behavior: The table heaer is in line with the columns of the table body

Actual behavior: The table header is not in line with the columns of the table body

Resources (screenshots, code snippets etc.)enter image description here

enter image description here

This is fixed when I click on the sort option in any column or when I select a number of entries to display in the selector. Anybody can help me please?
        %table#device-table.table.table-striped.table-bordered.table-hover.table-sm.btn-table{:cellspacing => "0", :width => "100%"}
            = "#{t('base.forms.list_of')}#{t('things.index.device')}"

Grzegorz Bujański staff commented 4 years ago

Hi. I understand you are using Haml markup? The code you have sent does not look complete.

Christian Leon free answered 4 years ago

Hi Grzegorz, Yes I´m using Haml markup. The complete code is:

        = link_to dashboard_path, role: "button", class: "btn btn-outline-white btn-rounded btn-sm px-2", title: t("base.forms.back") do
        = link_to new_thing_path, role: "button", class: "btn btn-outline-white btn-rounded btn-sm px-2", title: t("") do
        = form_tag(things_path, method: :get, class:"form-inline justify-content-around")
        = text_field_tag(:search, params[:search], {class: "form-control mr-sm-2", placeholder: "Search"})
        = select_tag "status", options_for_select_status(''), {include_blank: "Status", class: "form-control mr-sm-2", :searchable => "Search here..."}
        = select_tag "customer", options_for_select_customer(@current_user.company_id, ''), {include_blank: "Customer", class: "form-control mr-sm-2", :searchable => "Search here..." }
        %button.btn.btn-outline-success{:type => "submit"} Search
            %table#device-table.table.table-striped.table-bordered.table-hover.table-sm.btn-table{:cellspacing => "0", :width => "100%"}
                = "#{t('base.forms.list_of')}#{t('things.index.device')}"
                - @things.each do |thing|
                    %td= thing.code_scan
                    %td= thing.status.description
                    - if thing.order
                      %td.align-center= link_to thing.order.status.description, show_order_path(thing.order.slug), class: 'btn btn-sm btn-primary', title: "Order #{}"
                    - else
                      %td 'NA'
                    %td= thing.description
                    %td= thing.initial_address
                    %td= thing.final_address
                    %td= thing.user ? "#{thing.user.first_name} #{thing.user.last_name}" : 'NA'
                      .btn-group-vertical{"aria-label" => "button group", :role => "group"}
                        = link_to show_thing_path(thing.slug), class: 'card__button btn btn-primary btn-sm', title: 'Details' do
                        = link_to edit_thing_path(thing.slug), class: 'card__button btn btn-success btn-sm', title: 'Update' do
                        -# = link_to destroy_thing_path(thing.slug), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn red btn-space', title: "Eliminar" do
                        -#   %i.medium.material-icons delete_forever
            -#   .page_info
            -#     = page_entries_info @things
            -#   = will_paginate @things, container: false

Christian Leon free commented 3 years ago

Hi Grzegorz, do you have any suggestion for this topic?

Grzegorz Bujański staff commented 3 years ago

Hi. I'm sorry it takes so long, unfortunately I don't use haml on a daily , that's why it's a delay. I was able to convert your code to HTML and I have no idea what could be wrong with it. After converting to HTML, the table looks fine. see for yourself: removed some code that had no effect on the appearance of the table itself to improve readability and one if statement in tbody which rendered two columns so that the number of columns was correct

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.0
  • Device: Computer
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No