asked    Sam     2018-10-22       html       11 view        1 Answer

[SOLVED] Bootstrap 3.0.3 affix - content isn't in a fixed place and moves over top of other content

I have a legacy application which is built with Bootstrap 3.0.3. It is not possible for us to update Bootstrap in this case.

That said, I am trying to with with 3.0.3 to use the affix functionality.

I have the following which I've also set up on jsfiddle:

What I'm trying to do is have a .col-md-8 (red bordered) left area with a "library" of items in a .col-md-4 (blue bordered) on the right.

The left area may grow to be very long and I want the blue one to always be visible even if the user scrolls down.

So I've added the following to .col-md-4:

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

enter image description here

When I run this, with the affix moves to the left and overlaps the red area!

enter image description here

Why is this? I thought affix was designed to fix the content in place.

What am I doing wrong here?

  1 Answer  

        answered    Perry     2018-10-22      

In your fiddle, when opening the console it gives the message Uncaught Error: Bootstrap requires jQuery. When this is added above the other scripts, affix works as expected.

Also wrap the column that needs to stay fixed. Change:

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
</div>

To:

<div class="col-md-4 tag-container">
  <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
  </div>
</div>




Your Answer





 2018-10-22         Troy

How to get ion-input type date to open calendar when on desktop/core

I have an ionic3/angular application that is also used on desktop/core. I have the typical...<ion-item> <ion-label></ion-label> <ion-datetime *ngIf="!platform.is('core')"></ion-datetime> //this line works just fine <ion-input type="date" *ngIf="platform.is('core')"></ion-input></ion-item>for the user to enter a date (birthdate, enrollment date, etc.). My problem is that ion-input doesn't seem to support type 'date.' It seems to be defaulting to some sort of text input. Setting it up as above DOES allow me to manually ...
 angular                     1 answers                     92 view
 2018-10-22         Regan

How To Check If A Value is increasing or has increased - PHP

i am writing a script that checks for increase in date to know whether or not to add a value to an existing variable. Though i have been able to get some help here, it still appears i'm stuck with checking if the day has increased.PHP CODE<?php $now = time(); // or your date as well $your_date = strtotime("2018-09-05"); $datediff = $now - $your_date; $alreadySpentDays = round($datediff / (60 * 60 * 24)); $userEarnings = 0; // i want to be able to check if the day has increased and if it has i want to be able to add $10 to userEarning variable daily?><p><?=$us...
 php                     2 answers                     94 view
 2018-10-22         Julia

How to retrieve the real-time date whenever user log in into the system

This question already has an answer here: Java code for getting current time [duplicate] 14 answers In Java, many useful supporting commands require certain predefined processes. These are stored in what are called “library packages” or simply “packages”. You are allowed to use the default package without any prior mention in Java.Date date = new Date();String str = String.format("Current Date/Time : %tc", date );System.out.printf(str); [XXX]From Java 8LocalDateTime now = LocalDateTi...
 java                     3 answers                     89 view