So I am trying to create a Thymeleaf loop where have a list of n elements. Every fourth (starting at the first) I create a parent element, and each one gets added to that until a new parent is created.
So the idea is
for e : elements {
if index % 4 = 0 {
create new parent
}
add e to parent
}
I am trying to implement this in Thymeleaf and cannot get anything working. Here is the closest I think I have gotten (that inner loop causes "IllegalStateException: No index"):
<div th:each="metric, rowStatus : ${metrics}"
class="row tile_count" th:if="${rowStatus.index % 4} == 0">
<div th:each="i: ${#numbers.sequence(rowStatus.index , rowStatus.index +4)}"
th:replace="layouts/template.html :: metricCard(name=${metrics[i].name}, value=${metrics[i].value},description=${metrics[i].description}, severity=${metrics[i].severity})"></div>
</div>
The desired html is something in the ball park of:
<div class="row tile_count">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total HR1 Files</span>
<div class="count">17</div>
<span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
<div class="count green"> 7,353</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
<div class="count">43 sec</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
<div class="count">0</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
<div class="count">7,353</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>21% </i> From last Week</span>
</div>
</div>
<div class="row tile_count">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total HR2 Files</span>
<div class="count">05</div>
<span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
<div class="count green">5,421</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
<div class="count">10 sec</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
<div class="count">2</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
<div class="count">5,419</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
</div>
</div>
You can try th:remove like this:
<th:block th:each="metric, iterStat : ${metrics}">
<div class="row tile_count" th:remove="${iterStat.index % 4 == 0 ? none : tag}">
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
...
</div>
</div>
</th:block>
You can also try the following:
<div class="row pt-5" th:remove="${status.index%4 == 0} ? none : tag">
<div class="col">...</div>
<th:block th:if="${status.index eq 4}" th:utext="'</div>'" />
I used this, cause the remove "tag" feature don't delete the closing div from my row.
Related
I'm trying to use bootstrap 5 grid with angular material component mat-list but it's not working.
I want the text of the 2 field to use 12 columns on small device.
I have made a test using div and I get the right result but when I try to use boostrap container/row and col-X class with the mat-list it's not working.
Using div
<div *ngIf="dto">
<div class="container" >
<div class="row pb-2" >
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
<mat-divider></mat-divider>
<div class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
<mat-divider></mat-divider>
</div>
</div>
With angular material mat-list
<mat-list role="list" class="container" *ngIf="dto">
<mat-list-item role="listitem" class="row pb-2">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem" class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
Edit:
I added a demo code in stackblitz
stackblitz
When material renders the elements for mat list, an additional div element gets added between mat-list-item and the content, the rendered structure looks like this
<mat-list-item class="mat-list-item" role="listitem" class="row pb-2 w-100">
<div class="mat-list-item-content">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
The col elements are not the direct child of the row element, which is why the flex properties do not work
To fix this wrap the spans with a div with a class row
<mat-list role="list" class="container-fluid">
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
I have a working project with a form but in some cases a during a form submit, the request body params are not being passed onto params in the controller
This is what i am seeing when i put a binding.pry inside the application controller as a before_action
[1] pry(#<App::Agent::V2::VerificationsController>)> request.url
=> "http://localhost:4567/app/agent/v2/verifications/sg_bug_bash/submit"
[2] pry(#<App::Agent::V2::VerificationsController>)> request.body.read
=> "utf8=%E2%9C%93&authenticity_token=2myJbSTptXGEGn8a14T3zj7cgMSc%2F8zsLI27%2BirR6ZplQotMkTDfGWgKes3k9OSIfnL5wKyFvazn7tvNS9zuHQ%3D%3D&obs_application%5Boperation_name%5D=sg_bug_bash&obs_application%5Bapplication_id%5D=1&commit=Submit%2FDone&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Bid%5D=e4c987fb-a875-420e-81db-45a8482d36eb&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Baccount_number%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Bbank_code%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Bid%5D=4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5Bvehicle_plate_number%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleBrand%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleType%5D="
[3] pry(#<App::Agent::V2::VerificationsController>)> params
=> {"controller"=>"app/agent/v2/verifications", "action"=>"submit", "id"=>"sg_bug_bash"}
It is a dynamically generated form, so the HTML looks like this:
<form id="verification-form" class="edit_obs_application" action="/app/agent/v2/verifications/sg_bug_bash/submit" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="j1rCDid+EAiODQijn+TNTml/MTwikobF2Tg63ssZ+EtAAH/ebLimZd8C5D1oXhLYHr9EohRvmnSfnmE7ikrSdw==">
<input value="sg_bug_bash" type="hidden" name="obs_application[operation_name]" id="obs_application_operation_name">
<input value="220" type="hidden" name="obs_application[application_id]" id="obs_application_application_id">
<div class="panel">
<div class="panel-heading">
<div class="label">Surat Tanda Nomor Kendaraan: STNK</div>
</div>
<div class="panel-body">
<div class="container">
<input value="4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][id]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> Vehicle type*: </div>
<div class="verification-value">166</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="vehicleType">
<input type="hidden" value="vehicleType" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleType]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleType">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> vehicle brand: </div>
<div class="verification-value">Alfa Romeo</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicleBrand">
<input type="hidden" value="vehicleBrand" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleBrand]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleBrand">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> No Polisi: </div>
<div class="verification-value">sj111k</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicle_plate_number">
<input type="hidden" value="vehicle_plate_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicle_plate_number]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicle_plate_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Vehicle Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="https://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<div class="label">Bank</div>
</div>
<div class="panel-body">
<div class="container">
<input value="e4c987fb-a875-420e-81db-45a8482d36eb" type="hidden" name="obs_application[panels][documents][sg_bank_statement][id]" id="obs_application_panels_documents_sg_bank_statement_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> bank code*: </div>
<div class="verification-value">700003</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="bank_code">
<input type="hidden" value="bank_code" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][bank_code]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_bank_code">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> account number*: </div>
<div class="verification-value">5367683475661</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="account_number">
<input type="hidden" value="account_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][account_number]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_account_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> account holder name: </div>
<div class="verification-value">Testing</div>
</div>
<div class="col-md-6 mandatory-action-false}">
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Bank Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="http://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="submit-btn-verification">
<input type="submit" name="commit" value="Submit/Done" class="submit_btn btn btn-valid disabled" disabled="disabled" style="cursor: not-allowed">
</div>
</form>
This is the form in erb:
<% if (!#application_completed.nil? && !#application_completed) %>
<%= form_for #application, url: retry_application_completion_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form', class: 'col-md-6 text-center' } do |f| %>
<%= f.hidden_field :id, value: #application.id %>
<%= f.submit 'Retry', formaction: retry_application_completion_app_agent_v2_verification_path, class: 'btn btn-valid pull-right' %>
<% end %>
<% else %>
<% panels = #layout.panels %>
<%= form_for #application, url: submit_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form' } do |f| %>
<%= f.hidden_field :operation_name, value: #layout.name %>
<%= f.hidden_field :application_id, value: #application.id %>
<% if #application.resubmit? %>
<div class="resubmit-header">RESUBMITTED APPLICATION</div>
<% end %>
<%= f.fields_for :panels do |form| %>
<% panels.each do |panel| %>
<%= render partial: 'partials/agent/v2/verifications/panels/' + panel.type.underscore, locals: { panel: panel, form: form } %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
with this as _submit_panel erb partial:
<% sections = panel.sections %>
<div class="submit-btn-verification">
<%= form.submit sections.first.properties['label'], class: 'submit_btn btn btn-valid disabled', disabled: 'disabled', style: 'cursor: not-allowed' %>
</div>
Bootstrap navbar collapse is not working. The issue is that it shows a collapsing menu but on click, it is not collapsed.
I have provided my full code so that it can help you to suggest or help me to sort out the issue
<header class="head-image">
<nav id="nav-top" class="navbar hidden-xs hidden-sm" style="margin-bottom: 0px;">
<div class="container text-center">
<div class="col-md-4 col-md-offset-8">
<div class="search-box">
<?php echo do_shortcode('[smart_search id="1"]'); ?>
</div>
</div>
</div>
</nav>
<section id="main-header">
<div class="container">
<div class="pull-left">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
<img src="<?php header_image(); ?>" width="213" height="117" alt="">
</a>
</div>
<div class="pull-right hidden-xs hidden-sm">
<div class="row text-right">
<div class="col-xs-12">
<span class="text-white">Order hotline</span>
</div>
<div class="col-xs-12">
<span class="nav-phone">
<i class="fa fa-phone" aria-hidden="true"></i>
<a class="text-white nav-phone" href="tel:+"></a>
</span>
</div>
</div>
<div class="row n-m hidden-xs hidden-sm">
<div class="col-sm-6 col-xs-12 border-brown relative">
<div class="col-xs-3">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="col-xs-9">
<div class="row">
Login/Register </div>
<div class="row ">
<span class="text-white">
My Account
</span>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-12 border-brown relative">
<div class="col-xs-3">
<a href="<?php echo wc_get_cart_url(); ?>">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-9">
<div class="row">
Shopping bag
</div>
<div class="row">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class="price">(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar" id="main-menu">
<div class="container">
<div class="navbar-header hidden-md hidden-lg">
<div class="col-xs-6">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="text-white hidden-lg hidden-md" data-toggle="collapse" data-target="#main-menu-collapse">Menu</span>
</div>
<div class="col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative">
<div class="row">
<div class="col-xs-4">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</div>
<div class="col-xs-8 text-white">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items
<span class="text-white">
(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
<div id="main-menu-collapse" class="collapse navbar-collapse">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Contact
</div>
<div class="col-xs-9">
<a href="tel:">
<i class="fa fa-phone" aria-hidden="true"></i>
<span class="text-white"></span>
</a>
</div>
</div>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Login/ register
</div>
<div class="col-xs-9">
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="text-white">My account</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar" id="menu-shortcut">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav col-lg-12 text-center">
<li class="col-lg-4 col-md-4 text-left">text</li>
<li class="col-lg-4 col-md-4">text</li>
<li class="col-lg-4 col-md-4 text-right"><a class="toggle-modal" href="javascript:void(0);">Sign up </a></li>
</ul>
</div>
</div>
</nav>
</header>
I am also using Jquery the code is below, there is no jquery conflict in my code everything working perfectly only getting the issue when I am browsing form iPad
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button').click(function()
{
if($(this).children('button').attr('class') == "navbar-toggle collapsed")
{
$(this).parents('.container').children('#main-menu-collapse').addClass('in');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).children('button').html("");
$(this).children('button').css({
'min-width' : '44px',
'min-height' : '34px'
});
$(this).children('button').attr('aria-expanded', 'true');
$(this).children('button').removeClass('collapsed');
}else
{
$(this).children('button').addClass('collapsed');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).parents('.container').children('#main-menu-collapse').css('display', 'none');
$(this).children('button').attr('aria-expanded', 'false');
$(this).parents('.container').children('#main-menu-collapse').removeClass('in');
$(this).children('button').css({
"margin-top" : "11px",
'background' : 'none'
});
$(this).children('button').html('<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>');
}
});
.click() does not happen in Safari unless the element it is bound on is a legitimate click event receiver (target) in Apple's own implementation of web standard (which differs from current web standard).
The simplest way to make any element become a "legitimate" click event target is to add
cursor: pointer;
to it.
Other workarounds include using different events, such as touchstart, tap or input, depending on case.
So, in your case, a fix would be to add this to your CSS:
#main-menu .navbar-header .col-xs-6:first-child,
#main-menu .navbar-header button {
cursor: pointer;
}
Or to change the wrapper to:
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button')
.on('click touchstart', function(){
// your code here
})
In my opinion, you should remove wordpress, wordpress-theming and wp-nav-walker from the question as they are irrelevant to the bug and perhaps add safari, ios and/or ipad to it.
I have an issue to loop through profile field and values. Bootstrap collapse not working.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<% #profile.each do |field, value| %>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="collapse_#{field.id}" aria-expanded="false" aria-controls="collapseOne">
<%= field%>
</a>
</h4>
</div>
<div id="collapse_#{field.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<%= value %>
</div>
</div>
</div>
<% end %>
</div>
Please check this:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<% #profile.each do |field, value| %>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="collapse_<%=field.id%>" aria-expanded="false" aria-controls="collapseOne">
<%= field%>
</a>
</h4>
</div>
<div id="collapse_<%=field.id%>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<%= value %>
</div>
</div>
</div>
<% end %>
</div>
You can use <%= field.id%> insted of #{field.id}.
I am a new coder and using Devise sign up authentication gem on RAILS. I am trying to customize the input columns for the sign up form. I would like to shorten the column width as they look too wide on the page.(from left to right)
See image. enter image description here
What can I add to my code to achieve this please.
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: "form-control" %>
</div>
<div class="form-group">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
You need to wrap your form into some container, that doesn't span all available width. Read about Bootstrap's grid system. Bootstrap uses 12-column grid, so, if you, for example, want your form to take 1/3 of your page width, you need to wrap it into a <div class="col-md-4"></div> (since 12 / 3 = 4).
Sure, I believe something like this should work: http://codepen.io/anon/pen/vNRxGd
<div class="col-md-4">
<h2>Signup</h2>
<form class="form-signup">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</form>
</div>
Here's an example of two different ways you could do this: one just limits the size (width) of the form itself and the other uses columns (which you can adjust in many ways, this is just one.)
See Grid Options and Forms
Working examples below.
.form-signup {
max-width: 500px;
padding: 15px;
margin: 0 auto;
}
.form-signup .form-signup-heading {
margin-bottom: 20px;
}
.form-signup .form-control {
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="form-signup-heading text-center">
<h2>Sign up if you don't have an account:</h2>
</div>
<form class="form-signup">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</form>
</div>
<hr>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h2 class="text-center">Sign up if you don't have an account:</h2>
<form class="form-signup2">
<div class="col-sm-4">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="passwordconfirm">Password confirmation</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-sm-4 col-sm-offset-4 text-center">
<button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
Bootstrap, especially v4 and above, spans form fields. you need to place your code in a container, usually a column so that it does not fill the whole page.
Examples and recommendations from #Chris Dormani and #Alexei Shein are correct.