The slider moves to a position outside of the bar (see attached images). This happens because it moves to 100% width instead of "100%-width - 1 element-width".

Does anyone have a solution to this?

CommentFileSizeAuthor
slider_end.png8.91 KBhannadeeds
slider_begin.png7.64 KBhannadeeds

Comments

snufkin’s picture

snufkin commented

would it be possible to share the relevant css? I am terrible with css myself, so could use a test example.

hannadeeds’s picture

hannadeeds commented

/* controll row at the bottom */

#block-views-geschichte-block .views-slideshow-controls-bottom{
z-index: 100;
position: absolute;
bottom: 0px;
width: 950px;
height: 34px;
font-size: 14px;
text-align: center;
color: #707070;
background-image: url('../images/assets/history/row_bg.png');
background-repeat: repeat-x;
}

#block-views-geschichte-block .views-slideshow-controls-bottom #widget_pager_bottom_geschichte-block{
display: inline-block;
margin-top: 3px;
}

#block-views-geschichte-block .views-slideshow-controls-bottom #widget_pager_bottom_geschichte-block .views-slideshow-pager-field-item,
#block-views-geschichte-block .views-slideshow-controls-bottom #widget_pager_bottom_geschichte-block .views-slideshow-pager-field-item div{
display: inline;
}

#block-views-geschichte-block .views-slideshow-controls-bottom #widget_pager_bottom_geschichte-block .views-slideshow-pager-field-item div div{
padding-left: 10px;
padding-right: 10px;
}

/* slider */

#block-views-geschichte-block .views-slideshow-controls-bottom #views_slideshow_slider_slider_geschichte-block{
position: relative;
top: -6px;
height: 24px;
}

#block-views-geschichte-block .views-slideshow-controls-bottom #views_slideshow_slider_slider_geschichte-block div{
display: block;
float: left;
width: 90px;
height: 24px;
}

#block-views-geschichte-block .views-slideshow-controls-bottom #views_slideshow_slider_slider_geschichte-block a{
display: block;
float: left;
width: 90px;
margin-left: -18px;
height: 24px;
background-image: url('../images/assets/history/arrow.png');
background-repeat: no-repeat;
}

snufkin’s picture

snufkin commented

could you also attache the image files too? danke!

hannadeeds’s picture

hannadeeds commented

I don't know if i can share them just like that.. but "row_bg.png" is a 1px-width background-image for the bar, and "arrow.png" is the sliding pointer (90x24 px).