Map in a form submits when zooming - mapbox-gl-js

I have a map as part of a form (users move the map to submit a location).
When you build a form in our CMS, it wraps everything in the form tag, including the map - pretty common, really.
When a user clicks one of the map controls to zoom in or out, it submits the form. Not optimal!
Example here: https://output.jsbin.com/mejidew/
Yes, I probably can work out a way of getting the map div outside the form tag, but it means refactoring my form quite significantly. I'd like to avoid this if possible - after all, it seems like a bug to me that the zoom function allows the click action to pass through to the form.

Thanks for the bug report! Fix coming in https://github.com/mapbox/mapbox-gl-js/pull/2935!

Related

How many button shapes can Access conceivably draw? (button next to each record on a continuous form)

I have a continuous forms in Microsoft Access 2013 with button next to each record that will allow the user to open a link to the document.
It looks like this:
http://i.imgur.com/4CrU0i1.png
Design view looks like this:
http://i.imgur.com/sjgwZ9s.png
It works great exactly as I want. My question is "Is this bad practice?"
This form could possibly have thousands of records. Is drawing that many buttons potentially a problem?
I don't think there is any issue with adding that number of controls. But that is a lot to show the user. At some point looking though all those would be inconvenient. Maybe you can give them some sort of filter that would narrow down what is presented to them.

How to completely change the css position of an element on the page to appear in another part of the document flow?

I have a long form with text inputs, and in the middle of it, I'd like to insert a jquery upload (blueimp) file plugin which uses a form element. I know that nested forms are not valid markup. How can I use CSS to visually position a form element inside another form element without doing some messy absolute positioning?
It seems like using an iframe to generate the content, and then inserting the iframe into the middle of the original form works quite well. I'm unfamiliar with the caveats of iframes but everything seems to work fine.

need to style input from a form with css in real time

Ok im struggling to find anything on this as im probably searching the wrong keywords.
I have a backed form thats use to display content on a page. When entering the details i want to be able to use a basic text editor to style the text, like bold, bullets, underline.
On top of that i would also like to allow them to wrap section in paragraph tabs, apply a certain style i.e style id="x".
Its more for backend so it doesnt have to be really user friendly but if there was an uncomplicated way of showing the styles in the form as i apply them, basically a WYSIWYG view. If not i will settle for applying the styles without having to see all the hmtl and css tags in the editor but when the information is passed via the INSERT query it will show pass all the relevant code like My Style and so on.
Now im quite happy to spend the time learning how to do this if you point me in the right direction but i have no idea what keywords to search. Ideally if there is a script out there i can just edit to my needs would be great too rather than starting from scratch.
Finally since im learning php and mysql still keeping it dumbed down will help and also since my values im passing is going to be full of characters the code wont like what functions should i look up to pass the code and content into the database to avoid breaking the code
I'm not entirely sure what you mean, but it seems you can achieve what you want using an editor like for example TinyMCE in combination with JQuery?
With JQuery you can show/hide items and ander your css like
$("p").mouseover(function () {
$(this).css("color","red");
});

UX for letting user drag a Google map marker and enter form fields

I want to allow the user to specify the location of something by dragging a marker onto the map. And I also want to let them enter some information about that spot.
The problem is that this makes a very complex form. Can this be done in one step? Or do I have to make them choose location first, and then in a second form take the form-field input?
How would you guys go about doing this? Are there any good tutorials for this sort of thing out there?
Thanks,
Alex
What do you mean in one step?I implemented this by adding a floating form in the side of a map and adding two hidden(or not?) fields that populated with the coords of the draggable marker.I really don't see any other way except maybe if you embed the form in the info window of the draggable marker
Cheers

GWT text inputs with spell-check like behavior?

Does anyone know of a GWT widget that works like a spelling suggestor?
Ideally it would be similar to this: http://www.polishmywriting.com/
I need a click-triggered popup on user generated text so that I can suggest replacements (I am not building a spell-checker, but something similar). I also really like the way the polishmywriting menu is set up (when you click on an underlined word).
Is there a widget that would allow me to make something similar?
Basically I'm trying to clone the little popups used by spellchecking in Gmail and polishmywriting.
If not, what would be my first step to make it?
Thanks for your time and answers,
DTrejo
Have you had any luck yet? I know it's been quite a lot of time, but found this just now.
It is a very specific widget, so maybe you won't be able to find exactly what you are looking for. In that case, making one from scratch might prove as a challenge.
The first thing you will notice is that a regular gwt TextArea won't do the job of holding the text. You will need something more flexible to dynamically put clickable labels in the text itself.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control, released as Open Source.
http://en.wikipedia.org/wiki/TinyMCE
There is also a gwt wrapper available, so you might find that useful:
http://code.google.com/p/tinymce-gwt/
If you check the polishmywriting editor after the spell checking markup is displayed, you will notice it is not a TextArea. The text is a series of paragraphs and the labeled parts are span elements. This are the elements you can easily access with gwt and put some click handlers there to open the popup.
And for the popups, it shouldn't be difficult. Use a standard gwt PopupPanel. The popup panel can be displayed in a relative position to other elements displayed on the page:
popup.showRelativeTo(otherElement);
If you did find something useful in the mean time, feel free to share.