Modal HTML structure makes it kind of hard to use

[h0lg]

Hey there,

I've been working with Fomantic UI for a little bit now, have talked to a colleague of mine and we were both kind of puzzled by the HTML structure of the Modal. It is entirely possible that coming from other UI frameworks we're trying to make it do something it's not meant for. This is why I'm submitting this as a discussion.

Our environment is a hybrid one with pages using Fomantic UI and others that don't. Combining these UIs requires using iframes while we migrate the remaining UIs to Fomantic. Additionally, we load editors (i.e. HTML forms) rendered on the server when they are required via AJAX to display them in Modals.

In both use-cases, we run into the issue that the Modal likes to have its buttons in an actions element separated from the content, where we would like to render the iframe or form. The HTML standard however likes the submit and reset buttons of a from to be inside that form, the controls of an iframe inside the iframe.

This makes the Modal pretty hard to layout for.

For the forms we have used the work-around to join the Modal with the form into a ui modal form and render the Modal HTML inside the form - but that breaks down e.g. when you want to have a ui form with regular sized inputs and labels inside a tiny ui modal, because after merging them into one element you can't distinguish which of them you want to be tiny any more and you get a tiny modal with tiny labels.

Just as a thought - it would be easier if the styles for the bottom actions bar were written in a way to enable rendering them in the current visual style even though they are form contents or rendered inside an iframe (which would obviously not support any fancy rounded corners or shadows).

Any suggestions or thoughts?
Cheers!

[lubber-de]

Some (untested) ideas

Tell the action buttons to submit an independent form

While the action buttons do not belong to a form inside the content node, you can of course tell them to submit the independent form when you click on them prior to close the modal

$('body').modal({
	actions: [{
		text: 'Submit',
		class: 'ok',
		click: function(){
			$('#myform').form('submit'); // FUI Form behavior OR
			$('#myform').submit(); // native form submit OR
			// submit the form inside the iframe
			var myIframeDoc = document.getElementById('myiframe').contentWindow.document;
			myIframeDoc.getElementsByTagName('form')[0].submit();
		}
	}]
});

Wrap the modals children into a form

This will make the modals sizing independent of the forms sizing
I am unsure if this is what you already did...

<div class="ui tiny modal">
	<form class="ui form">
	    <i class="close icon"></i>
	    <div class="header">
	      Modal Title
	    </div>
	    <div class="content">
		    <div class="ui input">
		      <input type="text" name="myname">
		    </div>
	    </div>
	    <div class="actions">
	      <button class="ui submit button">Submit</button>
	    </div>
	</form>
</div>

Style the form inside your iframe and call a JS function from the main window

In your html which is loaded in the iframe, also style include fui css to style the form and ALSO add submit buttons, but DONT apply any action buttons to the form from the main html file.
Then, add a "onSubmit" event to your form and call a globally reachable function inside the main html file from the file running in the iframe by

parent.myFunction(); // myFuntion will close the modal then

[h0lg]

Thank you for your thoughts!

Tell the action buttons to submit an independent form

That is of course a work-around. Even finding the original buttons inside the form, hiding them and creating clones for them in the actions of the Modal is possible. That just feels like a bit of a hack.
I guess I don't like it if my UI framework is that opinionated about the structure of my HTML - especially if it requires something different from the HTML standard. I don't want to decide between rendering valid HTML and rendering pretty HTML.

Wrap the modals children into a form

The current style rules for the Modal don't support that: https://jsfiddle.net/wy2grxz4/

Style the form inside your iframe and call a JS function from the main window

I agree, that would be the way to go. But without being inside a modal, any actions will just not be rendered like the bottom bar of a Modal. How do I work around that? Do I have to write custom styles duplicating those of the modal actions bottom bar? https://jsfiddle.net/wy2grxz4/1/

[lubber-de]

Wrap the modals children into a form

The current style rules for the Modal don't support that: jsfiddle.net/wy2grxz4

It is, if you don't use content... However, you have a different styling /positioning for the action buttons,
https://jsfiddle.net/lubber/hfacqv9z/6/

[h0lg]

It is, if you don't use content... However, you have a different styling /positioning for the action buttons,
https://jsfiddle.net/lubber/hfacqv9z/6/

Thank you, using a segment instead of a content to render the form seems an acceptable work-around - provided there aren't many more things that are rendered incorrectly like the actions.

Would it make sense to support a form inside a Modal's content natively though?

I think rendering a form in a Modal is not an uncommon use case and communicating this work-around in the documentation or via an example I imagine would feel a little awkward.

[lubber-de]

You can already place submit buttons inside a form which itself is inside the content node. Of course you dont specify usual action buttons then. (or , my first suggestion, use action buttons and make them submit the form)

If you mean to style the form submit buttons inside content the same as for common actions might be difficult, because of the given padding of the content.