Modal reveal alignment issue


Registered User
42 posts

Hi,
I have an issue trying to align a modal reveal panel to the right side of the viewport. The page in question can be found here:
http://www.artinso.com/orphelion_testing/members.html

What I try to do:
  • Each member card is in a Flexbox container and also contains a modal reveal with an ID.
  • When revealing the modal, it shall stick to the right side of the VP with different widths depending on VP size
  • To achieve this I select position:fixed, right:auto, left:variable VW values depending on breakpoint and Width: auto. That way I am in control of the portion of VW that is covered.

Unfortunately, the modal insists to move to the VP centre. What am I missing? I have been going over this for days, but don't seem to go further.

Another thing that bothers is that the sliding in works well, but it does not slide out completely.

Thanks for your help
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED


Senior Advisor
17,824 posts

The Modal has a left: px being applied inline through the scripts.
Try some css
.container.OrphelionMemberCard.full.reveal{
left: auto !important;
right: 1%;
}

You may need to adjust the right to your needs.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
42 posts

Hi Eric,
Thanks for the help!
So, that would have to be done manually after exporting, right? Or can I apply !important in RSD?
In any case, I want to have the modal sit on the right side of the viewport.
    The idea was to give for example at 640px Breakpoint the following style:
  • left:40vw right:auto

    At 1024px breakpoint:
  • left: 60vw
    etc.
I could do it also via width and maxwidth, but it seems more logical to do it via positioning and let the browser do the math.

Is there an alternative to using a modal for what I am trying to accomplish?
Thanks again
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED


Senior Advisor
11,000 posts
Online Now

It should be possible to add the styling that Eric posted in the head sction of the 'settings' tab. Make sure you put <style> </style> around it.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
42 posts

OK. Thanks!
That obliges me to assign the modal width via
[*] width and maxwidth
correct?
Whatever inline style is in the head section superseeds the cascade?
Thanks
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED


Registered User
304 posts

You might be able to use a "read more" like I did on this example for someone a while ago?
http://gordw.com/rsd/test/hover/
That's using foundation.


Registered User
42 posts

Good, thanks Erik and Inger. With the code in the head it works now and I set a global value of max-width: 35rem which is a good compromise and keeps it full-screen on smaller devices. right:0% keeps it flush to the right side.

Yes, I thought about using a read more.. like option, but the text length I need to accomodate is quite substantial and the modal is more elegant.

Thanks again! I was getting quite crazy about this
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.