Set the position of bootstrap column content to be fixed

I have a bootstrap row with two columns and some offset. I am trying to make the last column have a fixed position so that it remains visible even while scrolling. This last column contains image content.

Although I tried using the affix class provided by Bootstrap, it caused the image in the last column to resize/overflow.

You can view these jsfiddles for a demonstration:

  1. No fixed position/.affix: https://jsfiddle.net/tpw9n2e7/1/

  2. With fixed position/.affix: https://jsfiddle.net/tpw9n2e7/2/

Is there a way to keep the div fixed without affecting the size or overflowing contents of the child div?

htmlcsstwitter-bootstrapresponsive-designcss-position

Answer №1

It appears that the .affix div is not following the previous div col-md-4 due to its fixed position.

To ensure that the child content follows the .affix, you should add a class of the parent div to the .affix class.

<div class="col-sm-4">
   <div class="affix col-sm-4">
     <img src="http://via.placeholder.com/450x750" class="img-responsive"/>
     <br/>
     Fixed Content
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

javascriptjqueryhtmljquery-uijquery-ui-draggable

Sliding through content with Bootstrap.carousel

Looking to create a dynamic bootstrap carousel with text, featuring 4 circles that reveal the next circle and line when selected or hovered. Imagine a layout similar to this concept: https://i.sstatic.net/qeZGh.png Can anyone provide guidance on how to ac ...

htmlcssslidercarouseltwitter-bootstrap-4

issue with manipulating hidden field on the client side

After some troubleshooting, I discovered an issue with a hidden field in my form. Despite changing the value using JavaScript right before submitting the form, on the server side it appeared to be null or empty. The Request.Form["hidAction"] showed as em ...

asp.netjavascripthtmldom

Styling a Kendo Dropdownlist with JavaScript

Incorporating Jquery Kendo Dropdownlist to showcase information in a list has been quite beneficial. My current objective is to introduce the mentioned styles (.k-list-container and .k-list-scroller) into the Dropdownlist via JavaScript. Moreover, I aim t ...

javascriptjquerycsskendo-uikendo-asp.net-mvc

Having difficulty stripping HTML tags from the response JSON

Hello, I am new to AngularJS and facing an issue with parsing JSON data. The JSON response contains HTML format data, with tags like <, BR, etc. When checking the response in a browser, it appears fine; however, on devices such as tablets or mobile phon ...

javascriptjqueryhtmljsonangularjs

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

Currently, I have a small JavaScript program running within an HTML5 canvas and included a HTTP GET request function in my JavaScript code. The function itself is functioning properly as I tested it with multiple examples from the internet, all of which wo ...

phpjavascripthtmlhttpcommunication

Modify the color of the sidebar text in bootstrap from text-light to text-dark upon clicking with jQuery

Looking for assistance in integrating jQuery code to remove the "text-light" class when the side menu is open or when the navbar-toggler button is clicked. $(document).ready(function() { $(".sidebarNavigation .navbar-collapse").hide().clone().appendTo ...

htmljquerycssbootstrap-4

Styling your printed documents in Next.js 10

Within my Next 10 application, I am able to bring in global styles by importing them in _app.js in the following manner: import 'assets/css/app.css' I want to incorporate a print stylesheet as well. Instead of using a @media print { } query with ...

cssnext.jsprint-style

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

javascriptjquerycss

How to position a div in the center of the screen with an overlay

While this code functions well in Firefox, it unfortunately does not work in IE. I am seeking a solution to properly center the div on the screen - Currently, the div is leaning too much towards the bottom In addition, I require the div with an id of "l ...

javascriptjquerycssinternet-explorer

Attempting to align a CSS card flip within a Bootstrap layout

I have created a card using HTML and CSS, but I am struggling to make it line up with Bootstrap. Currently, the card is only in the middle of the section and I can't seem to figure out how to get four of these cards to line up in one row, and then ano ...

htmlcsstwitter-bootstrapflipcard

Layering an HTML page on top of another

I am trying to display one HTML page on top of another. I attempted to link the other page within a div, following the example on this page: However, when clicked, the control navigates to the linked page instead of overlaying it on the current page. Can ...

jqueryhtmlcss

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

Achieving Style= Background-Img URL Extraction with Cheerio

I am attempting to retrieve the URL of the background image. The background image is located within an a href tag. The a href tag contains the following style: style="background-img:url("")" I am using cheerio (a Node.js module simila ...

javascripthtmljquerynode.jscheerio

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...

htmlvue.jsvuejs2

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button? Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that addit ...

htmlcsstwitter-bootstrap-3

A webpage featuring a 2-column layout with a footer, along with a right column that is absolutely positioned and

I'm currently working on a basic two-column layout: <div class = "parent"> <div class = "left-column"> </div> <div class = "right-column"> </div> </div> <div class = "footer"></div> The con ...

htmlcss

Utilize jQuery to retrieve values from a Dropbox and Textbox and populate them inside a table

I'm attempting to retrieve values from a table row using the onfocus event. I have been assigned the task of inserting data into a database without clicking a button, so I decided to utilize the onfocus event for the last cell in the row. The challen ...

javascriptjqueryhtmlasp.net

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

htmlcss

What is the best method for extracting [object Text] using XPath?

I'm currently working with Selenium and attempting to extract text from a node that contains the keyword "approved," but I'm unsure of how to retrieve and validate this specific text. Here is the node structure - <div class="Notification-bo ...

htmlselenium-webdriverxpath