I have problem with content under text carousel because, all content under carousel moving up and down when slidiging carousel, I position indicators to be under text, what is best solution in this case?
http://codepen.io/anon/pen/MwGLJd
HTML
<div class="about mainContainer">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<h2 class="fontraleway">WHO WE ARE?</h2>
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#locations" data-slide-to="0" class="active"></li>
<li data-target="#locations" data-slide-to="1"></li>
<li data-target="#locations" data-slide-to="2"></li>
<li data-target="#locations" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fermentum nulla augue, in ultrices risus rutrum a. Suspendisse sed porttitor tellus. Ut vitae vulputate sapien, a facilisis quam.
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
<div class="item">
<center>
Sed eget luctus leo, eu sagittis felis. Vestibulum et tellus sed neque gravida pretium vel pellentesque tellus. Nullam in dolor magna. Donec in mauris eget nisl volutpat ornare a ut dolor. Vestibulum sit amet felis et purus sagittis interdum. Quisque quis nisi neque. In viverra lobortis ex in auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at nulla augue. Duis et congue erat. Maecenas odio justo, finibus at nulla at, luctus elementum eros. Quisque eget nisl felis. Phasellus tempus imperdiet dui condimentum bibendum. Sed a turpis quis diam ullamcorper interdum in at lectus
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
</div>
</div>
</div>
</div><!--Closed div row-->
</div><!--Closed div about-->
<div style="clear:both"></div>
<div class="content2">
<p>lor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fer</p>
</div>
CSS
.services h2{
margin-top: 97px;
}
.carousel-indicators li{
background-color: transparent;
border:2px solid #dbdbdb;
overflow:hidden;
}
.carousel-indicators .active{
background-color: #3eb8df;
border:2px solid #3eb8df;
}
.carousel-indicators{
bottom:-60px !important;
}
.carousel-indicators li{
width:15px !important;
height:15px !important;
}
.content2{
margin-top:100px;
color:blue
}
If content for carousel is static use height for class "carousel-inner"
If content is dynamic then you have to find the mx height of item and then assign.
Related
I've this layout that I made using tailwindcss
<div class="h-screen flex flex-col">
<!-- Navbar -->
<nav
class="flex justify-between items-center shadow-sm z-10 px-4 col-span-5"
>
<div>
<img class="h-16" src="~/assets/imgs/logo-01.png" alt="optado logo" />
</div>
<div>
Icons
</div>
<div>
Avatar
</div>
</nav>
<!-- Main View -->
<main class="bg-gray-500 h-full grid grid-cols-5">
<div class="col-span-1 bg-white flex flex-col">
<div class="calender">
<p>today</p>
<p>tomorrow</p>
<p>upcoming</p>
</div>
<hr />
<div class="projects flex-grow">
<p>project</p>
<p>project</p>
<p>project</p>
<p>project</p>
<p>project</p>
</div>
<hr />
<div>
<button>Click me</button>
</div>
</div>
<div class="col-span-3 bg-gray-100"></div>
<div class="col-span-1 bg-white"></div>
</main>
</div>
I want to have the layout height equal to the height of the screen, so when I add more projects to the div with class projects it becomes scrollable while holding the rest of the screen fixed.
Example of what i want is shown in the image below where the grey rectangle denotes the scrolling bar
I created this layout hack using Flexbox. Please click on full view link to see better output.
Use this html structure as a starting point and add your own content:
html {
height: 100%;
font-family: sans-serif;
}
body {
height: 100%;
overflow: hidden;
margin: 0px;
display: flex;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
}
#left {
flex-shrink: 0;
background-color: white;
}
#right {
background-color: #f3f3f3;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}
ul {
display: inline-flex;
list-style: none;
margin: 0;
}
li {
margin-right: 20px;
}
<div id="left" class="column">
<div class="top-left">Top Left</div>
<div class="top-left" style="height:150px; background:rgba(0,0,0,0.1)">Top Left 2</div>
<div class="bottom">
<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>
<p>nine</p>
<p>ten</p>
<p>eleven</p>
<p>twelve</p>
<p>thirteen</p>
<p>fourteen</p>
<p>fifteen</p>
<p>sixteen</p>
<p>seventeen</p>
<p>eighteen</p>
<p>nineteen</p>
<p>twenty</p>
<p>twenty-one</p>
<p>twenty-two</p>
<p>twenty-three</p>
<p>twenty-four</p>
<p>twenty-five</p>
<p>twenty-six</p>
<p>twenty-seven</p>
<p>twenty-eight</p>
<p>twenty-nine</p>
<p>thirty</p>
</div>
<div class="top-left3" style="border-top:1px solid #333; height:100px; padding-top:20px; text-align:center;">Add project</div>
</div>
<div id="right" class="column">
<div class="top-right">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
<p>Duis facilisis aliquet neque, nec dignissim dolor venenatis non. Donec quis consectetur nibh. Ut ut purus in metus pellentesque feugiat non ut augue. Aenean at leo vulputate, viverra ligula ut, aliquam turpis. Cras nunc dui, sollicitudin quis lorem sit amet, auctor mollis libero. Integer non magna ipsum. Etiam ullamcorper urna tortor, nec tempor tortor elementum et. Donec placerat mi nisi, id rhoncus lacus sodales sed. Nullam lorem risus, sollicitudin non lacinia a, scelerisque et mauris. Vivamus nisi enim, egestas ac ante eu, molestie vestibulum felis. Praesent vitae dui tincidunt mi malesuada pharetra. Integer vehicula leo at laoreet tempor. In vestibulum rutrum tellus, eget suscipit orci egestas et. Vestibulum tincidunt aliquam dui, ac pharetra eros commodo ut. Sed tempus eget orci a laoreet. Donec gravida imperdiet congue.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
</div>
</div>
I'm trying to create a carousel slider with css, atm works fine on chrome/firefox/IE, it looks something like this:
Now I want the slider displays full on the screen since it's inside a container, so I added a trick to acomplish that:
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
And ended looking something like that:
That works fine on chrome, but on firefox and IE can't fully scroll the content. Is there a better solution that applying negative margins and paddings or fix that issue somehow?
EDIT: I need the slider inside the container since this is an example from my real website where I have more sliders inside the web and not just one on top
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
overflow-x: hidden;
background-color: #f0f0e8;
}
.container {
background-color: #e2e7fe;
}
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
}
.slide {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="slider">
<li class="slide"><img src="https://picsum.photos/id/1068/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/189/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/996/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/603/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/933/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/32/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/21/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/22/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/23/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/24/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/25/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/26/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/27/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/28/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/29/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/30/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/31/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/39/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/33/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/34/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/35/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/36/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/37/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/38/200/200"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Some content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Vel pharetra vel turpis nunc eget lorem. Nulla pellentesque dignissim enim sit amet venenatis urna. Tincidunt eget nullam non nisi est sit amet facilisis. Ullamcorper sit amet risus nullam eget felis. Faucibus a pellentesque sit amet. Consectetur lorem donec massa sapien faucibus. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Id velit ut tortor pretium viverra suspendisse potenti. Mi sit amet mauris commodo quis imperdiet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A lacus vestibulum sed arcu. Sed libero enim sed faucibus turpis in eu mi. Aenean et tortor at risus viverra. Varius morbi enim nunc faucibus a pellentesque. Egestas sed sed risus pretium quam vulputate dignissim suspendisse.
</p>
<p>
Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a cras semper auctor neque. Eu scelerisque felis imperdiet proin. Mi sit amet mauris commodo quis imperdiet massa. Neque sodales ut etiam sit amet nisl purus in mollis. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Sem fringilla ut morbi tincidunt augue interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Sociis natoque penatibus et magnis. Dignissim convallis aenean et tortor at risus viverra. Feugiat in fermentum posuere urna. Faucibus scelerisque eleifend donec pretium vulputate sapien. Dolor purus non enim praesent elementum. Erat nam at lectus urna duis convallis convallis. Platea dictumst quisque sagittis purus. Ligula ullamcorper malesuada proin libero nunc consequat. Tortor condimentum lacinia quis vel eros donec ac odio tempor.
</p>
<p>
Tristique senectus et netus et malesuada fames ac. Congue nisi vitae suscipit tellus. Interdum consectetur libero id faucibus nisl tincidunt. Mauris vitae ultricies leo integer. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Pretium viverra suspendisse potenti nullam ac. Eu nisl nunc mi ipsum faucibus vitae aliquet. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Enim ut sem viverra aliquet eget sit. Dolor sit amet consectetur adipiscing. Amet nulla facilisi morbi tempus. Vulputate dignissim suspendisse in est ante in. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at volutpat diam ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Pretium quam vulputate dignissim suspendisse in est ante. Ac placerat vestibulum lectus mauris. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam.
</p>
<p>
Dui id ornare arcu odio. Sed id semper risus in. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Est ullamcorper eget nulla facilisi etiam dignissim. Nibh praesent tristique magna sit amet. Turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis volutpat. A cras semper auctor neque vitae tempus quam. Ultricies mi eget mauris pharetra et ultrices neque. Enim praesent elementum facilisis leo vel fringilla. Dolor magna eget est lorem ipsum. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Ut tristique et egestas quis. Id cursus metus aliquam eleifend mi in. Rhoncus dolor purus non enim praesent elementum facilisis leo. Sed lectus vestibulum mattis ullamcorper. Senectus et netus et malesuada fames ac turpis. Vestibulum sed arcu non odio euismod. Sagittis id consectetur purus ut faucibus pulvinar elementum.
</p>
<p>
Eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit amet nisl. Enim ut tellus elementum sagittis vitae et leo duis ut. Augue lacus viverra vitae congue eu consequat. Purus semper eget duis at tellus at. Sed egestas egestas fringilla phasellus faucibus. Libero volutpat sed cras ornare. Venenatis lectus magna fringilla urna porttitor rhoncus. Dolor magna eget est lorem. Sed blandit libero volutpat sed cras ornare. Id cursus metus aliquam eleifend mi in nulla posuere.
</p>
<p>
Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Ante in nibh mauris cursus mattis molestie. Sed elementum tempus egestas sed. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Vitae semper quis lectus nulla at volutpat. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Sed libero enim sed faucibus turpis in. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Senectus et netus et malesuada fames ac. Dui vivamus arcu felis bibendum ut tristique et. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra accumsan in nisl nisi. Vel risus commodo viverra maecenas accumsan lacus vel. Scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Turpis egestas sed tempus urna. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Magna ac placerat vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequat id porta nibh venenatis cras sed. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Diam quam nulla porttitor massa id neque. Justo eget magna fermentum iaculis eu non diam. Fermentum iaculis eu non diam phasellus. Aliquam ultrices sagittis orci a scelerisque purus semper. Sit amet nisl purus in mollis nunc sed id. Id aliquet risus feugiat in ante metus dictum at tempor. Quisque id diam vel quam elementum pulvinar etiam. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Venenatis a condimentum vitae sapien. Viverra adipiscing at in tellus integer feugiat scelerisque.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Since you don't want to take out the carousel slider div to be out of the container class. There is a fix for that too. I have used viewport width(vw) for it and then calculate it in the right way that the carousel will fit on full screen.
CSS:-
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 0;
background-color: #e2e7fe;
width: calc(100vw);
position: relative;
left: 34.5em;
transform: translateX(-50%);
}
But please note that my fix will work only in large screens only (lg) termed in bootstrap. For medium(md), small(sm), and extra small(xs) screens, you have to calculate by yourself with same calculation I used for lg. Just you have to set media query for different resolutions for left position.
Working Fiddle:- https://jsfiddle.net/szreLuwn/2/
Hope, it fulfills your requirement.
Thanks
I want to have a fullscreen page without global scrolling. The background color should be always be 100% height of the screen.
If the content of a column is too big (like the green column in the screenshots), the column itself should have a vertical scrollbar.
Not scrolled:
Scrolled:
My HTML code:
<div class="container-fluit">
<div class="row">
<div class="col-lg-12">
</br>
</div>
</div>
<div class="row">
<div class=" orange col-lg-4 ">
so much content here
</div>
<div class="col-lg-8">
so much content here
</div>
</div>
My CSS Code:
.col-lg-4 {
background:green;
}
.col-lg-12 {
background:blue;
}
.col-lg-8 {
background: orange;
}
You could try to give the body a heigth of 100vh. This in combination with overflow-y: hidden; will remove the scrollbar.
Take a look at this Fiddle
To activate scrollbar at y-axis of internal div, you need to set overflow-y:scroll. But it activates only when your internal content overflows the assigned height. And to hide body scrollbar use overflow-y as hidden i.e. overflow-y:hidden.
body{
overflow-y:hidden;
margin:0;
}
.col-lg-12 {
background:blue;
}
.col-lg-4 {
background:green;
float:left;
width:50%;
height:100vh;
overflow-y:scroll;
}
.col-lg-8 {
background: orange;
float:left;
width:50%;
height:100vh;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<br>
</div>
</div>
<div class="row">
<div class = "col-lg-4">
so much content here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta nibh. Cras efficitur efficitur urna non ultricies. Fusce tempus pharetra ex, non efficitur orci tempus ac. Morbi lobortis mi ut neque faucibus bibendum. Sed elit orci, aliquam sed arcu sit amet, placerat fringilla ante. Praesent vel tellus quam. Aliquam et nisl vel nisi dapibus dignissim id sed odio. Pellentesque consequat dapibus nisi aliquam tempor. Proin viverra dolor id nibh tristique, at ullamcorper diam porttitor. Duis viverra dapibus viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis commodo neque ac eros suscipit consectetur. Quisque nisi arcu, ullamcorper tincidunt vestibulum eu, sollicitudin eu leo.
Nunc sollicitudin consectetur suscipit. Suspendisse vestibulum a nulla dapibus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean semper risus quis venenatis elementum. Vestibulum fringilla ipsum id sem luctus pretium. Nunc consequat ornare auctor. Vivamus et ex et mi pellentesque tincidunt fringilla eu arcu. Mauris porttitor volutpat mi. Proin nec ornare sapien. Ut mattis porttitor elementum.
Sed in sapien dapibus, ullamcorper augue nec, volutpat dui. Integer sit amet gravida lacus, eu laoreet arcu. Praesent urna lacus, tristique in diam quis, fermentum rutrum augue. Sed gravida risus vel leo egestas finibus. Ut interdum leo vitae dolor malesuada, quis ullamcorper quam vulputate. Fusce vitae consectetur quam, ut ullamcorper leo. Nullam malesuada dapibus pulvinar. Duis pretium purus at eleifend pharetra.
Curabitur faucibus fermentum neque at tempus. Nam ut consectetur odio. Vivamus risus lectus, suscipit vitae maximus eget, pellentesque interdum purus. Aliquam a eleifend dui. Etiam congue leo a mauris efficitur mollis. Nulla convallis posuere nisl. Morbi pretium ornare enim, ac tristique lacus interdum ullamcorper. Aliquam blandit laoreet dui, a egestas nibh sollicitudin vitae. Vestibulum semper lectus purus, vel tincidunt felis lacinia eget.
Curabitur elit justo, malesuada non laoreet sed, maximus ac eros. Aliquam blandit mauris eget tellus luctus, sed fringilla sapien laoreet. Aliquam erat volutpat. Donec nec hendrerit tellus. Mauris nec erat quis magna pharetra hendrerit. Quisque sit amet sapien non magna blandit cursus at id ante. Fusce non elit at leo sollicitudin consectetur. In quis nibh vitae libero elementum viverra id at turpis. Aliquam vulputate vestibulum orci, non dignissim lorem faucibus vel.
</div>
<div class = "col-lg-8">
so much content here
</div>
</div>
</div>
So I'm using Zurb Foundation and I want to create two vertically scrollable divs. llike this example
This is the html
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
and this is the css
.scrollablediv{
height:800px;
overflow-y: scroll;
}
However, When I scroll it, it scrolls both of it. I want them to scroll separately. How would I do that? Thanks in advance
If I understand your question correctly, all you have to do is add overflow: auto; to each child div, not the parent div.
Check it out: https://jsfiddle.net/f3utadqh/
That solves the scrolling issue, but adds scrollbars. A potential solution to that could be here https://stackoverflow.com/a/23771140/4856759
If you are actually trying to get two class "row" divs to scroll separately, try this. I added Lorem Ipsum and a height constraint so you can see how it works.
.scrollablediv {
height: 400px;
overflow-y: scroll;
}
.scrollablediv {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet purus nunc. Curabitur et varius lectus, vel accumsan eros. Vivamus feugiat gravida massa eu euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris a fermentum arcu. Nunc faucibus est hendrerit nisl iaculis, id accumsan mi pretium. Duis porta erat leo, vitae porta ipsum dignissim vel. Mauris sed vestibulum lectus. Maecenas a risus eros. Nulla quis diam lectus. Nam elementum magna et dictum scelerisque. Quisque sit amet purus dolor. Nunc malesuada luctus nibh sed luctus. Ut lectus diam, consectetur sed libero eu, vestibulum cursus magna. Nam bibendum nisl ac est gravida, in consectetur ante tempor. Fusce tincidunt leo leo, sed sollicitudin metus condimentum sed.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
Okay, try this - each SECTION should now scroll independent of one another, try targeting each section separately?
.scrollablediv {
height: 400px;
}
.scrollablediv section {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
</div>
</div>
I have bootstrap carousel with text slider, i have problem with indicators ,because if text large or small, my indicators dont have fixed position.
I tried to set limited height for carousel class and thats work only for caomputers, but not responsive on mobile devices, and i deleted height.
http://codepen.io/anon/pen/MwGLJd
HTML
<div class="about mainContainer">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<h2 class="fontraleway">WHO WE ARE?</h2>
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#locations" data-slide-to="0" class="active"></li>
<li data-target="#locations" data-slide-to="1"></li>
<li data-target="#locations" data-slide-to="2"></li>
<li data-target="#locations" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fermentum nulla augue, in ultrices risus rutrum a. Suspendisse sed porttitor tellus. Ut vitae vulputate sapien, a facilisis quam.
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
<div class="item">
<center>
Sed eget luctus leo, eu sagittis felis. Vestibulum et tellus sed neque gravida pretium vel pellentesque tellus. Nullam in dolor magna. Donec in mauris eget nisl volutpat ornare a ut dolor. Vestibulum sit amet felis et purus sagittis interdum. Quisque quis nisi neque. In viverra lobortis ex in auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at nulla augue. Duis et congue erat. Maecenas odio justo, finibus at nulla at, luctus elementum eros. Quisque eget nisl felis. Phasellus tempus imperdiet dui condimentum bibendum. Sed a turpis quis diam ullamcorper interdum in at lectus
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
</div>
</div>
</div>
</div><!--Closed div row-->
</div><!--Closed div about-->
CSS
.services h2{
margin-top: 97px;
}
.carousel-indicators li{
background-color: transparent;
border:2px solid #dbdbdb;
}
.carousel-indicators .active{
background-color: #3eb8df;
border:2px solid #3eb8df;
}
.carousel-indicators{
bottom:-60px !important;
}
.carousel-indicators li{
width:15px !important;
height:15px !important;
}
Just set a min-height on the carousel-inner element that will make the indicators stay at the same position.
The easiest way to do that would be to add it into your CSS like so:
.carousel-inner {
min-height: 120px;
}
But the problem with this is, whenever the size of the window changes, the size of the items inside of carousel-inner will change as well and their height might exceed the 120px.
So much better would be to get the item with the biggest height and then add the min-height property dynamically. Here is an example:
$(function () {
// Reference your carousel-inner and the items.
var $carouselnner = $(".carousel-inner"),
$carouselItems = $carouselnner.find('.item');
// Handle window resize.
function resizeHandler() {
// Map over all items to get their height and assign it to minHeight.
var minHeight = $carouselItems.map(function () {
return $(this).height();
}).get();
// Now let's apply the biggest height as the value of min-height on carousel-inner.
$carouselnner.css('min-height', Math.max.apply(null, minHeight) + 10 + 'px');
}
// Add a listener to window resize and trigger it immediately.
$(window).resize(resizeHandler).trigger('resize');
});
.services h2 {
margin-top: 97px;
}
.carousel-indicators li {
background-color: transparent;
border: 2px solid #dbdbdb !important;
}
.carousel-indicators .active {
background-color: #3eb8df !important;
border: 2px solid #3eb8df !important;
}
.carousel-indicators {
bottom: -60px !important;
}
.carousel-indicators li {
width: 15px !important;
height: 15px !important;
}
.carousel-inner {
min-height: 120px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about mainContainer">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<h2 class="fontraleway">WHO WE ARE?</h2>
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#locations" data-slide-to="0" class="active"></li>
<li data-target="#locations" data-slide-to="1"></li>
<li data-target="#locations" data-slide-to="2"></li>
<li data-target="#locations" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis rhoncus finibus. Donec tempor mi massa, a sollicitudin diam semper ut. Nam pulvinar nisi nisi, vitae rhoncus purus rhoncus id. Nam ac augue sed erat consequat efficitur. Integer aliquet elit et velit porttitor, eget blandit arcu venenatis. Donec fringilla urna purus, sit amet malesuada est dignissim mattis. Donec cursus, quam vel luctus blandit, dui sapien interdum sapien, vitae ultrices arcu leo et augue. Vestibulum fermentum nulla augue, in ultrices risus rutrum a. Suspendisse sed porttitor tellus. Ut vitae vulputate sapien, a facilisis quam.
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
<div class="item">
<center>
Sed eget luctus leo, eu sagittis felis. Vestibulum et tellus sed neque gravida pretium vel pellentesque tellus. Nullam in dolor magna. Donec in mauris eget nisl volutpat ornare a ut dolor. Vestibulum sit amet felis et purus sagittis interdum. Quisque quis nisi neque. In viverra lobortis ex in auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at nulla augue. Duis et congue erat. Maecenas odio justo, finibus at nulla at, luctus elementum eros. Quisque eget nisl felis. Phasellus tempus imperdiet dui condimentum bibendum. Sed a turpis quis diam ullamcorper interdum in at lectus
</center>
</div>
<div class="item">
<center>
Ut eu iaculis arcu. Cras pretium lacus eget mi mattis sollicitudin. Vivamus posuere vehicula mi eu condimentum. Donec eros dolor, sagittis quis arcu non, pulvinar euismod turpis. Suspendisse accumsan sodales massa, eget pretium nunc rhoncus a. Fusce a magna sit amet odio ullamcorper dapibus nec quis nulla. Curabitur enim risus, convallis at felis non, consectetur efficitur risus. Class aptent taciti eptos himenaeos. Nulla facilisi. Aliquam posuere feugiat risus, non mollis nunc iaculis nec. Praesent non tellus rhoncus
</center>
</div>
</div>
</div>
</div>
</div><!--Closed div row-->
</div><!--Closed div about-->