Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

I successfully implemented fixing the first two left columns in my tables by following the instructions on . The columns are only fixed when the screen size is less than 768px, making the table scrollable (check it out on jsFiddle). This functionality works perfectly on Android, desktop Chrome, and desktop Safari, but unfortunately does not work on iOS Safari and Chrome. Could this be due to iOS not supporting position:absolute?

If anyone has any alternative implementations or solutions, I would greatly appreciate it as an answer.

http://jsfiddle.net/98hk3/

ioscsstwitter-bootstrapwebkit

Answer №1

After some troubleshooting, I successfully resolved this issue by changing the -webkit-overflow-scrolling property to unset.

It appears that in iOS, the default value for -webkit-overflow-scrolling is touch, which was causing conflicts with the position:absolute I was attempting to implement.

Answer №2

It seems like you're encountering a min-width issue,

A simple solution would be to convert pixels to em units,

Assuming the base size is 16px (the default in all browsers),

Your conversion from PX to Em would be (px)768 / 16 = 48(em)

Try updating the code by changing Px to Em Fiddle 0

If you need to stick with pixels, consider something like this,

@media(max-width:768px !important)

fiddle 1 or

@media(max-width:99%) Fiddle 2

Note: I recommend leaving 1 or 2% buffer(by using 99%) to account for any potential overflow due to padding within the body.

Also, consider adding zoom:1; under the .table-responsive class as it might help with iOS related issues fiddle 3

If these steps don't resolve the problem, feel free to respond...

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

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq My CSS code follows a 12 column grid system. .fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden} .fui-navbar li{fl ...

htmlcss

Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...

javascripthtmlcssbootstrap-4styles

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Currently facing a peculiar issue within a Cordova app, specifically on iOS. The scenario is: I have an HTML page with existing content. At a later stage, I fetch additional HTML from a remote source and inject it into the original HTML page. However, whe ...

javascripthtmlioscordovaiframe

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

javascriptjquerycssruby-on-railssprockets

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

htmlcssprinting

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Encoding a string for use in a URL

After receiving a JSON data object, I extract a string from it using the following code: NSDictionary *jsonDictionary = [NSJSONSerialization JSONObjectWithData:data options:0 ...

iosobjective-cjsonurl

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

What is the best way to adjust the position of the previous and next buttons on a Bootstrap 5 carousel?

I am having trouble figuring out how to properly position the previous and next buttons in a bootstrap5 carousel. The original code I used as a template was for a carousel that displayed 4 images at once, but I changed it to display 3 images at once. I a ...

htmlcssbuttoncarouselbootstrap-5

The process of locating a textarea by its id becomes obsolete when integrating CKEDITOR

The data table has editable cells, where clicking on a cell will trigger a bootstrap modal to display with a textarea containing the text retrieved from the database. Snippet of the table structure: <table class="table table-striped table-hover" id="t ...

javascriptjquerytwitter-bootstrapckeditorbootstrap-modal

Trigger a local notification upon the completion of a download using NSURLSession or NSURLSessionDownloadTask

Currently, I am utilizing NSURLSessionDownloadTask objects within an NSURLSession to enable users to download documents even when the app is running in the background or when the device is locked. Additionally, I aim to notify the user through a local noti ...

iosobjective-cuilocalnotificationnsurlsessionnsurlsessiondownloadtask

The outline none property on the Material UI IconButton is malfunctioning

Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { color: "#ff8833", ...

cssreactjsmaterial-ui

Expand the width and include a placeholder in mat input field for Angular version 5

Currently utilizing a mat input with the code provided, presenting a similar appearance to the screenshot below. I am looking to add a placeholder that disappears once the user begins typing. However, in my current setup, the text shifts upward and floats ...

htmlcssangularangular-material

Top method for utilizing overlays

Is there a method to randomly select hex codes for specific colors? I want to replicate the design in this image through coding. Image Here is the code I have so far: HTML <div id="group"> <div class="sub red panel"> </div><!--su ...

javascriptjqueryhtmlcss

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

cssangulartypescriptsassmapbox-gl

How to correctly structure a JSON object in Swift 3

I'm encountering a problem with formatting my JSON object on my Node.js server. My API is configured to accept a JSON object and save it in a database. Everything works fine when I send a POST request using Postman, but I run into an unusual error whe ...

iosjsonnode.jsswiftswift3

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...

htmlcss