How to add collapse button in ion card header? I was trying:
<div class="list card">
<div class="item item-divider">Пошук
<i class="icon ion-chevron-right icon-accessory ion-star"></i>
</div>
<div class="item item-body">
<label class="item item-input item-select">
<div class="input-label">
Звіти
</div>
<select mobi_select_picker=true data-role="none">
<option value=''>Всі</option>
<option value='1'>Осаго</option>
<option value='2'>Каско</option>
</select>
</label>
</div>
</div>
i want something like that:
http://s18.postimg.org/d9si9ixjd/toggle_card.png
But it is not working. Any ideas?
You will have to add an anchor tag with icon inside the item-divider div.
<a href="#" class="item-icon-right">
<i class="icon ion-minus"></i>
</a>
So now your HTML will look like:
<div class="list card">
<div class="item item-divider">Пошук
<a href="#" class="item-icon-right">
<i class="icon ion-minus"></i>
</a>
</div>
<div class="item item-body">
<label class="item item-input item-select">
<div class="input-label">
Звіти
</div>
<select mobi_select_picker=true data-role="none">
<option value=''>Всі</option>
<option value='1'>Осаго</option>
<option value='2'>Каско</option>
</select>
</label>
</div>
</div>
You can check this Codepen and tell me if that is what you wanted.
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>
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>
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>
My block of code
<div class="form-row">
<div class="col">
<div class="search-contributor-box">
<p>
<input type="text" class="form-control search-contributor"
placeholder="Contributor" name="contributor" id="contributor"
value="Add contributor" autocomplete="off">
</p>
<div class="sub-search-contributor sub-panel" style="display: none;">
<p class="lead" style="text-align:center;color:#a9a9a9;">
<i class="fa fa-search"></i>
Looking for someone
</p>
</div>
</div>
</div>
<div class="col">
<p>
<select class="form-control form-control-sm" id="role" name="role">
<option value="developer" selected>Developer</option>
<option value="leader">Leader</option>
</select>
</p>
</div>
<div class="col">
<p>
<input type="text" class="form-control" placeholder="Salary" id="salary"
name="salary" value="">
</p>
</div>
</div>
It produce me like this:
how to style ,to get display result Looking for someone over other other div
If i dont misunderstanding, try to set
style={position: 'absolute'}
in the div u want to over