I've got this component in react:
<div className={"form-group "+ this.props.className}>
<label
className="control-label"
>
{Translation.getPhrase(this.props.label)}
</label>
{this.props.children}
</div>
I returns a column with a label as Header. Now I want it to return a column with the exact same height if I don't specify the label-property. If I just set a label without a value in it react won't display it.
Related
Input and Label:
Input, Icon and Label:
Icon and Label:
Label only:
There are no additional styles or margins applies to the input or label.
The container is flex with a gap set to 12px.
Where does that extra space come from when it's only the input and the label?
PS:
I am using Stencil.js.
The icon is a separate stand-alone component nested between the input and label, which are html elements. The icon is conditionally shown depending on whether or not an icon name is passed to the component.
This is what my code looks like:
return (
<a href="javascript:;" class={`dropdown-item ${this.checkboxColor}`}>
{this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input`} />}
<ifx-icon icon={this.icon}></ifx-icon>
<label htmlFor="checkbox4" class="form-check-label"><slot /></label>
</a>
)
ngbTypeahead does not offer scrollbar.
I use this as the recommendation from NgbTypeahead component doesn't scroll inside a scrollable component:
<div style="height: 300px; overflow-y: auto; position:relative">
<input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
[resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
</div>
It works well except that it shows the ugly empty space when the list is not shown (or it does not have focus)
How to remove the empty space and the overlay pops over the other element when the list with a scroll bar appears?
Thank you for your help.
I have solved this problem by moving the "height" style up:
[style.height]="data.origin? '5rem': dropdownHeight":
as I see, for ngbTypeahead, when user has not selected any item, data.origin is undefined, so I want that when user has selected some item from the dropdown list, I set the height to minimum.
in .html file:
<div class="form-group row" [class.has-danger]="searchFailedOrigin" [style.height]="data.origin? '5rem': dropdownHeight">
<label for="origin" class="col-sm-4 col-form-label col-form-label-sm">Origin</label>
<div class="col-sm-7 col-offset-sm-1" style="overflow-y: auto; position:relative">
<input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
[resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
</div>
<div class="form-control-feedback" *ngIf="searchFailedOrigin">No Airports Found...</div>
</div>
Where dropdownHeight is updated in component .ts file in searchOrigin function:
searchOrigin = (text$: Observable<string>) => {
.
.
.
// response is the response from server. It is a list of data filtering by "text"
this.dropdownHeight = response.data.length <= 1? `5rem`: response.data.length <= 10? `${(response.data.length + 1) * 2.56}rem`: `28rem`;
// An item in the dropdown list is 2.56rem in height
// I want the maximum height is 28rem.
.
.
.
}
This solution can remove the ugly empty space when not showing the dropdown list, but the dropdown list does not overlay the other elements.
I appreciate any improvement.
I am trying to get my text area to display with row height recognition. I've followed several of the suggestions that have been made on this board.
I currently import componentClass from react-bootstrap and in my form field, I have:
<div className="form-group">
<label htmlFor="overview">Outline your proposal</label>
<Field
name="overview"
componentClass="textarea"
rows={4}
className={
"form-control" +
(errors.overview && touched.overview ? " is-invalid" : "")
}
/>
<ErrorMessage name="overview" component="div" className="invalid-feedback" />
</div>
It still renders in a single line.
What is the hidden secret about making this work with row numbers for text area?
I have a list of checkbox and I want to underline the one that is checked. My code looks like the following:
TS file:
currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();
ngOnInit() {
q1.desc = "One";
q1.id = "1";
q2.desc = "Two";
q2.id = "2"
currentQuarter = q1.id;
quarters.of([q1, q2]);
}
isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}
HTML file:
<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>
CSS file:
.custom-control-input:checked~.custom-control-indicator {
color: #fff;
background-color: #3bb8eb;
}
These are the issue with this code:
1. when I load the page, the default checked checkbox has correctly the class 'checked' but the CSS is not applied, i.e. it's not underlined
2. when I manually select a checkbox the class 'checked' correctly applies and the CSS too applies
3. when I manually select another checkbox, the class 'checked' correctly switches from one to the other, but the CSS of the former do not update, i.e. the previous checkbox remains underlined
Thanks for any advice.
.custom-control-input:checked~.custom-control-indicator
:checked doesn't mean that it has the checked class, but it means that it's actually checked. If you want to select the checked class, use a dot in place of a colon:
.custom-control-input.checked~.custom-control-indicator
I want to create custom styling for my form elements. Therefore I have to add a parent element to each input and select element. The parent element will contain the CSS classes for the styling. Example:
<div class="o-form-field is-valid">
<input formControlName="foo">
</div>
<div class="o-form-field is-invalid">
<input formControlName="bar">
</div>
<div class="o-form-field has-error">
<input formControlName="baz">
</div>
I am looking for a solution where I can replace the outer DIV with a component that watched the child input state and figures out what classes are needed. Renders the DIV in it's template and transcludes the input element. So my form template would look something like this.
<form-field-container>
<input formControlName="foo">
</form-field-container>
<form-field-container>
<input formControlName="bar">
</form-field>
<form-field-container>
<input formControlName="baz">
</form-field>
I am using Reactive forms.