I'll like to make a MDBInput smaller. I have :
<MDBInput className="w-100 p-3 h-25" type="text" label="URL Enunciat" name="name" value={quiz.name} />
but I'll like to reduce also the height and font size. but how?
tried that:
.test1{
height:30px;
font-size:9px;
}
<MDBInput className="test1" type="text" label="URL Enunciat" name="name" value={quiz.name} />
but did not work!
Thanks
Related
Hi so I'm learning about razor, and razor pages; and I'm working on adding items to a simple db.
I noticed something odd with the input in my form when I try to enter a Quantity (should be a int) it throws an error when I press 1 or any number; and says it should be string/Array/collection? Whats that about??
code excerpt from Products.razor:
#if (products != null) // Insert form
{
<EditForm Model="#product" OnValidSubmit="#HandleAdd">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText placeholder="Product Name" id="ProductName" #bind-Value="#product.ProductName" />
<br />
<InputText placeholder="Unit of Measurement" id="Unit" #bind-Value="#product.Unit" />
<br />
<InputNumber min="1" step="1" placeholder="Quantity" id="Quantity" #bind-Value="#product.Quantity" />
<br />
<InputNumber min="0.01" step="0.01" placeholder="Unit Price" id="UnitPrice" #bind-Value="#product.UnitPrice" />
<br />
<InputText placeholder="Category" id="Category" #bind-Value="#product.Category" />
<br />
<button type="submit">Submit</button>
</EditForm>
Wierd error in colsole:
I did notice someone had an idea on a un-related question:
Blazor EditForm adding InputNumber fields
But I treid that and its still not working; and additionally with this form code; now the little green border box indicating valid input doesnt light up.
Any help would be appreciated :D
Made a mistake in the constrution of my Product class applying a [MaxLength] attribute to my Quantity.
Removed it, add new migrations, and now it works :)
Im new to this plugin and could not find any documentation regarding my question.
I want to simply apply a value to the textarea. I started by giving it an id, but there are multiple html components that make up this textarea, ad more that ons instance of the id I added.
The value I enter gets saved, but when I reopen the modal, its suppose to load the text that was saved for that specific area.
<TextField
className="bd_textarea"
id={ `tt_description_text outlined-multiline-static`}
label="Pain description"
multiline
rows={5}
onBlur={ (f)=>(this.textOnBlur({id:answeringPainSpot.spotId, value:f.target.value, doc_name:answeringPainSpot.doc_name})) }
/>
Here are my attempts on both class and id and none worked.
$(".bd_textarea").val(spot_text);
$(".bd_textarea").next().find('textarea').eq(0).val(spot_text);
$('.bd_textarea').find('textarea').val(spot_text);
$("#tt_description_text").val(spot_text);
$("#tt_description_text").next().find('textarea').eq(0).val(spot_text);
$('#tt_description_text').find('textarea').val(spot_text);
This is the code when renderd.
<p class="MuiTypography-root MuiTypography-body1" id="modal-modal-description" sx="[object Object]">
<div class="MuiFormControl-root MuiTextField-root bd_textarea">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="tt_description_text outlined-multiline-static" id="tt_description_text outlined-multiline-static-label">Pain description</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-multiline MuiInput-multiline">
<textarea aria-invalid="false" id="tt_description_text outlined-multiline-static" rows="5" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline"></textarea>
</div>
</div>
</p>
Can you try setting the value like this:
<textarea
className="form-control"
rows="4"
placeholder="Add a comment"
value={this.state.newComment}
onChange={(e) => {
this.setState({
newComment: e.target.value,
);
}}>
</textarea>
I am creating a form. There is a radio input that chooses the value of the next input. The code works are written, but I get a warning in the Chrome console. I've tried adding onChange() several different ways but all I get are errors. How do I fix this warning.
const [lyeConcentration, setLyeConcentration] = useState("33.33%");
const [lyeUnits, setLyeUnits] = useState("percentage");
<div onChange={e => setLyeConcentration(e.target.value)}>
<input type="radio" id="lyePercentage" name="lyeUnits" value="33.33%" defaultChecked />
Percentage
<input type="radio" id="lyeRatio" name="lyeUnits" value="2:1" />
Ratio
</div>
<div>
<label htmlFor="lyeConcentration">Lye Concentration</label>
<input id="lyeConcentration" value={lyeConcentration} type="text" className="lyeConcentration" autoComplete="off" />
</div>
try the code below, i added onChange to both radio input and the text input.
I think its actually complaning about the text input.
const [lyeConcentration, setLyeConcentration] = useState("33.33%");
const [lyeUnits, setLyeUnits] = useState("percentage");
return (
<>
<div>
<input type="radio" id="lyePercentage" name="lyeUnits" value="33.33%" onChange={e => setLyeConcentration(e.target.value)} defaultChecked />
Percentage
<input type="radio" id="lyeRatio" name="lyeUnits" onChange={e => setLyeConcentration(e.target.value)} value="2:1" />
Ratio
</div>
<div>
<label htmlFor="lyeConcentration">Lye Concentration</label>
<input id="lyeConcentration" value={lyeConcentration} type="text" className="lyeConcentration" autoComplete="off" onChange={e => setLyeConcentration(e.target.value)}/>
</div>
</>
)
How does one access a value from props props.id inside a controlled input?
What I want to achieve.
<input
name="lname"
value={pax.adult1.lname} // This gets/displays input on state change
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
What I have tried:
<input
name="lname"
value={pax.adult`${props.id}`.lname} // This throws an error
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
I have also tried the following
value={pax.adult + props.id + `.lname`} // NaN.lname
And
value={`pax.adult${props.id}.lname`} // This displays the right value "pax.adult1.lname" but as a string
Any help will be appreciated.
Try it like that:
<input
name="lname"
value={pax[`adult${props.id}`].lname}
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
The code between the { } is just normal JS. So to access a property in an object using a variable in JS, you use square brackets and pass a string, list so: obj["aString"].
In your case, it would be:
pax["adult" + props.id].lname
or, to make it better looking:
pax[`adult${props.id}`].lname
Can someone help with sample of embedding the lightning-icon inside a lightning-input in LWC
<lightning-input type="search" name="To Address" label="To"
class="slds-input-has-icon_right slds-m-bottom_small">
<lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>
I have also tried the below Approach which doesn't work
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning-icon icon-name="utility:adduser" size="medium">
</lightning-icon>
<input type="text" id="text-input-id-1" class="slds-input" />
</div>
Here is the solution!!
<lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
</lightning-button-icon>
<lightning-input type="search" name="To Address" value={toAddress}>
</lightning-input>
Add the below CSS to the lightning-button-icon, which assist in overlaying the icon.
.btnIconOverlay {
position: absolute;
z-index: 1;
margin: 0.5% 0 0 92%;
}