calc function for width or height
11 years 6 months ago #14601
by tsmithf
calc function for width or height was created by tsmithf
Hi,
Thanks for the great modules, we're using it great effect and clients like it as it's easy to use.
However trying to setup sizing is it possible to use the CSS calc function for the width or height of the module...
calc(100% - 130px)
Ideally taking into account browsers...
height: -moz-calc(100% - 130px) !important;
height: -webkit-calc(100% - 130px) !important;
height: -o-calc(100% - 130px) !important;
height: calc(100% - 130px) !important;
Thanks
Thanks for the great modules, we're using it great effect and clients like it as it's easy to use.
However trying to setup sizing is it possible to use the CSS calc function for the width or height of the module...
calc(100% - 130px)
Ideally taking into account browsers...
height: -moz-calc(100% - 130px) !important;
height: -webkit-calc(100% - 130px) !important;
height: -o-calc(100% - 130px) !important;
height: calc(100% - 130px) !important;
Thanks
Please Log in or Create an account to join the conversation.
11 years 6 months ago #14604
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic calc function for width or height
Hi
Why do you want to do this ?
CEd
Why do you want to do this ?
CEd
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
11 years 6 months ago #14606
by tsmithf
Replied by tsmithf on topic calc function for width or height
Thanks for the quick response.
We want to have page which has top menu, fixed to bottom footer and slideshowCK between, set at 100% width.
We can set the 100% width no problem and set the image height, currently 56.25% in line with the image aspect ratio.
However if the browser is reduced vertically the image will overflow off the bottom of the browser and the scrollbar appear, which if scrolled moves the footer.
I have tried using the calc sizing in the CSS...
.camera_fakehover, camera_wrap_106, .slideshowck.camera_wrap.camera_black_skin {
max-height: -moz-calc(100% - 30px) !important;
max-height: -webkit-calc(100% - 30px) !important;
max-height: -o-calc(100% - 30px) !important;
max-height: calc(100% - 30px) !important;
}
and this does limit the image height, efectively masking it to a fixed window in the browser, but because the height of module is being supplied by the Javascript code the overall module height is still being set after the css is applied and the scrollbar appears.
I hope that makes sense.
Thanks
We want to have page which has top menu, fixed to bottom footer and slideshowCK between, set at 100% width.
We can set the 100% width no problem and set the image height, currently 56.25% in line with the image aspect ratio.
However if the browser is reduced vertically the image will overflow off the bottom of the browser and the scrollbar appear, which if scrolled moves the footer.
I have tried using the calc sizing in the CSS...
.camera_fakehover, camera_wrap_106, .slideshowck.camera_wrap.camera_black_skin {
max-height: -moz-calc(100% - 30px) !important;
max-height: -webkit-calc(100% - 30px) !important;
max-height: -o-calc(100% - 30px) !important;
max-height: calc(100% - 30px) !important;
}
and this does limit the image height, efectively masking it to a fixed window in the browser, but because the height of module is being supplied by the Javascript code the overall module height is still being set after the css is applied and the scrollbar appears.
I hope that makes sense.
Thanks
Please Log in or Create an account to join the conversation.
Time to create page: 0.205 seconds