Posted by nykoppa on February 7, 2012 at 12:53pm
6 followers
| Project: | Views Slideshow |
| Version: | 7.x-3.0 |
| Component: | Cycle |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Hi,
I have set up a view for using Views Slideshow's cycle functionality for articles. In case of short contents the div of the content has smaller width than the views slideshow. See the attachments from #3 showing three slides with different content length.
It is a bug rather than a feature for me as I want to have an article with short text and an image aligned to the right of the page (like sample1.png in my example). The image doesn't get aligned to the right of the main frame.
I'm using D7.12, ctools7.x-1.0-rc1, libraries API 7.x-1.0, Views 7.x-3.1 and Views Slideshow 7.x-3.0.
Thanks,
Mathe
Comments
#1
You're right, nykoppa, this appears to be a bug. I ran into this with a site I'm building. The inline styling is not being calculated correctly. I was able to override this, however, by simply using something like
width: 240px !important;for the wrapper div.#2
Good tip, works for me as well, thanks! By the way, I'm not really advanced in web programming and sometimes lose patience in trying different solutions.
#3
Update: just changed sample site to screenshot attachments
#4
Css trick worked for me, thanks.
#5
I'm still rather lost in applying CSS to views.
I see views_slideshow.css and views_slideshow_cycle.css I'm currently using the cycle theme.
You said to apply
width: 240px !important;for the wrapper div?Where would I place? Sorry I know dumb question. I've tried but am missing the correct class title. But if anyone can provide the 3 steps to make this possible I'd appreciate it.
#6
calefilm, the css you edit depends on your theme, and how you are developing your site. DO NOT edit those ones you listed. It will work, but if you ever upgrade views_slideshow, it will override your changes. If you have a theme that you are modifying, you probably have an idea of which css file you can add stuff to. It sounds like you're a little lost, so I'm assuming you have an off the shelf theme, and you haven't touched any code. You can figure out which sheet you're supposed to edit for the theme, or if you don't want to touch the files, add a block to the page, or a text header in the view and put css there. Just make sure to select the full html filter.
Anyway, to find the class for the wrapper, you'll want to use your browser's web dev tools (chrome built in, firebug, etc.) and inspect the view. If you're still following me here, you should see a div that contains div for each slide. You want to apply the css to a class that's applied to each slide. In my case, this was .views-slideshow-cycle-main-frame-row.
So my css in my theme's file is:
.views-slideshow-cycle-main-frame-row {width:100% !important;
}
and if you are putting it in a block, make sure to include to include the style tags:
<style type="text/css">.views-slideshow-cycle-main-frame-row {
width:100% !important;
}
<style>
Hope this helps, feel free to ask for clarification.
#7
You're a godsend mortona2k!! Appreciate the straightforward explanation. Very helpful and I'll pass this along to others who are having trouble applying CSS to views in general. Thank you. It worked great.
#8
#9
Automatically closed -- issue fixed for 2 weeks with no activity.