I am using the react-responsive-carousel library. Here, I want to change the default previous and next button. And render navigation buttons always visible
My code is
<Carousel
showThumbs={true}
showStatus={false}
infiniteLoop
// emulateTouch
// autoPlay
useKeyboardArrows
// axis="vertical"
// selectedItem={1}
width="1000px"
>
<div>
<Card1 />
</div>
<div>
<Card2 />
</div>
<div>
<Card3 />
</div>
</Carousel>
I want to go from this (figure 1 ) to this (figure 2)
Related
I am using a list of expansion panels inside virtual-scroll using scrollWindow,
it works fine until I put this virtual scroll in matSideNav.
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-accordion multi>
<cdk-virtual-scroll-viewport itemSize="50" scrollWindow>
<mat-expansion-panel *cdkVirtualFor="let item of items">
<mat-expansion-panel-header>
<mat-panel-title>
{{item}}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<div>
Content for {{item}}
</div>
<div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div>
</div>
</mat-expansion-panel>
</cdk-virtual-scroll-viewport>
</mat-accordion>
</mat-sidenav-container>
when I expand an expansion panel, the side-nav shows its own scroll instead of varying the height of the virtual scroll.
here is the scenario.
steps to recreate the issue
scroll to the bottom
expand the last item
I am using:
angular15
material-design 15
I am stuck by finding a specific button within my list of items... The button exists 3 times with exact same data-testid, but the parent is different. And I end with
error: cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.
HTML:
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
<div data-testid="list-item">
<div>
<div>
<span data-testid="status2">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
How can I select the details_button of either status1 or status2?
My attempt was:
cy.get('[data-testid=status1]')
.get('[data-testid="details_button"]').click()
cy.get('[data-testid=status1]')
.parent().parent()
.get('[data-testid="details_button"]').click()
Your first attempt is almost correct, but use .find() for the second step
cy.get('[data-testid=status1]')
.find('[data-testid="details_button"]') // find works here (same as .within())
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
<!-- span closing tag is missing -->
</div>
</div>
</div>
The reason that works is because the HTML posted is slightly invalid - the <span> has no closing tag.
Cypress thinks that the button is inside the span, so using .find() works.
However if that's a typo, you should change to your 2nd command using .parent() and also change .get() to .find()
cy.get('[data-testid=status1]')
.parent()
.find('[data-testid="details_button"]')
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1"></span>
<!-- span is closed, button is outside span so use .parent() command -->
<button data-testid="details_button">click</button>
</div>
</div>
</div>
You can use the siblings() method is cypress.
cy.get('[data-testid=status1]').siblings('[data-testid="details_button]').click()
cy.get('[data-testid=status2]').siblings('[data-testid="details_button]').click()
You can also use a combination of parent() and within(), something like:
cy.get('span[data-testid=status1]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
cy.get('span[data-testid=status2]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
I am using React (and Material UI), and I am trying to submit a form. As default by pressing enter when focused on the text field, the form submits. I want it to only happen when I press the Submit button.
The form
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="title"
label="Title"
name="title"
autoComplete="title"
autoFocus
defaultValue={title}
/>
<TextArea setData={setData} data={JSON.parse(description)} />
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Finish
</Button>
<Link href="/">
Back
</Link>
</Box>
The submit function
const handleSubmit = async (e) =>
{
e.preventDefault();
console.log(e)
//
}
This is default behavior since you have your code in a form. It shouldn't matter to you where the users cursor is. This is necessary for screen readers and for basic user experience.
To focus on the next field, the user should be able to tab to the next field.
e.preventDefault is to keep the page from reloading on submit.
I just added onKeyPress to the TextField and checked if the pressed key is equal to Enter
<TextField
margin="normal"
required
fullWidth
id="title"
label="Title"
name="title"
autoComplete="title"
onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} //<----
autoFocus
/>
The Form Component is of type styled.form`` and is defined outside the component on the bottom of the file. The issue: The onSubmit event handler does not work. Official docs don't have anything on onSubmit.
const submitHandler = e => {
e.preventDefault()
console.log(e) // nothing appears in console
}
/// ... in JSX:
<Form onSubmit={submitHandler} >
<Input placeholder="YouTube URL" required name="input" onChange={changeHandler} />
<Button type="submit" >
<Icon /> <Span>Add Song</Span>
</Button>
</Form>
//... styled form defined at the bottom of the file below export default statement:
const Form = styled.form`
display: flex;
`
A Solution that I have found is to attach the submitHandler to an onClick event of a button inside a form. I'm not sure about that as I have never in the past used the button for submitHandlers (and I don't think it even works in pure React).
So, this would work:
<Button type="submit" onClick={submitHandler} >Submit</Button>
The problem is with the button. You have the <Button> component implemented as a <div> styled component. Having type="submit" on a <div> has no effect as far as the form is concerned. That's why the submit event never got fired.
So, you can change your code as follows:
const Button = styled.button
remove onClick from the button and change the onSubmit simply to submitHandler:
<div>
<Form onSubmit={submitHandler}>
<Input
placeholder="Paste YouTube URL here"
required
name="input"
onChange={changeHandler}
/>
<Button type="submit">
<Icon /> <Span>Add Song</Span>
</Button>
</Form>
</div>
You will see the results in the UI, as the form will start applying validation (because of the required attribute on the input), and also in the console where the handler will log.
I am using redux-form and setting up a sign-up form. The fields are not like that appear in sandbox preview on their documentation site.
I tried to provide bootstrap classNames form-group, form-control for field and input respectively but it appears to be default action. Just a bar on bottom.
Actually I have a blue background so I need a completely white box so user can see the grey placeholder of an input field.
My renderFields method:
renderFields(){
return _.map(formFields, ({name,type,placeholder}) =>{
return(
<Field
key={name}
type= {type}
name={name}
placeholder={placeholder}
component={SignupField}
/>
);
})
And Field method:
<div className="form-group">
<input type={type} className="form-control" {...input}
placeholder={placeholder}/>
<div className="red-text" style={{marginBottom:"30px"}}>
{touched && error}
</div>
</div>
And form:
<form class="user-forms" onSubmit=
{this.props.handleSubmit(values=>this.submitForm(values))}>
{this.renderFields()}
<button className="btnSubmit btn btn-primary"
type="submit">Create Account
</button>
</form>
I expect a box for each input & not line at bottom.
OK I was using materialize css that caused the interference.