I am trying to add a tooltip next to text area.
But tooltip is coming below text area as shown in image
Here is the code which I have written
<div className="form-group row">
<label className="col-sm-4 col-form-label">Player Account Names: </label>
<div className="col-sm-8">
<textarea
id="noteText"
style={{ padding: "8px 10px", lineHeight: "17px", height: "125px" }}
rows={3}
className="form-control"
name="accountNames"
value={this.state.dropBonusState.accountNames}
onChange={this.droupBonusChange}
/>
<span
className="fas fa-question-circle"
onMouseEnter={() => "Enter value"}
onMouseLeave={() => ""}
/>
</div>
</div>
I also tried the following
<div data-tip="This is tool tip">
But it is not working.
Tool tip should come in the green box in image.
Related
I'm trying to implement a dropdown item that would allow the user to select an image when he clicks on it:
<Dropdown
isOpen={this.state.dropdownOpen}
toggle={this.toggle}
direction="left"
>
<DropdownToggle
tag="span"
onClick={this.toggle}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
color="danger"
>
<span className="badge badge-default w-100 h-100 cursor-pointer-no-color chat-box-button">
<i className="fa fa-plus cursor-pointer-no-color" />
</span>
</DropdownToggle>
<DropdownMenu className="dropdown-danger scrollable-drop-down-menu">
<DropdownItem className="lodeep-theme-button drop-down-no-transparent btn-outline-default">
<label
htmlFor="avatar-upload"
style={{
cursor: "pointer",
}}
title="Change profile image"
>
<input
id="avatar-upload"
type="file"
accept="image/*"
style={{ display: "none" }}
onChange={this.onSelectFile}
/>
<i className="fa fa-picture-o"></i>
</label>
</DropdownItem>
</DropdownMenu>
</Dropdown>
This is the result:
The problem is that when I click on the dropdrown item, the dropdown menu closes and nothing happens. Any idea how to fix this??
I added style={{ display: "none" }} to keep only the image icon and make the UI look better. If I remove it, I will get a normal input and it would work just fine.
I have an array with default values that are being used when creating a customer. By default, all the checkboxes(50,70,90) will be pre-selected from the back-end but not visible on the UI when adding a customer. But, when you edit, it must display all the checkboxes and the user can either un-check (50, 70, or 90%) and then update.
Process:
On Add customer:
Create customer
by default(you will have 3 checkboxes) from the view but hidden
All checkboxes will be selected (50,70 and 90%)
A user won't see the checkboxes as they are hidden.
User will see the checkbox on edit only.
Save info
Update:
from the view display/bind three checkboxes
All checkboxes will be selected because, on add, we have set them on the array.
A user will have the option to un-tick either (50,70, or 90%) checkboxes
And save with the new updated checkbox selection.
Thanks for your help
ts. My Object
public newCustomer: any = {
cont1: undefined,
--
--
balance: 0.0,
credit_limit_warning: [
{
type: "P",
warning_threshold: 50,
},
{
type: "P",
warning_threshold: 70,
},
{
type: "P",
warning_threshold: 90,
}
]
};
HTML : This is what i have tried on Adding but not working.
<div class="row" hidden>
<div class="col-lg-5 col-md-5 col-12">
<p class="color-white-60">
Notifications<br>
<small style="font-size: 12px;">(% of Credit Limit)</small>
</p>
</div>
<div *ngFor="let item of credit_limit_warning; let i = index;" hidden>
{{i}}
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" formControlName="'creditWarning50 + i'" [(ngModel)]="item.credit_limit_warning"/><label> 50 % </label></span>
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(70, false)" class="checkbox" type="checkbox" [name]="'creditWarning70' + i" [(ngModel)]="item.credit_limit_warning"/><label> 70 % </label></span>
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(90, false)" class="checkbox" type="checkbox" [name]="'creditWarning90' + i" [(ngModel)]="item.credit_limit_warning"/><label> 90 % </label></span>
</div>
</div>
HTML Update: this is the update html and i am not sure how i can tackle this.
<div class="col-lg-4 col-md-4 col-12">
<p class="color-white-60">
Contact Number
</p>
<input [(ngModel)]="customer.cont1" name="contactNumberEdit" placeholder="Contact Number" formControlName="contactNumber" class="form-control" type="text">
</div>
<div class="row" >
<div class="col-lg-5 col-md-5 col-12" >
<p class="color-white-60">
Usage Notifications<br>
<small style="font-size: 12px;">(% of Credit Limit)</small>
</p>
</div>
<div class="col-lg-7 col-md-7 col-12 mt-10" >
<span style="padding-right: 10px;"> <input name="usageNotification" formControlName="usageNotification" (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" /><label> 50 % </label></span>
</div>
</div>
I'm working with ReactJS and this success notification thing is not working as expected. When I crop the image and click on Confirm Crop button as shown in image below, I get the Loading loader and after the image is cropped it shows Image Saved! notification below the Confirm Crop button. But I want the Loading and Image Saved on side of the button, someone else worked on this before me and I am unable to solve this. What could fix the problem?
This is the form I'm working on below:
return (
<form className="form-horizontal" ref="form" onSubmit={this.handleForm}>
<fieldset>
<legend>
{this.state.success === true ? (
this.props.history.push(`/${serviceId}`)
) : this.state.success === false ? (
<Alert bsStyle="danger">
<strong>An error occured!</strong>
<ol>
{this.state.errorMessages.map((err, index) => (
<li key={index}>{err.message}</li>
))}
</ol>
</Alert>
) : (
""
)}
</legend>
<div className="row-fluid">
<div className="span5">
<div
className={
this.state.invalid.name === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="name">
Name: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="name"
defaultValue={this.state.form.name}
name="name"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.image === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="image">
Image: <i className="required">*</i>
</label>
<div className="controls">
<input
type="file"
name="image"
defaultValue={this.state.form.image}
onChange={this.handleState}
accept="image/gif, image/png, image/jpeg, image/jpg"
required
/>
<span className="help-inline">File Type: png, gif, jpg</span>
<div>
<ReactCrop
src={
this.state.companyImage === null
? ""
: this.state.companyImage
}
crop={this.state.crop}
onImageLoaded={this.handleImageLoaded.bind(this)}
onComplete={this.handleOnCropComplete.bind(this)}
onChange={this.handleOnCropChange.bind(this)}
keepSelection={true}
/>
</div>
{this.state.croppedImageUrl && (
<img alt="Crop" src={this.state.croppedImageUrl} />
)}
<br />
{this.state.croppedImageUrl ? (
<div>
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
</div>
) : null}
</div>
</div>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
<div
className={
this.state.invalid.address
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="address">
Address <i className="required">*</i>
</label>
<div className="controls">
<textarea
rows="4"
required
cols="20"
id="address"
name="address"
onChange={this.handleState}
defaultValue={this.state.form.address}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.telephone
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="telephone">
Telephone: <i className="required">*</i>
</label>
<div className="controls">
<input
type="number"
step="any"
required
name="telephone"
defaultValue={this.state.form.telephone}
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.city === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="city">
City: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="city"
defaultValue={this.state.form.city}
name="city"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div
className={
this.state.invalid.country === true
? "control-group error"
: "control-group"
}
>
<label className="control-label" htmlFor="country">
Country: <i className="required">*</i>
</label>
<div className="controls">
<input
type="text"
required
id="country"
defaultValue={this.state.form.country}
name="country"
onChange={this.handleState}
/>
<span className="help-inline">Field required</span>
</div>
</div>
<div className="row-fluid">
<div className="span12">
<button
className={disabledColor}
type="submit"
disabled={this.state.disabled}
ref={button => {
this.submitButton = button;
}}
>
Submit
</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
);
How it looks right now:
The "Image Saved!" notification also appears in the same place as Loading as evident from code above, I need them on the side of the button.
This link provides the entire file and css associated with it that I'm working: https://gist.github.com/BikalNepal/0fe035e8845a5bb92c477abd9c003a50
CSS: https://gist.github.com/BikalNepal/73a3db6127ebda4b5489be8df3143d43
You need to re-structure you react element and that's all.
{this.state.croppedImageUrl ? (
<div className="flexContainer">
<button
className="btn btn-primary"
type="button"
onClick={this.handleState}
>
Confirm Crop
</button>
{this.state.imageFetching && (
<div className="controls">
<p className="imageWait">Loading...</p>
</div>
)}
{this.state.showImageSuccess && (
<div className="controls">
<p style={{ color: "green" }}>Image Saved! </p>
</div>
)}
</div>
) : null}
NOTE: All what I've done is: wrapped the elements that need to share same horizontal space, in one parent div.
And in the css file introduce a class:
.flexContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
This might lead to lot of spacing between your button and notification. If so, try adding max-width: requiredValue; in the definition of the flexContainer class.
Using Angular 6, I have the html below and would like to click the edit text to make the div containing Detail$.Title editable.
Im trying to do it as per this SO post
<div class="col-sm-6">
<div class="card text-left" >
<div class="card-header text-secondary">Title <small class="pull-right text-danger" (click)="setTitleEdit()">Edit Text</small></div>
<div class="card-body">
<span *ngIf="!cd.canEditCode">{{Detail$.Title}}></span>
<input *ngIf="cd.canEditCode" type="text" class="form-control" />
<p class="card-text text-secondary">{{ Detail$.Title}}</p>
</div>
</div>
intellisense doesn't like the forEach or canEditCode below, I know Im missing something, just not sure what, Im unsure where the canEditCode is coming from in the linked post. In my ts file Detail$ is an object containing the data returned from a call
getEventDetail(): void {
this.data.getDetail(this.id)
.subscribe(data => this.Detail$ = data);
}
setTitleEdit(){
this.Detail$.forEach(t => t.canEditCode = false)
this.Detail$.canEditCode=true
}
try like this
<div class="col-sm-6" *ngFor="let item of detailItems">
<div class="card text-left">
<div class="card-header text-secondary">{{item.title}}
<small class="pull-right text-success" (click)="item.canEditCode = true">Edit</small>
<small class="pull-right text-danger" (click)="item.canEditCode = false">Close</small>
</div>
<div class="card-body">
<span>{{item.name}}</span>
<input *ngIf="item.canEditCode" [(ngModel)]="item.name" type="text" class="form-control" />
</div>
</div>
[(ngModel)]="item.name" make two way binding to item property (name)
stackblitz demo
I think it's easier to use native HTML input for editing and viewing with ngModel and style options.
Simply like this:
<input type="text" [(ngModel)]="title" class="editable">
And for CSS class:
.editable{
border:none;
outline:none;
background:transparent;
}
That's should work.
i searched through similar questions and still could not find a solution. I have a fontawesome icon that triggers an expanding form.
<div class='create-inventory-form'></div>
<div class='icon fa fa-pencil' id='form-container'>
<!-- <span>Create</span> I tried this but it only shows on the pop-up form-->
<span class='icon fa fa-close' id='form-close'></span>
<div id='form-content'>
<div id='form-head'>
<h1 class='pre'>Add New Item to Inventory</h1>
<p class='pre'>Good choice...</p>
<h1 class='post'>Thanks!</h1>
<p class='post'>I'll be in touch ASAP</p>
</div>
<form>
<input class='input name' name='user_name' placeholder='Your name please' type='text'>
<input class='input email' name='user_email' placeholder='A contact email' type='text'>
<select class='input select' name='subject'>
<option disabled=''>What shall we talk about?</option>
<option selected=''>About a new project</option>
<option>About a job opportunity</option>
<option>Let's do this over a coffee</option>
</select>
<textarea class='input message' placeholder='How can I help?'></textarea>
<input class='input submit' type='submit' value='Send Message'>
</form>
</div>
</div>
this is what i have with the code above
this is what i want to create
If you want the respective text to be vertically aligned center with the icon so you have to set a css property Vertical align : middle to your icon class.in your case
.fa-pencil:before {
content: "\f040";
vertical-align: middle;
}
Jsfiddle
.fa{
display:block;
text-align:center;
}