Problems with Bubble Editor

Paulus

Having a two problems with the bubble editor in Bootstrap.

1. The input and button are not lined up, the button is display a little below the line of the editor (not a different line).
2. For the readonly field, input field is inactive but the Update button is still active!

For 1, it seems the bubble editor is not using the form-inline class, which is designed for such alignments (per Firefox inspect feature).

allan

Its actually more general than just Bootstrap - but it is most obvious there. It is related to how the HTML is constructed for the bubble editing - there is way to reliably put the button at the bottom of the input field with the current structure. The attached screenshot shows the standard styling with an error message, resulting in the error you've seen in Bootstrap.

I don't have an immediate fix, but I will look into it for 1.6.2 which shouldn't be too far away.

For the readonly field, input field is inactive but the Update button is still active!

Interesting one. At the moment I would suggest using the bubble() method with a specific button option that will simply call close() rather than submit() (which is the default).

This isn't going to be an easy one to change since it is valid to submit a readonly field (imagine for example a different field's value was set via the API).

Allan

Paulus

Thanks Allan, the picture indeed provides the exact illustration of the problem. I will look into the bubble API and also for any update.

Paulus

Hello Allan,

Sorry, back to this topic. Looking at the generated codes for the Bubble editor, it seems you are creating a horizontal form class for the input but the button is outside this form. Is this intended?

allan

Sort of. The issue is that as the error message is shown the field itself expands. So the bottom of the field and the button still align, but relative to the input element it looks a bit pants.

I'm not actually sure yet how to change the mark up to allow for that. Its easy if the field could be broken up of course, but it can't since that field field node is used for both inline editing and the main form editing as well as the bubble edit.

Allan

allan

Its been a long time in coming, but v1.7 will finally address this. The button(s) will be shown below the input elements, rather than to the right of them. In addition to the alignment issue, it also allows more room for the input elements.

Allan