MintJoomlaMintJoomla

Bootstrap modal and buttons - unified layout and position

Idea Idea | Reviewed Reviewed | Cobalt 8 | Hits: 2679 | Comments: 11 | Bookmarked: 0 | Followers: 4

pepperstreet VIP
Total posts: 3,837
01 Apr 2014 17:15

Hello, i think there is a UX/UI issue with bootstrap modals and Cobalt i.e. Comments, Send Mail, Edit forum reply.

  • There is no default/standard button location. i.e. sometimes close(x) in top-right corner, sometimes button in footer.
  • Cobalt action/button is inside the modal content, thus out-of-sight.

Current examples (mixed appearance):

mj_forum_comment_edit_reply_button_inside_left-close_top_right

mj_mail_field_send_button_inside-close_at_bottom

mj_mail_field_send_button_inside-close_at_bottom2

Question / Suggestion:

Is it possible to have a standard appearance/pattern for Cobalt? And place buttons/actions in modal footer? Maybe always right side with respective color. I am aware of the problem with longer content: It might be an alternative to position the action at the end... and force the user to scroll to the end. But it feels and looks strange to me. Not to metion the average enduser.

Examples of defaults - buttons always in footer area:

BS2 defaults
example_bootstrap2_defaults

Misc example
example_3rdparty

Maybe it is necessary to show both options for close/cancel. I mean (x) and the extra red button in footer. The advantage of the button is a customizable text. On the other hand, it is also intuitive to offer the (x) only. Users understand it is a sort of a "window" with close icon.

Last Modified: 08 Apr 2014

Quote

Sergey
Total posts: 13,748
02 Apr 2014 06:39

Agree and I would do that. But Close button is part of the modal footer and modal body is an iframe. It is completely different URL and it is impossible to controll form submission through modal footer only close.

Quote

pepperstreet VIP
Total posts: 3,837
02 Apr 2014 16:53

iFrame? I thought content is usual URL but displayed with J! tmpl component view.

Quote

Sergey
Total posts: 13,748
03 Apr 2014 06:38

Yes you are right. Content is an URL but how do you display that in modal window if not through iframe?

Quote

pepperstreet VIP
Total posts: 3,837
03 Apr 2014 16:52

Sergey Yes you are right. Content is an URL but how do you display that in modal window if not through iframe?

Not 100% sure, but i think an iFrame is not required to work with bootstrap modals. I remember, i had to theme an mediastore/cms script... and it had different info parts on detail pages. Some were on-page, some were called by "JsHttpRequest".

BS v2 modals support "remote URLs" in options. Isn't that of any help? At least for the content. Not sure about button actions and their URLs.

Quote

Sergey
Total posts: 13,748
04 Apr 2014 06:04

Of course I can place some content from other URL to modal through HTTP request. But problem is that if content is active then it will not work. For example it is a list of users with search input. It should reload the same page so it should be in iframe.

Quote

pepperstreet VIP
Total posts: 3,837
04 Apr 2014 12:41

Sergey if content is active then it will not work

Sorry, did not get the "problem"?

Quote

Sergey
Total posts: 13,748
04 Apr 2014 15:18

That is not important. The main thought is that there is no way to avoid iframe.

Quote

pepperstreet VIP
Total posts: 3,837
04 Apr 2014 21:43

Sergey there is no way to avoid iframe.

I see. (or maybe not ;) )

Nonetheless it is a strange and to complicated look and feel. Compared to the usual Joomla modal SqueezeBox look with simple close (x).

Maybe it is better and easier for the average user to get used to this simple window close option. (x) in upper right corner. And get rid of any distracting red button.

The content page and its buttons/actions should standout from the rest. If not visible because of the long content, it should have a real big button (100% block and icon).

Maybe a "cancel" button inside the modal, if it is necessary... and if it is able to trigger the window closing.

Quote

Sergey
Total posts: 13,748
07 Apr 2014 08:42

I deleted close button on email field popup.

Quote

pepperstreet VIP
Total posts: 3,837
07 Apr 2014 16:16

Sergey deleted close button on email field popup.

Thanks! Although the (x) is small and light, it should serve the purpose. Without that big button the user can focus on the content... and the possible need to scroll to the actual button.

BTW, the boostrap modal is fixed by default and has a certain height in pixels. Maybe a nice option to have a height in % ? Maybe even 100% ? I have seen some solutions on StackOverFlow.com

FYI - Bootstrap-Modal - Extends the default Bootstrap Modal class. Responsive, Stackable, AJAX and more.

Quote

Sergey
Total posts: 13,748
08 Apr 2014 07:46

pepperstreet Maybe even 100% ?

We create usualy size that fits what we need.

Powered by Cobalt

Login (copy)