Something like the following doesn't work...
<Select
columns={2}
onChange={onChange}
>
{items}
</Select>
Select have only attributes as below :
autofocus, disabled, form, multiple, name, required & size
As Per React DOM build with common : aria-, data-, checked, className, htmlFor, onChange, selected, style, value
As Per react 16+ custom attribute support with following below :
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
Cant find column with Select
Related
Ho to add alt attribute for the React coreUI CAvatar img?
We have the below code to display the image as an avatar in our application, but while doing the web accessibility test we get a Missing alternative text error for this image.
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" />
So I tried to add alt text like below
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" alt="power" />
but the alt text is applied for the outside div of the avatar.
How to add alt text for img attribute when using CAvatar?
here is the generated HTML for ref: <div class="avatar avatar-lg" alt="Yet-to-Start" style="background-color: rgb(113, 198, 162);"><img src="/assets/img/avatars/power.jpg" class="avatar-img"></div>
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
You can use a className in your dropdown menu with attribute "z-index:1000".
For example..
<div className="dropdown-menu">...</div>
on your .css file
.dropdown-menu{
... //another attributes for your div and finally..
z-index:1000
}
Currently I want to use the primeng autocomplete multi select component: https://www.primefaces.org/primeng/#/autocomplete
What I need additionally is that every item which I want to select from as an autosuggestion should be colored differently.
E.g. If I have the options Paris (red), Munich (blue) the background should be shown in a different color.
Once you have assigned a colour for each of your countries, just use templating to apply it :
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)"
field="name" [size]="30" placeholder="Countries" [minLength]="1">
<ng-template let-country pTemplate="item">
<div class="ui-helper-clearfix" [ngStyle]="{'background-color':country.backgroundColor}">
{{country.name}}
</div>
</ng-template>
</p-autoComplete>
Check my Plunker where I defined a random colour for each country :
this.listOfCountries.forEach(function (item) {
item.backgroundColor = "#"+((1<<24)*Math.random()|0).toString(16);
});
What is the best way to set the width of a Material Design Lite multi-line TextField? I set the CSS width to a pixel value, and it works, but when you click on it to enter some text, the underline highlighting does not extent out to the full width of the component. I tried cols="80" and that did not work. I also tried width="100%" and that did not work. I'm working in ReactJS and TypeScript if that makes a difference.
The width needs to be set on the mdl-textfield container div for the text field. For example, this works:
.mdl-textfield{
width:500px;
}
Though that will style all of your textfields. If you only want one of them to be that wide, then define an id or class on the same div as has the mdl-textfield class and apply the style to that. For example:
<div class="mdl-textfield mdl-js-textfield extrawide">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
with the css
.extrawide{
width:500px;
}
I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.
form
<div class="col-xs-12 testFormLabel">
<md-input-container class="testLabel">
<label>Reason</label>
<input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">
</md-input-container>
</div>
css
.md-input-has-value. testLabel > input {
color:#008cba;
}
Problem
How can i change auto focus label name and underline to different color ( let say from dark blue to green )
You can use this selector to change the input:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: red
}
Use this to change the label:
md-input-container:not(.md-input-invalid).md-input-focused label {
color: red
}
Include this after you include the css for angular material.
I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input
Looking at their demo, and inspecting a focused input.
You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.
From the docs...
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.