Implementing Fixed Columns in Bootstrap 3

After reviewing numerous queries on this topic, I am struggling to find a solution using custom calculations in JavaScript. My goal is to have a fixed column on the left side that resizes properly within its container without affecting adjacent columns. You can see my attempt at achieving this using pure Bootstrap and CSS here: http://www.bootply.com/arSNSzWA1U

However, a problem arises when viewing it on larger screens as the sizing is incorrect due to the fixed attribute calculating percentages based on the entire window rather than the parent.

Therefore, my question is how can I rectify this issue using JavaScript/JQuery? Thank you in advance!

Answer №1

By switching out the col-md-3 with a col-md-2, the layout fits perfectly on bigger screens. For it to also display correctly on smaller screens, just include some padding at the top of the right column. I believe CSS and @media queries can easily take care of this without requiring any JavaScript.

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

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

javascript jquery html node.js

Querying JSON Data in an Ajax Request: A Simple Guide

I have a data file in json format that looks like this: {"markers":[ { "latitude":11.58655, "longitude":122.755402, "type":"A"}, { "latitude":11.00698, "longitude":124.612801, "type":"B"}, { "latitude":10.30723, "longitude":123.898399, "type": ...

ajax json jquery

Sharing Axios Response Data in VueJS: A Guide for Parent-Child Component Communication

Can someone please help me with using VueJS and Axios to retrieve API data and pass it to multiple child components? I am trying to avoid accessing the API multiple times in the child components by passing the data through props. The issue I am facing is ...

javascript vue.js vuejs2 axios vuejs3

The OK Button Dialogbox is currently malfunctioning

While using jQuery for a dialog box, I encountered an issue when trying to delete an element within it. After clicking the ok button, the dialog box did not redirect or close itself properly. The initial content in the dialog box seems to work fine. < ...

c#jquery html asp.net jquery-ui-dialog

Conceal the "Item Successfully Added to Cart" notification on Woocommerce

Is there a way to eliminate the notification that says "xx product has been added to your cart" at the top of my checkout page? If so, how can I achieve this? I came across a suggestion from someone (link provided below), but unfortunately it didn't ...

php css wordpress woocommerce checkout

Executing a series of post requests within a loop and handling nested promises

Hello, I'm looking for some assistance! I'm attempting to send a post request for each item in an array. The issue I'm facing is that I need to aggregate the responses from each post request and then pass the count array back to the callin ...

javascript node.js es6-promise

What is the method for obtaining a unique exception message in the ajaxError event of jQuery?

Is there a way to customize the content of responseText in my APP? Currently, it displays as exception description amended by Tomcat (refer to the image below). I want to have control over the content of responseText or handle custom messages in a more eff ...

java jquery ajax exception

Can you explain the role of the next() function in middleware/routes following the app.use(express.static(...)) in Express

When dealing with serving static assets generated from React source code using npm run build, the following method can be used: app.use('/', express.static(path.join(__dirname, 'apps', 'home', 'build'))) To protect ...

javascript reactjs express

AngularJS/AJAX for submitting forms

Typically, I would utilize AJAX to handle form submissions by capturing the form data, sending it to my PHP backend, and receiving a response. This is achieved with the following code: <script> $("input#submit").click(function() { $("#lo ...

javascript php jquery angularjs ajax

The Chrome extension for the New Tab Page is taking the spotlight away from the address bar

It appears that with the latest version of Chrome, extensions that previously had the ability to override Chrome's New Tab Page and take focus away from the Omnibox no longer have this capability. Is there a different method now to give focus to an i ...

javascript html google-chrome-extension

What is the best way to group all matched objects from an array based on multiple keys?

const data = [ { amount:10, gameId:7 , consoleId:3, id: 1 }, { amount:5, gameId:18 ,consoleId:3, id: 2 }, { amount:5, gameId:18 ,consoleId:3, id: 3 }, { amount:10, gameId:7 ,consoleId:3, id: 4 ...

javascript node.js arrays lodash

Simply click and drag a document from your file explorer directly into the desired text field to instantly generate a clickable

I am interested in dragging a file from our Windows server and dropping it onto a text area on a webpage. The link that would be generated will look something like this: <a href="\\fileserver\folder\pizza_2.pdf">filename.pdf< ...

javascript jquery html windows explorer

I could really use some guidance on how to begin with the Node.JS app file in BlueMix

After delving into JS tutorials, I feel comfortable with the syntax and approach. Now, my focus is on utilizing Node.JS to develop an app using BlueMix. While I consider myself proficient in Java, web programming is uncharted territory for me, leaving me s ...

javascript node.js ibm-cloud

Unlock the power of Jadeify with Gulp by following these step-by-step

Initially, my primary objective is to implement jade templates in conjunction with backbone. However, the approach I have devised seems to be the most optimal one for now. browserify.gulp //I apologize for including everything here. gulp.task('brows ...

javascript node.js pug gulp browserify

Internet Explorer 11 and the process of URL encoding

Hello there! I am currently working on an MVC project with Angular where I am utilizing a JsonResult to return JSON data from a list containing emails with a specific date. Below is the AJAX call I'm making from Angular: myApp.service('mailServ ...

javascript angularjs ajax

What are the steps to turn off ASO (Automatic Static Optimization) in Next.js?

In my Next.js application, I am looking to generate a unique CSP (Content Security Policy) nonce for inline scripts on a per-request basis. To implement this, I plan to create a nonce within my `middleware.ts` file and include it in the request headers. T ...

javascript next.js

Platform error: Responses not specified for DIALOGFLOW_CONSOLE

I've been struggling with this issue for almost a day now and I'm at a loss for what else to try. For some reason, Dialogflow Fulfillment in Dialogflow ES is refusing to make any HTTP calls. Every time I attempt, I receive the same error message ...

javascript node.js axios dialogflow-es

having difficulty transmitting parameter to angular directive

After assigning a collection to a source variable, I am trying to activate a third party control (bootstrap-select) using a directive that watches the assigned collection. angular .module('app').directive('bootstrapDropdown', ['$t ...

javascript angularjs angularjs-directive bootstrap-select

What is the best way to distinguish if users are accessing my Facebook app through an iframe or by directly entering the

If my Twitter app url is http://tw.domain.com/ and the app url is http://apps.twitter.com/demoapp/ I need to ensure that users cannot access the application url directly, they must view it within an iframe on Twitter. What method can I use to detect & ...

php javascript jquery facebook http-redirect

Using JQuery to make AJAX requests and parse XML data involves

I'm currently facing a challenge while attempting to parse XML using jQuery. Despite following a well-established function, there seems to be an issue with the ajax component. No matter what I do, it keeps skipping this crucial part. It's puzzlin ...

jquery xml ajax parsing

CSSer Q&A