Content overflow #468

Open
dnano91 opened this Issue Dec 12, 2016 · 0 comments

Projects

None yet

1 participant

@dnano91
dnano91 commented Dec 12, 2016 edited

Hello,

I've used unslider and it's ease-of-use is awesome. Works very well in most cases, however I have come across an issue that I haven't been able to resolve: Without creating unslider, the list is fine and nothing is overflowing, but after creating the unslider object the text of some slides is overflowing and visible (not selectable) on the next slide.

<div class="news">
	<li class="newsItem">
		<img class="newsIcon" src="#" />
		<div class="title"><a href="#">Title</a></div>
		<div class="body">Lots of text</div>
	</li>
</div>
var slider = $('.news').unslider({
		autoplay: true,
		infinite: true,
		animation: 'vertical',
		delay: 7000
	});

And this is the css that I applied:

div.news {
	height: 180px;
}

.newsItem .newsIcon {
	max-width: 200px;
	max-height: 200px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

	.newsItem .newsIcon::after {
		content: '';
		clear: both;
	}

.newsItem .title {
	color: #ff5800;
	font-size: 1.2em;
}

.newsItem .body {
	color: #555;
}

.unslider-nav li {
	border-color: gray !important;
}

.unslider-nav .unslider-active {
	background-color: gray !important;
}

capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment