Topic Closed
fly06
263 Posts
19K Downloads
1 Themes
8 Plugins

Hello,

How can I make the admin modal box (gp_admin_box) responsive?

Thanks in advance for your help.

 

4 years ago#9360

juergen
1.5K Posts
55.4K Downloads
16 Plugins
design, web development & visual effects

Hi Frederic,

try

#gp_admin_box {
  left: 50vw !important;
  max-width: calc(100vw - 30px);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

but it also depends on the content.
Some wider tables will not play along without additional formatting.

 

4 years ago#9367

fly06
263 Posts
19K Downloads
1 Themes
8 Plugins

Hi Juergen,

Thanks a lot for your input but the move was a bit trickier since the modal css was partly set in a css file and partly in a js file.

To summarize the changes:

Css:

#gp_admin_box position property set to relative instead of absolute
#gp_admin_box top property removed
#gp_admin_box margin property set to 40px auto 0
#gp_admin_box max-width property set to 640px;

Js:

#gp_admin_box left and top properties removed
#gp_admin_boxc width property set to auto instead of 640px

This makes the box responsive.

I also add this from your post :

#gp_admin_box { max-width: calc(100vw - 30px); }

in my responsive.css stylesheet to get some left/right margins when the screen width is below 640px. 

F.

 

 

 

4 years ago#9379

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register