RokBox not resizing in Chrome/Safari
-
-
- Edward Benn
- Newbie
- Posts: 7
- Thanks: 0
-
Hi,
Two RokBox issues:
1. RokBox is resizing nicely for me in Firefox but is staying static for me in Chrome and Safari.
2. I would like to set the height of RokBox to 90% of the available height... or at least something more than is currently being calculated as the thumbnails in my slider are getting chopped off and it doesn't look too clean, is this achieveable?
Cheers,
Ed - Last Edit: 10 years 1 month ago by Edward Benn.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22104
- Thanks: 3200
- messin' with stuff
-
Looks fine to me in Chrome...
Your slider calculates and sets a static width... therefore it's not going to dynamically resize but it should work fine on page load... or at least it seems to be working fine for me when I resize my browser, refresh the page, and click on a rokbox link...
describe how you're producing the issue, take a screen shot, and detail what version of Chrome on what OS you're using... - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Edward Benn
- Newbie
- Posts: 7
- Thanks: 0
-
Hi, the slider width is recalculated dynamically in the same manner as RokBox.
Here you can see the different effect of starting with a full width window and resizing dynamically:
www.dropbox.com/s/mlo2fvgi3mt33yq/Screen...%2023.26.38.png?dl=0
Left: Chrome 39.0.2171.71
Middle: Firefox 33.1.1
Right: Safari 7.1
OSX Mavericks 10.9.5
When I check the element widths:
www.dropbox.com/s/hxrn15kq4y7jppp/Screen...%2023.29.53.png?dl=0
You can see in Firefox the rokbox-content max-width is being recalculated whereas in Chrome (and Safari) it is staying at the original width.
Using the example of "News->Lufthansa A340-600" you can see the same thing is happening to plain content with nothing more than an image and text. So it can't be the slider causing the issue:
www.dropbox.com/s/ud1i0xe359e8lir/Screen...%2023.40.00.png?dl=0
Again, this scales perfectly fine in Firefox:
www.dropbox.com/s/5w8uedfc9llbn17/Screen...%2023.42.34.png?dl=0
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22104
- Thanks: 3200
- messin' with stuff
-
Edward Benn wrote:
Here you can see the different effect of starting with a full width window and resizing dynamically
99.9% of users aren't going to be resizing their screen/window... particularly after loading a pop-up... and those that do (really desktop users only) tend to make small adjustments at the most... as web designers, sure, we do it all the time in testing, but to be accurate you should always refresh the page (and change the user agent when testing for phones) at each width you want to test.
I don't see anywhere in the R.B. documentation that refers to dynamic resizing, and I see that it's a nice feature in Mozilla, etc. but it's hard for me to see this as a bug/issue if I'm being honest. - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Edward Benn
- Newbie
- Posts: 7
- Thanks: 0
-
I'm sorry, but that's just semantics. We're talking about standard responsive behaviour here. Resizing the viewport is how a RESPONSIVE Lightbox should work. That is not happening for me in the situations described above. Of course the examples I provided are extreme, but that was just to highlight the problem. If the max-width is being rewritten by your script in Firefox then that is obviously how it is supposed to function, but for some reason that is not happening with the WebKit engine.
So here's a more specific "Real World" example of the problem.
iOS 8 on an iPhone 6:
www.dropbox.com/s/ayhi0wssyjrylt5/IMG_2788.PNG?dl=0
www.dropbox.com/s/9ywpicz56h6qvnb/IMG_2787.PNG?dl=0
When changing perspective from portrait to landscape the viewport is not being "dynamically resized" or is not acting "responsively" and is holding the width from the initial load in portrait view.
Also, why is there so much dead space on the side of the viewport on smaller devices? They should surely be using 100% width on a phone.
Again, the max-width is constraining proportions and not acting responsively, staying at a max-width of 275px in both portrait and landscape:
www.dropbox.com/s/ek836f7p3fvppl6/Screen...%2009.40.56.png?dl=0
www.dropbox.com/s/knvv98x6f3ldq3y/Screen...%2009.41.09.png?dl=0
In fact.. if I use your own Demo page it works in Chrome and Safari as required:
demo.rockettheme.com/live/joomla-extensions/rokbox/ - Last Edit: 10 years 1 month ago by Edward Benn.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
A little test to see where the issue lies. This is our
RokBox demo page - Image - Manual Thumbnail
with no iFrames involved.
With Chrome->latest, sized for a apple Iphone6:
This image is hidden for guests.
Please log in or register to see it.
Then with Firefox->34, sized for a apple Iphone6:
This image is hidden for guests.
Please log in or register to see it.
As you can see items #1-3 are identical as the image size is the same on both platforms.
This would lead me to believe, as Matt as alluded to, that this is an iFrame issue with your slider and not RokBox itself.
-
-
-
- Edward Benn
- Newbie
- Posts: 7
- Thanks: 0
-
Hi Dan, thanks for your reply. Yes, this is the behaviour I am expecting which isn't happening with my installed instance of RokBox. There must be some kind of conflict somewhere.
I don't think it can be blamed on the Slider though, for the simple reason that it is happening on normal content also, there is no Slider in this piece of content:
Using the example of "News->Lufthansa A340-600" you can see the same thing is happening to plain content with nothing more than an image and text. So it can't be the slider causing the issue:
www.dropbox.com/s/ud1i0xe359e8lir/Screen...%2023.40.00.png?dl=0
(just a quick note, to expand the content with RokBox click the image not the "+", I'm testing with JCE Mediabox too so the "+" link will acticate that) - Last Edit: 10 years 1 month ago by Edward Benn.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22104
- Thanks: 3200
- messin' with stuff
-
I couldn't get it to work in testing... but I still think this might fix it...
try adding this custom css:
iframe { max-width: 100% !important; } -
The following users have thanked you: Edward Benn
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22104
- Thanks: 3200
- messin' with stuff
-
This message contains only secure information that is visible to Matt, moderators and administrators
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Edward Benn wrote:
Hi Dan, thanks for your reply. Yes, this is the behaviour I am expecting which isn't happening with my installed instance of RokBox. There must be some kind of conflict somewhere.
I don't think it can be blamed on the Slider though, for the simple reason that it is happening on normal content also, there is no Slider in this piece of content:
Using the example of "News->Lufthansa A340-600" you can see the same thing is happening to plain content with nothing more than an image and text. So it can't be the slider causing the issue:
www.dropbox.com/s/ud1i0xe359e8lir/Screen...%2023.40.00.png?dl=0
(just a quick note, to expand the content with RokBox click the image not the "+", I'm testing with JCE Mediabox too so the "+" link will acticate that)
Can you try disabling JCE Mediabox to make sure there are no conflicts with RokBox. Also take a look here -> http://www.rockettheme.com/docs/joomla/extensions/rokbox/how_to_use.md#data-rokbox-size don't know if would help but worth a shot.
-
Time to create page: 0.056 seconds