CODEWITHSUNDEEP
jquerycssnode.jspugowl-carousel
Ju Chépa
Ju Chépa

Reputation: 67

Owl Carousel see two slides when have input

I have a weird behavior when a I put an input into one div (with jade) When I put only labels on div slides there's no issue.

But when I tried to set a input I see slide1 and slide2 at the same time(see below the issue and code).

Any style is applied on input except Bootstrap. And even if i removed all style and let the minimum, input cause the problem.

Superpose slides issues

div#owl-example.owl-carousel
        div 
            legend Which Type ?
            div.choice
                div.choice1
                    h2 Choice 1
                div.choice2
                    h2 choice2
        div
            legend Operating data
            div.row
                div.col-md-6
                    div.input-style
                        label Email : 
                            input(type='text', name="email",placeholder="placeholder", autofocus="autofocus" )
                    div.input-style
                        label Name : 
                            input(type='text', name="name",placeholder="placeholder")
                div.col-md-6
                    div.input-style
                        label adress : 
                             input(type='text', name="adress",placeholder="placeholder")

When I remove inputs everything works well. Anyone have an idea to solve it ?

I really have no idea...

Upvotes: 0

Views: 1081

Answers (1)

Dana Wheeler
Dana Wheeler

Reputation: 64

I believe your problem is related to the text input receiving focus immediately following carousel initialization. I created a fiddle which may reproduce your issue. Because of the nature of fiddle it will not by default set focus to the slide text input, so I had to simulate (what I think) is happening on your page using jQuery focus().

https://jsfiddle.net/Lgn3wqeq/1/

I had this problem myself and came up with the rather hacky solution of setting the focus to another element on the page and only setting focus on the carousel slide's text input when that particular slide was made visible (also needed to delay onset of the focus until after the css transition was complete). You can do something like:

$('.myCarousel').owlCarousel({
    singleItem: true,
    afterAction: function (elem) {
        var item = elem.find('.item').eq(this.currentItem);
        setTimeout(function () { item.find('input').eq(0).focus(); }, 800);
    }
});

Upvotes: 1

Related Questions