This code:
<PopupContent>
<label htmlFor="popup" style={{ margintop : '0px', marginbottom : '0px' }}>log out</label>
<button type="button" id="popup" onClick={this.logUserOut} />
</PopupContent>
throws these two errors:
84:9 error A form label must be associated with a control jsx-a11y/label-has-associated-control
85:9 error A control must be associated with a text label jsx-a11y/control-has-associated-label
What am I missing?
You don't typically use a element to label a button. More commonly, the text inside the button serves as its label. Try something along the lines of:
<button type="button id="popup" onClick={this.logUserOut}>log out</button>
Other options could be any one of the following:
<button type="button" id="popup" onClick={this.logUserOut} aria-label="log out"/>
or
<span id="button-label" style={{ margintop : '0px', marginbottom : '0px' }}>log out</span>
<button type="button" id="popup" onClick={this.logUserOut} aria-labelledby="button-label" />
or
<button type="button id="popup" onClick={this.logUserOut}>
<img src="icon.png" alt="log out"/>
</button>
or
<button type="button id="popup" onClick={this.logUserOut}>
<span className="off-screen">log out</span>
</button>
where the CSS class of .off-screen hides the text off-screen in an accessible way e.g. do not use display: none; or visibility: hidden;
Looks like this rule isn't fully baked: see Consider adding jsx-a11y/control-has-associated-label when it becomes more stable
Related
I want to straight the images thumb image and also the bullets of the react-coverflow Library Slider.
i am using this code
<Coverflow width="960" height="500"
displayQuantityOfSide={2}
navigation={false}
enableScroll={true}
clickable={true}
active={0}
>
<div
onClick={() => fn()}
onKeyDown={() => fn()}
role="menuitem"
tabIndex="0"
>
<img
src='image/path'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<img src='image/path' alt='title or description' data-action="http://andyyou.github.io/react-coverflow/"/>
<img src='image/path' alt='title or description' data-action="http://andyyou.github.io/react-coverflow/"/>
</Coverflow>
You need to use slick slider. I have also faced the same issue and worked for me
Slick
I am using Material-UI for React.
This is the UI that I have so far, but I want to Submit button to have the same height as the Select component.
I tried to give height: 100% to the button
<Button
style={{ height: "100%", width: "30%" }}
variant="contained"
color="primary"
>
Submit
</Button>
But this doesn't really change the height.
This is the link for the codesandbox: https://codesandbox.io/embed/material-demo-nvcxk?fontsize=14&hidenavigation=1&theme=dark
I'm not sure if you have a requirement for potentially scaling the height, but generally input heights are fixed, so there's really nothing wrong with specifying it:
<Button
style={{ "min-height": "56px", width: "30%" }}
variant="contained"
color="primary"
>
Submit
</Button>
Sometimes there's no need to really overcomplicate things :D
For material-ui component custom styles
First, make sure you find the related official document well material-ui button-api
Open dev mode in your browser and you may find your button have the classes below like this
<a class="MuiButtonBase-root MuiButton-root Connect(RawComponent)-margin-38 MuiButton-contained MuiButton-containedPrimary MuiButton-fullWidth" tabindex="0" role="button" aria-disabled="false" href="..." >
<span class="MuiButton-label">
Your Button Name
</span>
<span class="MuiTouchRipple-root">
</span>
</a>
Notice that there are some classes refer to document
MuiButton-root // => Notice the `root` here
All you need to do is to add some styles to those classes. But how? There are many ways. All listed here also in document material-ui style solution
In your situation, choose one of the solutions and it will be done.
Is there a way to place material icon in an input filed as background at the right?
I know I can place an image as input filed background but material icons are not images and I think these are created by fonts.
this is what I am trying but no luck
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<a ng-click="vm.search()">
<i class="material-icons global-search-icon"></i> <!--search-->
</a>
the icon <i class="material-icons global-search-icon"></i> need to be the background image of <input type='text'/>
You can wrap your input and icon in a div:
<div id="divWrapper">
<input type="search" class="global-search"
ng-model="vm.searchText"
ng-keyup="$event.keyCode == 13 ? vm.search() : null"
placeholder="I can help you to find anything you want!"/>
<i class="material-icons global-search-icon"></i>
</div>
And add this styles:
#divWrapper{
display:inline;
position: relative;
}
#divWrapper i {
position: absolute;
left: 0;
}
.global-search:focus + i{
display: none;
}
I'm simply trying to make an image clickable and execute function.
Here is my code:
<button class="button button-stable button-clear" on-click="myFunction()">
<img src="image.png" >
</button>
But the function is not executing on the click event.
With angular you should use ng-click.
try ng-click="myFunction()"
you can do
<img src="image.png" ng-click="myFunction()" />
try put ng-click in <img>
For example
<img class="button " ng-src="{{i.imagem}}" ng-click="myFunction($index)"></img>
What you are looking for is event binding in Angular. Read more about this from Angular documentation.
<img [src]="yourVariable" (click)="yourFunction()">
You don't have to. With a little extra markup you can do this.
Wrap image in label
set for to a hidden button id
run js on button click
Doing this will be a more accessible solution for people with disabilities.
Use this html.
<!--html-->
<label for="image-click">
<img src="http://lorempixel.com/100/100" alt="" />
</label>
<button id="image-click"
onclick="myFunction()"
class="visuallyhidden">
Click to run image
</button>
And add some css.
//css
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
label {
cursor: pointer;
}
Here is a codepen that shows how - http://codepen.io/bitlinguist/pen/bEJvoz
You can just as easily adopt this approach with angular directives.
I will change height of input form (and also the buttons - save and cancel).
Here is an example but I could not change the height of the input form:
My try
<button class="btn btn-primary" type="submit">
<button class="btn btn-default" ng-click="$form.$cancel()" type="button">
I would be thankful for help.
Thanks a lot!
You didnt specify the height with Elements
Css need to be changed:
div[ng-app] { margin: 50px; }
.editable-has-buttons.editable-input { width: 200px; height:100px; text}
.editable-input.btn-sm {width: 10px;}
.editable-controls.form-group{
height:200px;
}
Fiddle for solution:http://jsfiddle.net/NfPcH/10362/