I try to create an input group and some buttons next to the input group, but the buttons always switch to a new line. Can anyone help me please?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-dark">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col">
<div class="input-group flex-nowrap">
<button class="btn btn-primary btn-lg" id="previous"> - </button>
<input type="text" class="form-control text-center" id="pageNumber" value="1">
<button class="btn btn-primary btn-lg" id="next"> + </button>
</div>
<button class="btn btn-primary btn-lg" id="zoomIn">x</button>
</div>
</div>
</div>
Just apply .d-flex & .flex-nowrap to the parent .col. This will cause the width of the .input-group to be adjusted to accommodate the button on the same line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-dark">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col d-flex flex-nowrap">
<div class="input-group">
<button class="btn btn-primary btn-lg" id="previous"> - </button>
<input type="text" class="form-control text-center" id="pageNumber" value="1">
<button class="btn btn-primary btn-lg" id="next"> + </button>
</div>
<button class="btn btn-primary btn-lg" id="zoomIn">x</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
Try .col-auto so that your columns only take up as much space as needed
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
input#number-of-orders {
max-width: 70px;
}
</style>
<div class="row">
<div class="col-auto">
<div class="input-group">
<div class="input-group-text">Number of orders</div>
<input type="number" class="form-control" id="number-of-orders" value="5">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
Place the button inside your div, it will solve your problem.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-dark">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col">
<div class="input-group flex-nowrap">
<button class="btn btn-primary btn-lg" id="previous"> - </button>
<input type="text" class="form-control text-center" id="pageNumber" value="1" style="height:auto">
<button class="btn btn-primary btn-lg" id="next"> + </button>
<button class="btn btn-primary btn-lg pull-right" id="zoomIn">x</button>
</div>
</div>
</div>
</div>
Related
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>
I am strugling with Bootstrap 3 grid system.
Let me explain what I have implemented, what I need and what I did (fail attempt) to achieve.
This is the Layout (HTML | Razor) of the image. For you to have a live version of this This is the site link to this screen so you can see it and play.
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<div id="showcaseSection" class="showcaseSection superVideo">
<ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
</div>
<div class="hidden-xs">
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team1Name (<span id="team1Total">0</span>)</span>
</p>
<ul class="media-list team1ListShowCase" id="#Model.Team1Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="#Model.Team1Name" data-class="team1"></ul>
</div>
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: #Model.Team2Name (<span id="team2Total">0</span>)</span>
</p>
<ul class="media-list team2ListShowCase" id="#Model.Team2Id" data-img="#Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="#Model.Team2Name" data-class="team2"></ul>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6 nopadding">
<div id="chatcontainer">
<ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>
<div id="chatOptions" class="collapse">
<p class="text-center">#Model.Title</p>
<button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
<span class="glyphicon glyphicon-log-out"></span> #Resources.Salir
</button>
<span>
<input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
<label>Actualizar Mensajes</label>
</span>
</div>
</div>
#if (!Model.IsReadOnly)
{
<div class="input-group">
<input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
<textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
<input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
<span class="input-group-btn">
<button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
<span class="glyphicon glyphicon-send"></span>
</button>
<button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
<span class="fa fa-cogs"></span>
</button>
</span>
</div>
}
</div>
</div>
As you can see everything is in one row.
I want to have the Video Section fixed on top and the TEXT AREA to comment fixed BOTTOM when on XS (viewports).
I tried adding this to the row, but I fix the video but I cannot see the TEXT AREA
.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}
I don't know what else to do to show fixed top (video) and botton fixed (Chat Textbox) and scrollable comments in the middle when in XS.
Any help is welcome.
Override the height for #chatcontainer for tablet/mobile will fix the issue. Example:
#media(max-width: 767px) {
#chatcontainer{
height: calc(50vh - 80px);
}
}
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.
I want to show a popup readonly screen only to users who are not logged in as "Admin". So all the other users can see only the Popup readonly screen.
I try it like this:
#if (!User.Identity.IsAuthenticated || !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
Thank you
I will make it more cleared
I have two screens:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
#if (User.Identity.IsAuthenticated || Context.User.IsInRole("Admin"))
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
eventContent - is for users who are not admin(it is readonly) and the other screen is for admin, where the admin can add a agenda item. But if I click now on a agenda item(not logged in as admin) I see both screens
Oke, I found it:
#if ( !Context.User.IsInRole("Admin"))
{
<div id="eventContent" title="Event Details" style="display:none">
Date: <span id="startTime"></span><br>
Start event: <span id="eventTime"></span><br>
Duration: <span id="eventDuration"></span><br><br>
</div>
}
else
{
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"> <h3> Appointment</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<div class="form-group">
<label>Event title</label>
<input type="text" id="eventTitle"><br />
</div>
<div class="form-group">
<label>Scheduled date</label>
<input type="text" id="eventDate" readonly><br />
</div>
<div class="form-group">
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
</div>
<div class="form-group">
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration"><br />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn btn-mini">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-success ">Save event</button>
#*<button type="button" id="btnPopupUpdate" data-dismiss="modal" class="btn btn-warning">Update event</button>*#
<button type="button" id="btnPopupDelete" data-dismiss="modal" class="btn btn-danger right ">Delete event</button>
</div>
</div>
}
It looks like you are getting any Authenticated User in your If condition. Try changing it to:
#if (User.Identity.IsAuthenticated && !User.IsInRole("Admin"))
{
to get only authenticated users that are not admin.
If you mean anybody (authenticated or otherwise) that is not admin:
#if (!User.IsInRole("Admin"))
{
I am using grails 2.1.1 and trying to sign up a new user with modal window. My signup modal window's .gsp code is as follows...
....
<!--Start of Registration Modal Page-->
<div id="register" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="icon-remove"></i>
</button>
<h3 id="modalLabel">
Register
</h3>
</div>
<div class="modal-body">
<g:form method="POST">
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span2" placeholder="Full Name" value="${user?.profile?.fullName}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Email" value="${user?.profile?.email}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Username" value="${user?.username}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="password" class="span3" placeholder="Password" value="${user?.password}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Bio" value="${user?.profile?.bio}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<button type="submit" class="span3 btn btn-warning">Create Account</button>
<div class="span1"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel
</button>
<button class="btn btn-success" type="submit">Register
</button>
</div>
</div>
</div>
</g:form><!--End of Form-->
<!--End of Registration Modal Page-->
My corresponding controller is "user" and I have a customized "register" action there as well. All I want is that when I click Create Account button, the user is registered behind in the database. Is there any way to make it up through modal window form directly?