Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
How do I set up a link to use width and height percentages instead of the default pixel unit? I tried it with numbers followed by a percent sign but it didn't work at all. In this day and age of responsive design I find it hard to believe I haven't been able to find a solution.
<a class="colorbox-load" href="@terms?width=500&height=500&iframe=true">Terms & Conditions</a>
Comments
Comment #1
deanflory CreditAttribution: deanflory commentedNevermind, I figured out how to get pretty much what I want by setting the max width/height in the Colorbox module settings and then setting the link to a larger size to fill it minus the negative of the max width/height.
Comment #2
FreeFox CreditAttribution: FreeFox commentedThis is a nice workaround and I will use it for the time being but ... it is no final solution.
I have searched about 1 day to find the reason why this doesn't work. I expected that this would work:
Terms & Conditions
but it didn't.
At least I expected that the settings would kick in (Max width = 80%, Max height = 100%, Initial width = 80% and Initial height = 100%)
But they didn't either except when you use it as described by deanflory.
I'm willing to sponsor the correct solution.
Thanks in advance
Comment #3
tassaf CreditAttribution: tassaf commentedAny solution for that please?
Comment #4
deanflory CreditAttribution: deanflory commentedWhile what I stated previously is not a direct fix as it should accept a percentage ("40%", though that symbol may cause problems and might be the reason why it's not available, dunno), it does actually work for getting a percentage, just only for one setting across the entire site.
<a class="colorbox-load" href="@terms?width=1200&height=1200&iframe=true">Terms & Conditions</a>
Comment #5
tassaf CreditAttribution: tassaf commentedI found another solution for that
use: width=90%20&height=90%20
if you want it to be 90% X 90% (you need to add 20 after the %)
Comment #6
deanflory CreditAttribution: deanflory commentedJust off the top of my head, but isn't percentsign20 the equivalent of a space? I say this out of seeing URLs for files with spaces in the name and they're converted to the equivalent. I may be wrong. If I'm right, your solution tassaf may not be doing what you think. I haven't tested it yet, would be good if it did work.
FYI, when trying to submit this comment without the code wrapper that's on it now, I got "Validation error, please try again. If this error persists, please contact the site administrator.", so percentsign20 messes with things, that or Drupal was making some changes on the site while I was submitting.
Comment #7
tassaf CreditAttribution: tassaf commentedI am sorry.. I wrote %20 by mistake
Please use %25 which is the % but encoded
Comment #8
Razia_b CreditAttribution: Razia_b commentedis it possible to define minwidth and minheight?
Comment #9
tassaf CreditAttribution: tassaf commented@Razia_b
You can set that in the colorbox configuration /admin/config/media/colorbox
Comment #10
candelas CreditAttribution: candelas commented@tassaf in which version? I use colorbox 7.x-2.7 and that option is not in the configuration.
Comment #11
candelas CreditAttribution: candelas commented@tassaf I found it. In STYLES AND OPTIONS you need to select Custom.
Comment #12
mikebrooks CreditAttribution: mikebrooks commentedI have found that a max setting of 90% for width and height to be ideal for smartphones.
For the benefit of users, the help text below the "Mobile detection" Advanced Setting might be amended to include wording to the effect, "When using mobile detection, it is recommended to set Max width and Max height settings (in Styles and options) to a value below 100% to allow adequate spacing to access the close button."
Comment #13
deanflory CreditAttribution: deanflory commentedI guess it depends on your theme's layout as mine has a close "X" within the borders of the interface/colorbox but a good tip to keep in mind.
Comment #14
joshuautley CreditAttribution: joshuautley commented#5 + #7 was awesome.
Certainly some logic to perform a preg_match on the % symbol to encoded it from "%" to "%25" is all that really needs to be done?
Comment #15
Neslee Canil Pinto