becca becca - 6 months ago 46
CSS Question

Split Background - stop moving as panels expand

So I have a split background - the top is blue, and the bottom is white. I am using this style to get the split background:



//accordion - changes colour on open / close

var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});

.gradient {
background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: repeating-linear-gradient(#18A9E5, #18A9E5 49.9%, #fff 50.1%, #fff 100%);
}
.split {
width: 100%;
/*height:50px;*/
max-height: 25%;
padding: 2% 5% 5% 5%;
}
.solid-white {
background-color: #fff;
padding-top: 10px;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 0!important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
h2 {
padding-left: 25px;
}
}
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
&.page-section-md {
padding-top: 20px;
padding-bottom: 20px;
}
}
.panel-body-help {
background-color: #616161;
color: white;
}
.panel-default.open {
background-color: #616161;
transition: all 0s;
}
.custom-panel {
.panel-default.open {
> .panel-heading {
color: #fff;
font-weight: bolder;
background: transparent;
}
}
}
.custom-panel {
.panel-default {
> .panel-heading {
background: #fff;
}
}
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}

<section class="page-section page-section-md split gradient">
<div class="row">
<div class="col-md-2">
<h4 class="heading-responsive text-white">
Welcome
</h4>
</div>
</div>
<div class="container wrap-md">
<br />
<br />
<div class="col-md-offset-2 col-md-8 solid-white-help">
<h2 class="heading-responsive thin">Welcome</h2>
<br />
<div class="panel-group custom-panel" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
<i class="fa fa-plus text-primary"></i> Get started
</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
</h4>
</div>
<div id="panel5" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
</h4>
</div>
<div id="panel6" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
</h4>
</div>
<div id="panel7" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
</h4>
</div>
<div id="panel8" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
</div>
</div>
<br />
</div>
<br />
<br />
</section>





Since I have the bootstrap panels inside the background, when i expand a panel, the background also moves. (as in the blue extends lower as i open panels).
How can i make the colors fixed no matter what size my background is?

https://support.google.com/mail#topic=3394144 < this is a good reference for what i am trying to achieve with the background not moving when panels are expanded.

This is likely a really easy fix and i am just missing it - thanks for your help! TIA.

Answer

The height of the blue top is determined by your background gradient on the'.gradient' class (currently top 49.9% is blue and bottom 50.1% is white). You can give your .split class a height of 100vh and overflow: scroll.

.split {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding: 2% 5% 5% 5%;
}

Check out this fiddle: https://jsfiddle.net/wietsedevries/bk4ogp38/3/

Comments