I have a form that looks like the following when closed and when opened:
The save button is moving. I've replicated the problem in http://jsfiddle.net/m06eob4h/1/ with following markup.
I'm using snapappointments.com/bootstrap-select (without any custom styling) and bootstrap 4. Here is what I think the relevant rendered markup looks like:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="card-columns">
<div class="card">
<div class="card-body">
<h5 class="card-title">Plan 1 Status</h5>
<div class="row align-items-end">
<div class="col-sm-6 field-edit">
<div class="viAuthStatus1">
<div class="form-group">
<label class="col-form-label" for="iAuthStatus1">
<span class="liAuthStatus1">Election Status</span>
</label>
<div class="validator-container">
<div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
<select name="iAuthStatus1" id="iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1">
<option value=""></option>
<option value="Pend">Pending Review</option>
<option value="Rev">In Review</option>
<option value="Wa">Waiting</option>
<option value="Com">Package Complete</option>
<option value="DECL">Decline</option>
<option value="INC">Incomplete</option>
<option value="Inelig">Ineligible</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Plan 1 Status</h5>
<div class="row align-items-end">
<div class="col-sm-6 field-edit">
<div class="viAuthStatus1">
<div class="form-group">
<label class="col-form-label" for="iAuthStatus1">
<span class="liAuthStatus1">Election Status</span>
</label>
<div class="validator-container">
<div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
<select name="iAuthStatus1" id="iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1">
<option value=""></option>
<option value="Pend">Pending Review</option>
<option value="Rev">In Review</option>
<option value="Wa">Waiting</option>
<option value="Com">Package Complete</option>
<option value="DECL">Decline</option>
<option value="INC">Incomplete</option>
<option value="Inelig">Ineligible</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="align-items-end">
<a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
</div>
</div>
Anyway, you'll see that my fiddle has two issues when I expand the dropdown in the first card.
1) The Save button moves down.
2) The second card moves around.
UPDATE - I've modified the html to have two cards (more like our real app) and the associated fiddle.
I see a typo in your HTML (6th line):
<div class="row align--end">
^
X
shouldn't it be
<div class="row align-items-end">
maybe thats causing this issue
Edit So this code works on my machines (did a quick test on win/MacOS with FF74 and Chrome > 79) as it should
<div class="card-columns">
<div class="card">
<div class="card-body">
<h5 class="card-title">Plan 1 Status</h5>
<div class="row align-items-end">
<div class="col-sm-6 field-edit">
<div id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1" class="viAuthStatus1">
<div class="form-group">
<label class="col-form-label" for="iAuthStatus1">
<span class="liAuthStatus1">Election Status</span>
</label>
<div class="validator-container">
<div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
<select name="ControlHost:ParticipantTab-Paper-Elections-Document-Status:iAuthStatus1:iAuthStatus1" id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1_iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1" data-size="15" data-live-search="true" tabindex="-98">
<option value=""></option>
<option value="Pend">Pending Review</option>
<option value="Rev">In Review</option>
<option value="Wa">Waiting</option>
<option value="Com">Package Complete</option>
<option value="DECL">Decline</option>
<option value="INC">Incomplete</option>
<option value="Inelig">Ineligible</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- /div -->
</div>
</div>
<a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
</div>
So I placed the button inside the card - works (commented div). If you put the save button out of the card but inside the card-column than it moves around like drunk when changing screen sizes This solution puts it out of the card column in an extra row (which you could also skip) - that works too like expected:
<div class="card-columns col-sm-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Plan 1 Status</h5>
<div class="row align-items-end">
<div class="col-sm-6 field-edit">
<div id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1" class="viAuthStatus1">
<div class="form-group">
<label class="col-form-label" for="iAuthStatus1">
<span class="liAuthStatus1">Election Status</span>
</label>
<div class="validator-container">
<div class="dropdown bootstrap-select show-tick form-control iAuthStatus1">
<select name="ControlHost:ParticipantTab-Paper-Elections-Document-Status:iAuthStatus1:iAuthStatus1" id="ControlHost_ParticipantTab-Paper-Elections-Document-Status_iAuthStatus1_iAuthStatus1" class="form-control selectpicker show-tick iAuthStatus1" data-size="15" data-live-search="true" tabindex="-98">
<option value=""></option>
<option value="Pend">Pending Review</option>
<option value="Rev">In Review</option>
<option value="Wa">Waiting</option>
<option value="Com">Package Complete</option>
<option value="DECL">Decline</option>
<option value="INC">Incomplete</option>
<option value="Inelig">Ineligible</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-2 align-items-end"><!-- px-1 to px-3 to add different indents -->
<a class="btn btn-primary SaveEdits mr-1" href="javascript:alert('hi');">Save</a>
</div>
Related
set width 50% each in select tag and remaing part
<div class="input-group">
<select class="form-select">
<option selected value="dummy">Dummy</option>
<option selected value="rd">Random data</option>
</select>
<span class="input-group-text bg-theme">Selection</span>
<div class="dropdown">
<input
type="text"
class="form-control dropdown-toggle"
data-bs-toggle="dropdown"
readonly
/>
<div class="dropdown-menu p-0 w-100">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" checked />
dummy
</label>
</div>
</div>
</div>
</div>
How can i make select tag with 50% width and remaing part also 50% width ?
Simply you can use the BS5 grid system in order to change the size.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name#example.com" value="mdo#example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
I bought a react template online I couldn't figure it out why this form search bar is hidden on small screen size.
<div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
<div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
I tried changing "d-none d-lg-block" to "d-block" but still did not work
I am not a css expert so I need a work around to make it work .
here is the full div html code:
I need form to be displayed on all screen size
<div className="header-middle">
<div className={container}>
<div className="row">
<div className="col-auto col-lg-3 col-xl-3 col-xxl-2">
<button className="mobile-menu-toggler">
<span className="sr-only">Toggle mobile menu</span>
<i className="icon-bars"></i>
</button>
<Link to={`${process.env.PUBLIC_URL}/`} className="logo">
<img
src={`${process.env.PUBLIC_URL}/assets/images/logo.png`}
alt="Molla Logo"
width="105"
height="25"
/>
</Link>
</div>
<div className="col col-lg-9 col-xl-9 col-xxl-10 header-middle-right">
<div className="row">
<div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
<div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
<Link to="#" className="search-toggle" role="button">
<i className="icon-search"></i>
</Link>
<form method="get" onSubmit={formSubmitHandler}>
<div className="header-search-wrapper search-wrapper-wide">
<div className="select-custom">
<select id="cat" name="cat">
<option value="">All Departments</option>
<option value="1">Fashion</option>
<option value="2">- Women</option>
<option value="3">- Men</option>
<option value="4">- Jewellery</option>
<option value="5">- Kids Fashion</option>
<option value="6">Electronics</option>
<option value="7">- Smart TVs</option>
<option value="8">- Cameras</option>
<option value="9">- Games</option>
<option value="10">Home & Garden</option>
<option value="11">Motors</option>
<option value="12">- Cars and Trucks</option>
<option value="15">- Boats</option>
<option value="16">
- Auto Tools & Supplies
</option>
</select>
</div>
<label htmlFor="q" className="sr-only">
Search
</label>
<input
onChange={inputChangeHandler}
type="search"
className="form-control"
name="q"
id="q"
placeholder="Search product ..."
value={search}
required
/>
<button className="btn btn-primary" type="submit">
<i className="icon-search"></i>
</button>
<input
style={{display:"none"}}
type="file"
name="file"
onChange={onChangeHandler}
ref={imageInput}
/>
<div className="btn btn-outline-primary" onClick={somethingtohappen}>
<i className="fa fa-camera"></i>
</div>
</div>
</form>
</div>
</div>
<div className="col-lg-4 col-xxl-5col d-flex justify-content-end align-items-center">
<div className="header-dropdown-link">
{/* <CompareMenu /> */}
<Link
to={`${process.env.PUBLIC_URL}/shop/wishlist`}
className="wishlist-link"
>
<i className="icon-heart-o"></i>
<span className="wishlist-count">
{props.wishlist.length}
</span>
<span className="wishlist-txt">Wishlist</span>
</Link>
<CartMenu />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I'm trying to build a simple filter-bar which has a custom-control element.
The element should be aligned vertically but it seems not to be working. This is the markup for the filter-bar:
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"/> Search</button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
But the result is shown below:
No matter which align- class I add, the element won't move a bit. Already tried to set the display property to inline-block as stated in the bootstap-docs.
Only way to achieve something like centered is to add mt-2 class but this seems not to be the correct way this should be done.
Add align-items-center to form-row and also close the <i> tag correctly on Search button
body{ min-width: 800px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"> Search</i></button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
How do I adjust the bootstrap input group width and still have it be responsive. For example I only want the quantity input field to take x%(be much smaller) than description field. Also how do I wrap each input field on mobile? Thanks in advance, sorry I am a Noob.
<div class="container">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel panel-danger">
<div class="panel-heading text-center"><strong>Store Transfer</strong></div>
<div class="panel-body">
<div class="col-lg-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">Description</span>
<input type="text" class="form-control input-sm" placeholder="Item Description">
<span class="input-group-addon">Quantity</span>
<input type="text" class="form-control input-sm" placeholder="Quantity">
<span class="input-group-addon">Cost</span>
<input type="text" class="form-control input-sm" placeholder="Cost">
<span class="input-group-addon">Total $0.00</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="form-group">
<div class="input-group"><span class="input-group-addon">Transfer From:</span>
<select class="form-control form-control-sm">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon">Transfer To:</span>
<select class="form-control">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Submit</button>
</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
BootPly Here
I have this form:
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div></form>
It looks like this:
I want the whole form in the center, how to? Do I need to center each row separately? And another question, I want for example, the "Supllier Account" field, to be in the same lenght of the two fields above, how to?
This is basically a duplicate of a question that's already been asked many times..
Center a column using Twitter Bootstrap 3
To specifically center your form you can use column offsets like this, but there are several different methods for centering:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
http://www.codeply.com/go/sRbuCfloDX
When i want to do it, margin: 0 auto; works quite fine