#html #forms #google-chrome #formatting #inspinia
#HTML #формы #google-chrome #форматирование #inspinia
Вопрос:
Я работаю с Rails и использую шаблон Inspinia (из WrapBootstrap) для создания веб-приложения. Я думал, что эти шаблоны в значительной степени подключаются и работают, но у меня возникли некоторые проблемы с моими, и я не знаю причину или как ее решить. Я уже обращался в службу поддержки клиентов Inspinia creators, но ответа не получил. JS также перестает работать в затронутых полях. Форма, которую я использую, отлично работает с Firefox, но форматирование прерывается в Chrome (и других браузерах). Я надеюсь, что кто-нибудь может дать мне подсказку по этому вопросу. Ниже приведены некоторые подробности:
Форма, видимая в Firefox: 
Форма, видимая в Chrome: 
Код erb формы:
<%= 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 %>
Комментарии:
1. Есть некоторые различия в том, как этот материал отображается в разных браузерах
2. Даже если CSS настроен таким же образом?
3. Да, вы говорите о том, что кнопки формы выглядят по-другому в Firefox, верно? Наличие кнопок со стрелками вверх и вниз в Firefox, а затем более чистый вид в Chrome. Это то, что вы имеете в виду правильно? Но да, CSS может действовать по-разному в разных браузерах, поэтому вы захотите понять это, по крайней мере, для таких больших браузеров, как firefox, Chrome и safari. На самом деле, вы смотрели на свою форму в Safari, она тоже выглядит по-другому?
4. Нет, я не это имею в виду. Я не против более чистого просмотра в Chrome. Я имею в виду: вся форма должна быть в одной строке, но она разбивается и использует 2 строки. JS также не работает в затронутых полях »
5. В конце концов, та же проблема появилась и в Firefox, но я немного подожду и обновлю страницу, и она будет исправлена. Я не уверен, что вызывает проблему, поэтому я не могу ее исправить.
Ответ №1:
Это распространенная проблема. Браузеры не имеют одинаковых правил из коробки. Вам нужно сбросить некоторые свойства CSS, чтобы они выглядели одинаково. Затем примените свой собственный пользовательский CSS поверх него.
Bootstrap использует перезагрузку, проверьте, применяется ли она к вашей странице (путем проверки правил, применяемых к вашим элементам).
Или добавьте пользовательский. Мне нравится tailwindCSS, они используют предполетный запуск. Посмотрите, если вам не нравится / не знаете, как подключить один из Bootstrap. ^^
Комментарии:
1. Спасибо, это было полезно, но у меня все еще есть проблема… Я попытался проверить, применена ли перезагрузка, но я не уверен. Похоже, что шаблон генерирует файлы с длинными именами, похожими на хэш, поэтому я не уверен, что используется перезагрузка. В любом случае я создал 2 CSS-файла, 1 для нормализации и 1 для сброса. Попробовал оба из них, но проблема остается.
2. Что заставляет меня думать, что происходит что-то еще (кроме просто CSS), так это то, что JavaScript также перестает работать. Если вы посмотрите на иллюстрации выше, вы увидите, что поле «corretagem» заполнено в Firefox (и 2 других поля). Это было сделано с помощью JS. Поля «ativo» и «Qtd». оба потеряли форматирование в Chrome, но их JS работает нормально.
3. Имена хэшированных файлов не связаны с вашей проблемой, это то, что Rails делает для предотвращения проблем с кэшем. В вашем случае вам нужно проверить с помощью ваших инструментов разработки, что CSS перезагрузки применяется к вашим элементам. То же самое касается JS, не уверен, как его нужно включить, проверьте свою консоль (dev tools) и попробуйте отладить ее, проверив, загружена ли она хотя бы. Попробуйте сначала отключить JS и отладить CSS, а затем решить проблему с JS. По одному за раз. 😁