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.
Related
I have those purple lines ( as my screen bellow ).
I doing some conditionnal rendering, I'd like to know if I can remove all those purple lines.
I've heard removing all divs and adding React.Fragments might help, this what I've done so far. But the issue is still there.
If anyone could tell where the issue might come from, I'd be grateful !
the main view / Render 1
<div className="user-infos">
<h4><u> Parameters </u></h4>
{ (componentState == "edit") ?
<form >
<Render 3/>
</form>
: (componentState == "index") ?
<Render 2/>
: (componentState == "delete") ?
<React.Fragment>
<p> Are you sure you want to leave us ? </p>
<p> If yes, you have to type your email and press "confirm".</p>
<form>
<input type="text" />
<input type="submit" value="confirm email"/>
</form>
<span>
<button> Delete ur account</button>
<button> Cancel </button>
</span>
</React.Fragment>
: ""
}
</div>
Render 2
return (
<React.Fragment>
<p> Username : John </p>
<p> Timezone : London </p>
<span>
<button> Edit Profile </button>
<button> Delete account </<button>>
</span>
</React.Fragment>
Render 3
return (
<React.Fragment>
<label for="email"> Username :
<input type="text"/>
</label>
<label for="text"> Timezone :
<span>
<select
onChange={options}
<options>
</select>
</span>
</label>
<button type="submit"> Save Profile </button>
<button> Cancel </button>
</React.Fragment>
);
By default, chrome adds styling to your html. In the case of <p>, it adds the following css to your element.
If you want the margin to disappear, you need to set margin: 0; on your <p> element to overwrite chrome's styling.
The purple dash line occurs when there is available space for the elements to expand into. See here. From what I can tell from comparing flexboxes with other display types, the purple dash with purple background is specifically for space inside flexboxes (display:flex in CSS).
Would need to see your CSS to be sure, but I imagine there's justify-content: space-between telling the flexbox to evenly distribute the remaining empty space between the elements as well as flex-direction: column telling the flexbox to stack the child elements vertically.
If that's the case, you can remove justify-content: space-between and use flexbox styling to change things to how you want it to look. I found this website helpful: A Complete Guide to Flexbox
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
I'm trying to add checkbox in my mvc form but it's always created having opcaity:0 in css
this my code where i add the checkbox
<div class="col-md-3 px-1">
<div class="form-group">
<label>Is Suspended</label>
#Html.CheckBox("IsSuspended", false, new { #checked = "checked", #class = "form-control "})
</div>
</div>
when i use inspect element in browser where i put my checkbox i found opacity:0
but i don't know why it's been added to my checkbox or if I use something wrong
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox"
value="true" style="position: absolute; opacity: 0;">
You have an extra piece of code in your project that is adding style="position: absolute; opacity: 0;". On my computer, I only show the input without the extra 'style'.
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox" value="true">
To find the source, use the inspect function in Google Chrome browser and in the Computed tab, click on a property to see where it originated. You will see the reason for the extra position and opacity styles.
Below is an example showing that an element's border-right-color was set by the .form-control class, which is defined in form-less file. You can do the same for position and opacity.
i found the problem that I'm using js library called icheck in my js files
i deleted it and now it's fine
For me, it was because I had given my checkboxes the class "tooltip", which has special meaning in bootstrap.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
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.