Fit Slides to Container Issue

Dec 19, 2011 at 8:00 PM

I am having issues saving the settings to force the slides to fit the container instead of resizing the container to fit the slides.  I unclick "Resize Container to Fit Slides" and check "Fit Slides to Container," but after saving, the slider on my page is still larger than the container.  Also, after returning to edit the Slider Options, both "Resize Container to Fit Slides" and "Fit Slides to Container" are checked.  How do I successfully uncheck "Resize Container to Fit Slides?"

 

Adele

Coordinator
Dec 28, 2011 at 1:41 AM

It sounds like your images are too big for the area that you want them in.  This module will not resize your images for you.  Is this the case?

Dec 28, 2011 at 4:53 PM

There is a "Fit Slides to Container" option in Slider Options.  I believe that the issue was the DarkKnight skin, not the module.  I changed to a different skin and am no longer having this issue.

Coordinator
Dec 29, 2011 at 5:38 PM

Then it was likely a CSS issue.  If you run into this again with any element on any site, try identifying the CSS in the wrapping HTML container and then apply a CSS fix there.  In some instances you may need to force it.

For example:

.Selector { width:auto; }

Versus:

.Selector { width:auto !important; }

Jan 4, 2012 at 9:01 PM

I'm having the same issue to and cannot fix it. What is the wrapping container? I tried several div tags above, but no one with succes


<div class="DnnModule DnnModule-WillStrohlContentSlider DnnModule-422"><a name="422"></a>
<div class="c_DNN6_SubTitle c_DNN6">
    <h2 class="Title Grey"><span class="Head" id="dnn_ctr422_dnnTITLE_titleLabel">Content Slider</span>


<img alt="" class="TitleBar" src="/Portals/_default/Containers/DarkKnight//Images/Title-BG-Grey2.png"></h2>
    <div id="dnn_ctr422_ContentPane"><!-- Start_Module_422 --><div class="DNNModuleContent ModWillStrohlContentSliderC" id="dnn_ctr422_ModuleContent">
	<div class="wns-slideshow-wrapper wns-slideshow-422 dnnClear" id="divWnsSlideShow_422" style="width: 800px; height: 300px;"><a class="wns-slider-item-422 wns-slider-item-link-1" href="http://localhost/DeGallerij.aspx" title="Hoe mooi" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 800px;"><img class="wns-slideshow-image wns-slider-item-422 wns-slideshow-image-1" title="Hoe mooi" alt="Hoe mooi" src="/Portals/0/dtvimages/images00.jpg"></a><a class="wns-slider-item-422 wns-slider-item-link-2" href="http://localhost/DeGallerij.aspx" title="Deze is ook mooi" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 800px;"><img class="wns-slideshow-image wns-slider-item-422 wns-slideshow-image-2" title="Deze is ook mooi" alt="Deze is ook mooi" src="/Portals/0/dtvimages/images001.jpg"></a><a class="wns-slider-item-422 wns-slider-item-link-3" href="http://localhost/DeGallerij.aspx" title="003wat te denken van deze" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 800px;"><img class="wns-slideshow-image wns-slider-item-422 wns-slideshow-image-3" title="003wat te denken van deze" alt="003wat te denken van deze" src="/Portals/0/dtvimages/images003.jpg"></a></div>
<script type="text/javascript" language="javascript">/*&lt;![CDATA[*/(function ($, Sys) {function setupDnnSiteSettings() {$('#divWnsSlideShow_422').cycle({fit: 1});}$(document).ready(function () {setupDnnSiteSettings();Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {setupDnnSiteSettings();});});} (jQuery, window.Sys));/*]]&gt;*/</script>
</div><!-- End_Module_422 --></div>
</div></div>


Some help would be nice.
Thanks in advance

Coordinator
Feb 3, 2012 at 4:52 AM

The selectors would be:

div.wns-slideshow-wrapper {  }
div.wns-slideshow-wrapper img {  }