Why my forms are losing formatting in Chrome?

Question

I work with Rails and I'm using the Inspinia template (from WrapBootstrap) to create a web app. I thought these templates were pretty much plug and play, but I'm having some issues with mine and I don't know the reason or how to solve it. I have already reached out to the customer support from Inspinia creators, but I've had no reply. JS also stops working in the affected fields. The form I'm using works fine with Firefox, but the formatting breaks in Chrome (and other browsers). I hope somebody can give me a hint about this issue. Below are some details:

Form seen in Firefox:

Form seen in Chrome:

Form erb code:

<%= simple_form_for([@operation, @movement]) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
  <div class="d-flex justify-content-between">
    <h1>Nova</h1>
    <div class="form-actions text-right">
      <%= f.button :submit, "Salvar", class:"btn btn-w-m btn-primary" %>
      <%= link_to 'Cancelar', operation_path(@operation), class:"btn btn-w-m btn-success" %>
    </div>
  </div>

<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox ">
        <div class="ibox-title">
            <h5>Movimento <small></small></h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
          <div class="form-inputs">
            <div class="form-group row">
              <div class="col-sm-12">
                <div class="input-group m-b">
                  <%= f.simple_fields_for :mov_date do |d| %>
                    <%= d.input :date, label:"Data", input_html: { type:"date", class:"form-control mr-5", id:"movement-date" } %>
                  <% end %>
                  <div class="mr-3">
                    <p>Preço Médio:</p>
                    <p class="text-center" id="avg-price" value="<%= @pm %>"> <%= format_money(@pm) %> </p>
                  </div>
                  <div class="mr-5">
                    <p>% Valor Investido:</p>
                    <p class="text-center" id="invest-value">  </p>
                  </div>
                  <div>
                    <p>Previsão Lucro Total (%):</p>
                    <p class="text-center" id="profit-forecast">  </p>
                  </div>
                </div>
              </div>
            </div>
            
              <div class="form-group row">
                <div class="col-sm-12">
                  <div class="input-group m-b">
                    <%= f.input :date, as: :hidden, required: false, input_html: { class:"form-control", id:"call-sell-date" } %>
                    <%= f.input :buy_sell, label:"C / V", collection: @buy_sell, include_blank: true, required: true, input_html: { type:"text", class:"form-control", maxlength: 7 } %>

                   
                    <div id='vencimento'>
                      <%= f.input :expiry_year, required: true, collection: @years, label: "Ano Vcto.", input_html: { class:"form-control", maxlength: 5 } %>
                    </div>
                    <%= f.input :quantity, required: true, label:"Qtd.", input_html: { class:"form-control text-right", maxlength: 5, size: 5, id:"call-sell-quantity" } %>
                    <%= f.input :price, required: true, label:"Preço", input_html: { class:"form-control text-right", maxlength: 7, size: 7, id:"call-sell-price", oninput:"calcTaxes();" } %>
                    <div id='pe-block'>
                      <%= f.input :exercise_price, required: false, label:"P.E.", input_html: { class:"form-control text-right", maxlength: 6, size: 6, id:"call-sell-pe", oninput:"calcProfitForecast();" } %>
                    </div>
                    <%= f.input :brokerage_cost, required: false, label:"Corretagem", input_html: { class:"form-control text-right", maxlength: 6, size: 6, id:"call-sell-brokerage" } %>
                    <%= f.input :tax_cost, required: false, label:"Taxas", input_html: { class:"form-control text-right", readonly: :true, maxlength: 6, size: 6, id:"call-sell-tax" } %>
                    <%= f.input :issqn_cost, required: false, label:"ISSQN", input_html: { class:"form-control text-right", readonly: :true, maxlength: 6, size: 6, id:"call-sell-issqn" } %>
                    <%= f.input :other_cost, required: false, label:"Outros", input_html: { class:"form-control text-right", readonly: :true, maxlength: 6, size: 6, required: :false, id:"call-sell-others" } %>
                  </div>
                </div>
              </div>
            
            <div class="form-group row">
              <div class="col-sm-12">
                <div class="input-group m-b">
                 
                  <%= f.input :exercise_value, as: :hidden, label: false, input_html: { class:"form-control", maxlength: 8, size: 8, value: 0 } %>

                 

                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-sm-12">
                <h5>Corretagem no Exercício:</h5>
                <div class="input-group m-b">
                  <%= f.input :broker_table_fee, label:"Corret. Mesa (%)", input_html: { class:"form-control", maxlength: 8, size: 8, id:'broker-table-fee' } %>
                  <%= f.input :broker_table_cost, required: false, label:"Corret. Mesa (R$)", input_html: { class:"form-control", maxlength: 8, size: 8 } %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<% end %>

