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

deanflory’s picture

deanflory CreditAttribution: deanflory commented
Status: Active » Closed (fixed)

Nevermind, 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.

FreeFox’s picture

FreeFox CreditAttribution: FreeFox commented
Status: Closed (fixed) » Active

This 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

tassaf’s picture

tassaf CreditAttribution: tassaf commented

Any solution for that please?

deanflory’s picture

deanflory CreditAttribution: deanflory commented

While 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.

  1. Go to: /admin/config/media/colorbox
  2. Scroll down to "Max width" and "Max height".
  3. Set those as you wish for your percentage: example: "92%"
  4. Then on your link set it to something high that will more than fill the size of most browser window sizes, which will be automatically adjusted by the "Max width/height" setting, making it the percentage width you wanted.
    <a class="colorbox-load" href="@terms?width=1200&height=1200&iframe=true">Terms & Conditions</a>
tassaf’s picture

tassaf CreditAttribution: tassaf commented

I 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 %)

deanflory’s picture

deanflory CreditAttribution: deanflory commented

Just 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.

tassaf’s picture

tassaf CreditAttribution: tassaf commented

I am sorry.. I wrote %20 by mistake

Please use %25 which is the % but encoded

Razia_b’s picture

Razia_b CreditAttribution: Razia_b commented

is it possible to define minwidth and minheight?

tassaf’s picture

tassaf CreditAttribution: tassaf commented

@Razia_b

You can set that in the colorbox configuration /admin/config/media/colorbox

candelas’s picture

candelas CreditAttribution: candelas commented
Issue summary: View changes

@tassaf in which version? I use colorbox 7.x-2.7 and that option is not in the configuration.

candelas’s picture

candelas CreditAttribution: candelas commented

@tassaf I found it. In STYLES AND OPTIONS you need to select Custom.

mikebrooks’s picture

mikebrooks CreditAttribution: mikebrooks commented

I 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."

deanflory’s picture

deanflory CreditAttribution: deanflory commented

I 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.

joshuautley’s picture

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?

Neslee Canil Pinto’s picture

Neslee Canil Pinto
he/him
Primary language English
CreditAttribution: Neslee Canil Pinto at Specbee commented
Status: Active » Closed (works as designed)