Adding a left border to body content in responsive version

[PupStar 57]

Hi Guys,

 

I am not sure if I am going about this the correct way or the easiest way possible.

 

I have added a left border to the body content but can not get the padding and or margin to work with out the entire content (inc border) moving together

 

Also the border only is as tall as the content page and I want it to fill the entire page length.

 

This is what I have done so far

 

template_top

      <div id="bodyContent" class="col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'col-md-push-' . $oscTemplate->getGridColumnWidth() : ''); ?>">

      <div class="left-border">

template_bottom

      </div> <!-- bodyContent //-->
</div>

user.css

.left-border {
border-left: 1px solid #dedede;
}

Mark

[ArtcoInc 257]

@@PupStar

 

template_bottom

      </div> <!-- bodyContent //-->
</div>

Mark

 

 

While comments don't really matter, shouldn't it be ....

  </div> <!-- left-border //-->
</div> <!-- bodyContent //-->

B)

 

Malcolm

Edited December 31, 2015 by ArtcoInc

[PupStar 57]

@@PupStar

 

 

 

While comments don't really matter, shouldn't it be ....

  </div> <!-- left-border //-->
</div> <!-- bodyContent //-->

B)

 

Malcolm

 

@Artcolnc

 

ha ha yeah

[♥14steve14 415]

To simplify things can you just not add css to the user.css file to add a border where you need it. No need to alter core code files then. Thats what that file is for.

[PupStar 57]

To simplify things can you just not add css to the user.css file to add a border where you need it. No need to alter core code files then. Thats what that file is for.

 

@@14steve14

 

I tried that steve but could not get it to work, maybe I was doing something wrong

 

ok forget that, tried it again and it worked lol

 

so how would I get it to overflow to the full length of the page

Edited January 1, 2016 by PupStar

[PupStar 57]

can anyone shed any light on how to always make the left column fill the entire length of the page dynamically depending on the body content???

 

I have found partial solution

#columnLeft {border: 1px solid #dedede; margin-bottom: -9999px; padding-bottom: 9999px;}

but its not ideal as then the page just scrolls forever

 

Thanks

 

Mark

Edited January 2, 2016 by PupStar

[PupStar 57]

thanks to Malcolm @Artcolnc for this

@[member=media] (min-width: 992px) {
  #bodyWrapper {
    overflow-y: hidden;
  }
}

#columnLeft {border: 1px solid #dedede; padding-bottom: 9999px; margin-bottom: -9999px;}

[ArtcoInc 257]

I should point out that I, too, am working on a site that has a left column that I wanted to extend all the way to the bottom of the screen. But, the left column is only used in the Medium and Large bootstrap modes. Hence, the above CSS has the @@media clause.

 

Malcolm