There are some differences for how that stuff displays from browser to browser — Rockwell Rice, Dec 09 '20 at 20:48
Yes, you are talking about the form buttons looking different in Firefox, right? Having the up down arrow buttons in Firefox and then a cleaner view in chrome. That is what you mean correct? But yes, CSS can act differently in different browsers, so you will want to understand that at least for the big ones like firefox, chrome and safari. In fact, have you looked at your form in safari, does it look different there too? — Rockwell Rice, Dec 09 '20 at 20:57
No, that's not what I mean. I don't mind the cleaner view in Chrome. What I mean is: The whole form should be in a single line, but it's breaking and using 2 lines. JS also is not working in the affected fields" — Vinicius Libero, Dec 10 '20 at 18:25
Eventually that same problem has appeared in Firefox as well, but I wait a little and refresh the page and it gets corrected. I'm not sure what is causing the problem, so I can't fix it. — Vinicius Libero, Dec 10 '20 at 18:27
Those are the downsides of using something built on top of other things. If you're using a CSS framework, you may also use a lot of `important!` on top of it to try to override the whole styles that are backed-in. The JS not loading is another issue but I would not bother too hard trying to get this stuff working if it's for a quick project that you need to have finished soon. If you want to keep it perfect and identical on both browsers, take the reset path or/and write your own CSS. ^^ — kissu, Dec 10 '20 at 18:29

score 0 · Answer 1 · answered Dec 10 '20 at 18:23

0

This is a common issue. Browsers do not have the same rules out of the box. You need to reset some of the CSS properties to have them look the same. Then apply your own custom CSS on top of it.

Bootstrap is using Reboot, check if it is applied to your page (by inspecting the rules applied to your elements).

Or add a custom one. I do love tailwindCSS, they are using Preflight. Give it a look if you don't like/know how to plug the one from Bootstrap. ^^

answered Dec 10 '20 at 18:23

kissu

40,416
14
65
133

Thanks, this was helpful, but I'm still having the problem... I tried checking if the Reboot is applied, but I'm not sure. The template seems to generate files with long hash-like names, so I'm not certain Reboot is being used. In any case, I created 2 CSS files, 1 to normalize and 1 to reset. Tried both of them, but the problem remains. – Vinicius Libero Dec 10 '20 at 19:01
What makes me think that something else (other than just CSS is going on) is that the JavaScript also stops working. If you look at the illustrations above you will see that the field "corretagem" is filled in Firefox (and 2 other fields). This was done using JS. The fields "ativo" and "Qtd." both lost formatting in Chrome, but their JS is working fine. – Vinicius Libero Dec 10 '20 at 19:10
Hashed file names are not related to your issue, it's something that Rails does to prevent cache issues. In your case, you need to check via your dev tools that the reboot CSS is applied to your elements. Same goes for the JS, not sure how it needs to be included be check your (dev tools) console and try to debug it by checking if it's at least loaded. Try to disable JS at first and debug the CSS, then tackle the JS issue. One at a time. – kissu Dec 10 '20 at 19:21

Why my forms are losing formatting in Chrome?

1 Answers1