Bootstrap 4 Beta

[qvarting]

Sup dwgs,

Wouldnt it be nice to add bootstrap 4 beta support?
Inline works pretty well at the moment but not popout with popper.js

Cheers

[scheinercc]

just as another reference: #950

[Talv]

I've gathered fixes from #950 and submitted PR.
Also ran build, available here: https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable/js

[jmm13]

@Talv I've used your js and css, but for some reason I can't enter anything in the input box. messed around with the css and can't figure out what's going on. it's like it's disabled or something.

[jmm13]

Nevermind- it's on my end. I'm loading the inline editor in a modal form, and for some reason that's making it act goofy. When i load your js in a normal page, it works fine in bootstrap 4. Thanks, btw, for getting this working with BS4!

Edit: Found the cause: Bootstrap 4 modals have display: block. If i remove that, the modal disappears, but the editor popover will work as expected. Not sure if i can do anything about that, but for the sake of getting work done, i'll probably no longer make the table use a modal.

Edit 2- in case anyone finds this later and is having the same issue, i was able to solve it by giving the elements that use the inline popup on a modal the class inlineEditPop and adding the following js:

$('.inlineEditPop').popover({
            container: '#editorModal div' // editorModal is tne name of my modal window. ymmv.
        });

[sburkett]

@Talv You are a lifesaver! Thanks! Works like a champ.

[sburkett]

@Talv I spoke too soon, it seems. It technically "works", but for some reason, when I click on an editable element, it jumps to the top of the page, meaning I have to scroll down to get back to the editable field. I'm assuming this is an easy fix involving preventDefault(), but I haven't looked at it closely yet.

[qvarting]

@Talv I spoke too soon, it seems. It technically "works", but for some reason, when I click on an editable element, it jumps to the top of the page, meaning I have to scroll down to get back to the editable field. I'm assuming this is an easy fix involving preventDefault(), but I haven't looked at it closely yet.

@sburkett did you solve it?
Im having the same issue.

[rvashurin]

@qvarting
Also experiencing this. Anyone figured a workaround yet?

[rvashurin]

@sburkett It does not look like preventDefault() issue since I use a simple span as editable, and still get this behavior. Might be mistaken though - I mostly do backend :)

[rvashurin]

Ok, this is probably due to fact the the input field is being focused upon before it's positioned, forcing browser to scroll as close as possible to it's position. Commenting out line 2932 in bootstrap4-editable/js/bootstrap-editable.js fixes the scrolling but, obviously, prevents field from being focused on appearing, which is less than desirable. The underlying cause for this behavior change is probably bootstrap using another positioning lib for popovers.

I'll try to come with some less invasive fixes since this PR seems to be the only way to use X-Editable with popover in Bootstrap 4 environment.

[rustemas]

I've fixed the issue by delaying focus by 100 miliseconds:

var inp = this.$input;
setTimeout(function(){
inp.focus();
},100);

[qvarting]

@rustemas cool, it works :) Thanks for sharing!

To clarify for others, replace
this.$input.focus();
to
var inp = this.$input; setTimeout(function(){ inp.focus(); },100);
on line 2932 in bootstrap4-editable/js/bootstrap-editable.js

[qvarting]

@rustemas do you have a solution for select (dropdown) as well?

[wouter41]

@rustemas do you have a solution for select (dropdown) as well?

I was testing with the same solution as for the text boxes (timeout for focus), and strange enough it seems that just adding the "activate" function (even without further actions in that function) solved the jumping for me. However to keep the focus on the element i added the same rule as for the text box.

So in line 3216 between the "renderList" and "value2htmlFinal" functions add this:

        }, //end renderList Function
        activate: function() { 
          //do nothing or if you want make sure it gets focus
         var inp = this.$input; setTimeout(function(){ inp.focus(); },100);      
        },  
        value2htmlFinal: function(value, element) {

This worked for me, no jumping to top for me anymore!

[qvarting]

@wouter41 thanks alot! seems to work.

Cheers! 🍼 🍺

[roushenas]

Hi guys,

I wanna know if you faced a similar issue I saw or not. Using Bootstrap version 4 of this library (thanks to @Talv), whenever I click on any field, it shows a popup correctly. But if I hit "Esc" key instead of clicking on X icon, X-editable will be corrupted (you will no longer be able to edit anything).

Did you see any similar issue? Any suggestion?

[snimavat]

Any time line for official release with bootstrap 4 support?

[Froskur]

Can you guys tell me where to correct the alignment of the popup container? I always have a container to the right of the value being edited, and I need to move it down.

[Bukashk0zzz]

If some body will have problems with popover positioning just add this:

$('.editableFieldClass').on('shown', function () {
    $('.popover.show.editable-container').popover('update');
});

Where .editableFieldClass is class of your editable field.

[ilramdhan]

For those of you who are struggling to implement it on Bootstrap 4, maybe this can help.

For Bootstrap 4 its work, check this #1189 (comment)