I want a Form to display at 100% width on the desktop and 75% width on mobile.
Is there a way to do that using w-100 and w-75 or does that have to be accomplished with a media query? Also, the media query I'm using has no effect so I'm doing something wrong but I can't figure out what.
<style>
/* Portrait phones and smaller */
#media (min-width: 768px) {
.formwidth: {
{
width: 75%;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-center">
<div class="col-md-6 mx-auto d-block d-flex justify-content-center"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
<div class="col-md-6 col-sm-12 d-flex justify-content-center">
<form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="formwidth">
<div role="group" aria-labelledby="contact-label">
<div class="form-group text-left mb-3 form-floating">
<input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
<label for="username" class="form-label">Username</label>
</div>
</div>
<div class="d-grid gap-2 mx-auto">
<button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
</div>
</form>
</div>
</div>
This can be done with the responsive .col-* classes and .w-100 on the form.
Remember BS uses "mobile first" ideology. You want to start with .col-8 75% on smallest screens and then .col-md-6 for half the row on medium and larger. Also you should have .justify-content-center on the parent .row:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
<div class="col-md-6 mx-auto d-block d-flex"> <img alt="Student Dashboard Login" src="https://efit.health/images/running-guy.svg" width="90%" class="mb-4" role="presentation" /></div>
<div class="col-8 col-md-6 d-flex ">
<form METHOD="post" ACTION="success.php" aria-label="Sign in to Student Dashboard" id="signin" class="w-100">
<div role="group" aria-labelledby="contact-label">
<div class="form-group text-left mb-3 form-floating">
<input type="text" id="username" class="form-control" placeholder="Enter Username" name="username" aria-required="true" aria-label="Enter Username" required autofocus>
<label for="username" class="form-label">Username</label>
</div>
</div>
<div class="d-grid gap-2 mx-auto">
<button type="submit" class="btn btn-outline-primary btn-lg btn-responsive" value="Sign In">Sign In</button>
</div>
</form>
</div>
</div>
Related
I am trying to create a bootstrap form and i want to show as a preview in bootstrap card what it will look like
Here is my code for form
<div className="container">
<div className="row">
<div className="col p-5">
<div className="card" style={{ width: "18rem" }}>
<img data-src={img} className="card-img-top" alt="any image"/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{place}</p>
<p className="card-text">{year}</p>
<a href="#" className="btn btn-primary">
Go somewhere
</a>
</div>
</div>
</div>
<div className="col p-5">
<form type="form">
<div className="form-group">
<label>Title</label>
<input
name="title"
type="text"
className="form-control mt-2"
placeholder="Enter name of car"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div className="form-group">
<label>Place</label>
<input
name="place"
type="text"
className="form-control mt-2"
placeholder="Enter city name"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</div>
<div className="form-group">
<label>Year</label>
<input
name="year"
type="number"
className="form-control mt-2"
placeholder="Enter mfg year"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</div>
<div className="form-group">
<input
className=" mt-2"
type="file"
name="file"
value={img}
onChange={changeHandler}
/>
</div>
{error && <div>{error}</div>}
{file && <div>{file.name}</div>}
<button
onClick={uploadFile}
type="submit"
className="btn btn-primary mt-2"
>
Submit
</button>
</form>
</div>
</div>
</div>
I can preview title as given in input field by passing as value parameter but i don't know how to do it with image. Also i am storing value of title,place etc in variable do i need to do the same for image too?
I have 4 input fields and type of each field is number. I have implemented it as follows
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Available Amount : <br/><input type="number"
class="mr-3"
[(ngModel)]="selectedItemAvailability"
[disabled]="true">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Enter Quantity : <br/><input type="number"
[min]="1"
[max]="selectedItemAvailability"
[(ngModel)]="selectedItemQuantity">
</label>
</div>
</div>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Price : <br/><input type="number"
[min]="0"
class="mr-3"
[(ngModel)]="selectedItemPrice">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Item Discount : <br/><input type="number"
[min]="0"
[max]="100"
class="mr-3"
[(ngModel)]="selectedItemDiscount">
</label>
</div>
</div>
Once the program is executed, it gives me the interface as below,
When I use input type as text, it gives the expected output.
I want to make all the input fields same in length while using the input type as number. How can I achieve this?
Expected Output:
It seems your code works perfect. Please check stackblitz for the detail:
https://stackblitz.com/edit/angular-ivy-b7xnya?file=src/app/app.component.html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Available Amount : <br /><input type="number" class="mr-3">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Enter Quantity : <br /><input type="number">
</label>
</div>
</div>
<div class="row ml-3 mr-3 mt-3">
<div class="column mr-3">
<label class="col-form-label">
Price : <br /><input type="number" [min]="0" class="mr-3">
</label>
</div>
<div class="column ml-5">
<label class="col-form-label">
Item Discount : <br /><input type="number" class="mr-3">
</label>
</div>
</div>
I have a reactJS application which renders from a map function. This is what some of the output looks like:
I am generating data for 3 beneficiaries and I am giving the user the option of deleting each beneficiary. The data is pulled from a database. Once the user has deleted whichever beneficiaries he/she wants to delete, the data will be written back to the database.
When a user clicks on the Delete this Beneficiary buttion, an onclick function is called. That function will set a flag (beneDeleteFlag) associated with that particular beneficiary. That data is written to the state with a setstate() so reactJS will re-render. When the render occurs, I set the classname of each section to either hide_div or show_div (which are classes in my .css file which set visibility to hidden or visible. This is the code that executes to render each beneficiary:
return idArray.map( item => (
<div>
<div className={item.visibility}>
<div className="beneficiary_background">
<div className="row">
<div className="col-3 text-left text_14">
<label>Name:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisName} value={item.beneName} maxLength="33"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>SSN:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisMid} value={item.beneMid} maxLength="9"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 1:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr1} value={item.beneAddr1} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 2:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr2} value={item.beneAddr2} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Address 3:</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisAddr3} value={item.beneAddr3} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>City</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisCity} value={item.beneCity} maxLength="20"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>State</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisState} value={item.beneState} maxLength="2"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label>Zip Code</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisZip} value={item.beneZip} maxLength="5"/>
</div>
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Spouse</label>
</div>
{this.renderSpouse(item.thisSpouse, item.beneSpouse)}
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Primary</label>
</div>
{this.renderPrimary(item.thisPorS, item.benePorS)}
</div>
<div className="row">
<div className="col-3 text-left text_14">
<label id="lblName">Percent</label>
</div>
<div className="col-9 text-left text_14">
<input type="text" id={item.thisPct} value={item.benePct} maxLength="3"/>
</div>
</div>
<div className="spacer">
</div>
<div className="row">
{this.renderDeleteButton(item.thisDelete)}
</div>
<div className="spacer">
</div>
</div>
</div>
<div className="spacer">
</div>
</div>
))
At the top of the render, there is a line of code that reads
<div className={item.visibility}>
{item.visibility} will contain hide_div for any beneficiary that the user elects to delete.
My issue is that when the delete the beneficiary button is clicked (I clicked on the button for the second beneficiary), and the {item.visibility} gets populated with hide_div, this is what gets rendered:
As you can see, the render occurs, but it just hides the . I though with bootstrap, the next would float up and not leave any whitespace between the two 's that are visible.
Any suggestions?
Try using reduce over map so you can selectively render your items instead of hiding the ones you don't want to see.
Something along the lines of:
return idArray.reduce( (all, item, idx) => {
if (item.visibility !== 'hide_div') {
all.push(
<div key={idx}>
<div className="beneficiary_background">
...
</div>
</div>
)
}
return all
}, [])
You won't need to set className for hidden items anymore
if you're using visibility: hidden, it will indeed leave the space there. Visibility Hidden leaves the space that should be occupied by the content hidden if it was visible. If you want no space left at all, use display: none instead. It will act the same way but without space left for the element.
you can filter the data which have been marked as deleted using filter function in javascript:
const array = [{beneDeleteFlag: true, data: 'data 1'}, {beneDeleteFlag: false, data: 'data 2'}, {beneDeleteFlag: false, data: 'data 3'}, {beneDeleteFlag: true, data: 'data 4'}]
const newArray = array.filter((item) => item.beneDeleteFlag !== true)
console.log(newArray)
and the reason why you still got the empty space in your UI, it's because you're using visibility: 'hidden' in your CSS, you should use display: 'none' instead.
I have a form with angular-wizard steps like below
<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<wz-step wz-title="Unqualified">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Source Lead</label>
<input type="text" class="form-control input-sm clearable" ng-model="source_lead" />
</div>
</div>
</wz-step>
<wz-step wz-title="New">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Company</label>
<input type="text" class="form-control input-sm clearable" ng-model="company" />
</div>
</div>
</wz-step>
<wz-step wz-title="Working">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Title</label>
<input type="text" class="form-control input-sm clearable" ng-model="title" />
</div>
</div>
</wz-step>
<wz-step wz-title="Nurturing">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Rating</label>
<input type="text" class="form-control input-sm clearable" ng-model="rating" />
</div>
</div>
</wz-step>
<wz-step wz-title="Converted">
</wz-step>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
</div>
</wizard>
I want to focus to the step "New" (or "Working", or "Converted",...) instead step "Unqualified" on form load.
What can I do? Thanks in advance!
Here's what you can do. In their WizardHandler service, we have access to functions like goTo() (on wizard() which is your current wizard). Like this:
$timeout(function() {
WizardHandler.wizard().goTo("Working");
});
Why inside $timeout?
Because, if the second parameter to $timeout i.e. delay is not provided, the default behaviour is to execute the function after the DOM has completed rendering.
And, we need to execute this after wizard completes rendering.
Here's the working plunker
Alternatively, if you want the previous steps to be visited (visited steps look green with default styles), you can write a loop that goes next() until we reach our desired step (in this case, Working)
Change their position, if you want step "New" to be first, just set it as first.
<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<wz-step wz-title="New">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Company</label>
<input type="text" class="form-control input-sm clearable" ng-model="company" />
</div>
</div>
</wz-step>
<wz-step wz-title="Unqualified">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Source Lead</label>
<input type="text" class="form-control input-sm clearable" ng-model="source_lead" />
</div>
</div>
</wz-step>
<wz-step wz-title="Working">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Title</label>
<input type="text" class="form-control input-sm clearable" ng-model="title" />
</div>
</div>
</wz-step>
<wz-step wz-title="Nurturing">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Rating</label>
<input type="text" class="form-control input-sm clearable" ng-model="rating" />
</div>
</div>
</wz-step>
<wz-step wz-title="Converted">
</wz-step>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
</div>
Or you can set wz-order attribute. The is order in which the steps should be in. If no order or duplicated order it will add the step to the end.
I want to show the div which has Turn On E-Verify when clienId has a value if not I want to show the div which has Turn Off E-verify. I am not getting any errors but always the second div shows up and the button won't work. What am I doing wrong?
HTML :
<div class="col-md-12 col-centered" ng-app="CompanyEVerify">
<div class="row" ng-controller="EVerifyOptionController">
<form name="EverifyForm" id="EVerifyForm" class="form-horizontal" role="form" novalidate ng-submit="EVerifyForm.$valid && submit()"
style="background-color: #F0F0F0; border-radius: 8px; padding-top: 10px; margin: 15px !important;">
<div class="alert alert-danger" id="messages" style="display:none">{{message}}</div>
<div class="form-horizontal">
<input type="hidden" ng-model="company.Id" />
<div class="row">
<div class="col-md-12">
<div style="font-size:20px;font-weight:bold;display:inline-block">Would you like to opt for E-Verify feature?</div>
<br />
<div >
<div class="row" ng-if="clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
</button>
</div>
</div>
<div class="row" ng-if="!clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
In my controller :
$scope.clientId= sessionStorage.clientId;
I am going to assume that your controller is properly evaluating your conditions. In which case you would use ng-class to bind to css classes. I am not sure If you are trying to hide/show or disable toggle. Going with show/hide, you can make a class:
.hide{
display:none;
}
On one of your elements:
<button ng-class="{'hide': clientId}" ></button>
On the other element:
<button ng-class="{'hide': !clientId}" ></button>
Now the hide property on both elements is bound to one single source.
Check out docs example