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 should I set the width of the slideshow to fill the full width of the block? I tried using containerResize, slideResize but I failed to do so.
In the attached image you seen the problem, in red is marked the desired width.
Thank you and sorry for my english (I spanish native)
Comment | File | Size | Author |
---|---|---|---|
slideshow.JPG | 32.75 KB | cgf_ar |
Comments
Comment #1
general_ludd CreditAttribution: general_ludd commentedI am having the same problem. The width of the slideshow is arbitrarily 854px when I want it to be 890px. I can't figure out where in the code this element declaration is taking place.
style="position: relative; width: 854px; height: 320px;"
Comment #2
benjaminkyta CreditAttribution: benjaminkyta commentedGive this a try. I might fit your needs:
Go to your view with the slideshow, On slideshow settings, navigate to jQuery Cycle Custom Options. Under the Advanced Options, select width. Fill in 890 in the Advanced Option Value [Note: You dont have to put "px or %" because it will default to px. Thats how it works]
Click the link just below "Update Advanced Option"
Under APPLIED OPTIONS, your with will be there.
Apply the changes
You can do the same for Height and many more options. Hope its what you want.
@ cgf_ar You will need to first measure the width of the container and then specify it in the Advanced Option Value. FireBug or Inspector for Chrome can be of help to figure out the best width.
mountbatten.net
Comment #3
Technikal CreditAttribution: Technikal commentedHi benjaminkyta, how does one have a slideshow's image span beyond say 960px ? using an omega subtheme - thank you in advance
Comment #4
jcollins12498 CreditAttribution: jcollins12498 commentedThe width doesn't appear to work. I followed the instruction given by benjaminkyta above and found that, while the width custom option can make the width smaller, it does not make it larger. In my example, I was building an announcement view. The view only displayed the body field. The intention of the view is to take the entire width of the page an be above the main content. Everything works fine if the body text is sufficiently long to take the entire width. However, if it is shorter than the width, there appears to be no way to make it expand.
I set the value of the width to 950, and only got a width of 163 (the width necessary to fit the text). When I set the width to 100, it did adjust the width down to 100.
Comment #5
graemian CreditAttribution: graemian commentedI'm having the same problem. The advanced settings seem to cap the maximum width, but not the minimum width:
div id="views_slideshow_cycle_teaser_section_feature_slideshow-block" … width: 738px; height: 337px; "
div id="views_slideshow_cycle_div_feature_slideshow-block_0" … width: 662px; height: 337px; "
…
/div
div id="views_slideshow_cycle_div_feature_slideshow-block_1" … width: 738px; height: 280px; "
…
/div
/div
I tried to have a look at the code, but it's not easy to figure it out. Any other suggestions before I dive in for a longer look at the code?
Tx,
G
Comment #6
joelrichard CreditAttribution: joelrichard commentedI thought I'd throw this out there. It worked for me... but it's ugly. From what I can tell, we're seeing with issues with jQuery itself, or an interaction between this module and jQuery and this is just a hack.
Add this to your CSS. This is a global change and will affect all of your slideshows on your site.
This will cause each of the slides (not the parent container with the
style="width: 459px"
(which is what I had before) to be 100% wide which seems to achieve the desired effect. Your mileage may vary.Woah, Looking at this more, it actually affects how jQuery is setting that
width: 459px
. Now it'swidth: 700px
(which is the size of the space in question.) I didn't follow benjaminkyta's instructions since they did not work for me.I propose that this CSS be added to the default css for the module, but I'll let the developers think about that. :)
Comment #7
aldrichong CreditAttribution: aldrichong commentedThanks your css worked
Comment #8
chapabu CreditAttribution: chapabu commentedChanging title back so it's more useful if anyone needs this in the future.
Comment #9
jaesperanza CreditAttribution: jaesperanza commentedComment #10
NickDickinsonWildeI'm thinking this is predominantly a theme issue that depends on usage/theme/how you want it to display - I'm open to be convinced otherwise ofc but for now setting to won't fix - but thanks for the discusion/reporting.
Comment #11
veerakolagani CreditAttribution: veerakolagani commented$("aside").removeClass("container");
use this on ur custom js
Comment #12
samhaldia CreditAttribution: samhaldia as a volunteer commentedThis CSS works for me for Drupal 8:
Comment #13
benjarlett CreditAttribution: benjarlett commentedI needed to add this...
.views_slideshow_cycle_teaser_section > .views_slideshow_slide {min-width: 300px;}