degarrin VIP
Total posts: 33
18 Jul 2015 17:52

Is there anyway to make the Edit Comment feature display as part of the page instead of as a Modal popup? The modal popup does not work very well with my theme, even after several adjustments, and does not display in a usable way at all on certain phones. It is too large and is not movable on touchscreen devices. So even if the sizing was alright, but the location was off, I cannot move the modal window so that it can be used. I need people to be able to edit, but it does not need to be as a popup if there is another way.

I do use RocketTheme/Gantry 5 and I am aware that other RockethTheme users have had issues as well. I have the template compatibility turned on, and I have tried to make some adjustments in my template's custom .scss file for the comment frame which helped some for the size on larger devices but not on phones. I do not know how to make it move on touchscreens.

I added this to my .scss file:

#commentmodal {
max-width: 100%;
}

#commentframe {
max-height: 50%;
}

That code is just my attempt at fixing it; I am not a programmer. If someone has a better suggestion, I would gladly welcome input :) If access to my site is needed, I can provide that too.

Thank You Angela

Last Modified: 29 Oct 2019


pepperstreet VIP
Total posts: 3,837
18 Jul 2015 21:34

Hello Angela, good points! In general Bootstrap v2 modals have some shortcomings and do not supply a real responsive behavior. AFAIK, the defaults are fixed pixel widths and you have that annoying negative margin on the left side... just to re-position the modal in the center... so, you always have to adjust this behavior, especially for mobile devices and smaller screen-width.

Your approach is heading in the right direction!

Use % as much as possible. Don't forget about the "negative margin"... if your modal window has an off-set. You might use a -50% on the respective selector. Also reset any unecessary margins and paddings around the dialog and form. So, you will get the most out of the available screen-estate.

PS: All those modifications should happen in the respective @media query for your devices.
Some people suggest to add the body class to all your selectors, so that it takes a higher priority.
Headsup: This might have an effect on other modals on your site... so look at the surrounding elements, using distinct Cobalt classnames should be the better practice.


Related links:

Modal windows for small screens using Bootstrap 2 and vertical media queries (incl. demos)

Bootstrap Modal extended by jschr (incl. responsive and fullwidth demos)

How can I change the default width of a Twitter Bootstrap modal box?

iFrame inside Bootstrap modal (Dynamically change the src of an iframe inside a modal)


degarrin VIP
Total posts: 33
20 Jul 2015 00:21

Thanks pepperstreet for all the advice and links, I appreciate it! I will see what kind of trouble I can get myself into :D

Angela


pepperstreet VIP
Total posts: 3,837
20 Jul 2015 01:15

degarrin Thanks pepperstreet for all the advice and links, I appreciate it!

You are welcome!

I will see what kind of trouble I can get myself into :D

Looking forward to your results and some feedback. Good luck!


pepperstreet VIP
Total posts: 3,837
20 Aug 2015 00:53

@Sergey
Just noticed that J! backend has some nice CSS properties for the modal dialogs. For instance, hence some links inside the menu manager. They use % based values for width and position. IMHO, this should be the default for Cobalt bootstrap modals as well ;) Way better than bootstrap px defaults.


Sergey
Total posts: 13,748
20 Aug 2015 06:52

гыгфдн I know what I show in the modal window, so when I set fixed width it will always fit what I need. Although I can use % but now sure how nice it wil look on different monitors.


pepperstreet VIP
Total posts: 3,837
20 Aug 2015 20:40

Sergey гыгфдн I know what I show in the modal window, so when I set fixed width it will always fit what I need.

Sure, but the main goal today is "mobile first". (unfortunately ;) )

Although I can use % but now sure how nice it wil look on different monitors.

Since J! uses something like 80%, I would recommend something near this value.
Maybe you can even combine a PX width with a % position?
IMHO, the major drawback is the negative margin in PX. Smaller screens definitely need a 95-100 % screen coverage. No extra margins/paddings.
In general, % as a default seems to be more compatible with different screens and devices, then PX.


If a default is not acceptable (for you), you should think about to include a minimal media-query and % overrides for small/medium screens. So, people can use Cobalt out-of-the-box more easily.


Sergey
Total posts: 13,748
24 Aug 2015 13:07

I tottaly missed mobile. You are right.

Powered by Cobalt