Decreasing the width of the table wrapper specifically for iPhones

Currently, I am developing a small jQuery application. One feature of the app involves using DataTables to display information on a grid format. However, I seem to be encountering an issue with how it appears on iPhone devices. When viewing the grid on Chrome or an Android device, everything looks great as shown in this JSFIDDLE. But when I try to view it on an iPhone, some parts of the grid are getting cut off. I have attempted tweaking the CSS properties to adjust the width so that it fits better on iPhones, but haven't had much luck. Does anyone have any suggestions?

Here's an example of what I've tried:

#example_wrapper {
    width: 50px;
}

I experimented with changing the width value to see how it would affect the table size. Surprisingly, the table did shrink in Chrome, but there was no change on an iPhone.

Here's how it currently appears on my iPhone (I'm testing it on both a simulator and an actual device).

If anyone could provide some guidance on how to resolve this issue, I would greatly appreciate it. Apologies if this question is too basic - my understanding of CSS is somewhat limited.

javascriptjqueryhtmlcssiphone

Answer №1

I was able to find a solution for this issue, although I'm not sure if it's the most efficient method. However, it serves the purpose for what I need it to do. Essentially, I placed the table within a div with a data role set to content, and then applied a zoom effect using CSS to make the content smaller.

<div data-role = "content" id="tbcontent">  

//insert table in here

</div>


#tbcontent{

zoom:80%;

}

Check out the updated JSFIDDLE link for more details.

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

Unable to call an object that may be 'undefined': Utilizing a function with a return object that includes asynchronous functions as properties

I have a function exported in my adapter.ts file: import type { Adapter } from "@lib/core/adapters"; export default function MyAdapter (): Adapter { return { async createUser (user: User) { ... }, async findUserByEmail (email ...

javascriptnode.jstypescriptecmascript-6promise

Utilizing the power of Ajax for enhancing table sorting and filtering functionality

Having an issue using JQuery tablesorter to paginate a table with rows fetched from the database. //list players by points (default listing) $result=mysql_query("select * from players order by pts_total") or die(mysql_error()); echo "<table id='li ...

phpjavascriptjquery

Using Jquery and Ajax to add information to a database

One of the challenges I'm facing involves a page with three forms, each containing separate variables that need to be inserted into a MySQL database for viewing. My current script is working fine, even though I am aware that `mySql_` is deprecated but ...

javascriptphpjquerymysqlajax

Converting PHP Unicode character faces to hexadecimal for Arabic characters

I'm having trouble converting Arabic characters to hexadecimal values. $text = "يي"; $text = mb_convert_encoding($text, "HTML-ENTITIES", "UTF-8"); $text = preg_replace('~^(&([a-zA-Z0-9]);)~',htmlentities('${1}'),$text) ...

javascriptphpdomarabicunicode-string

Incorporating AngularJs into an iframe

Can someone please help me troubleshoot why this jsfiddle link is not functioning properly? Specifically, I am encountering issues with retrieving the value of videoId. Interestingly, when I eliminate ngRoute from the module, everything works as expected ...

javascripthtmlangularjsyoutube-javascript-api

Could someone assist me in identifying the error or mistake?

For my project, I have implemented client and server sign-in & sign-up functionalities. However, after fetching the register API from the frontend, it is displaying an error message "please fill all fields" even though I have provided validation for al ...

javascriptnode.jsreactjsexpressmern

Ways to display a specific HTML element or tag depending on the given prop in VueJs

When working with Vue.js, it's important to remember that a <template> can only have one root element. But what should be done if you need to render different html elements based on a prop? For instance, let's say we have a <heading> ...

javascriptvue.js

Empowering Components with React Hooks

I am currently in the process of transitioning from using class components to React hooks with the Context API. However, I am encountering an error and struggling to pinpoint the exact reason for it. Here are my Codes: // contexts/sample.jsx import React ...

javascriptreactjsreact-hooksreact-context

Create a chronological timeline based on data from a JSON object

Here is a JSON object generated by the backend: { "step1": { "approved": true, "approvalTime": "10-11-2021", "title": "title 1", "description": "description 1" ...

javascriptreactjstypescriptmaterial-uireact-typescript

Can a circular design incorporating an arrow and gradient background be created?

I'm looking to create a circular design with an arrow and a gradient inside that can adjust dynamically based on screen resizing. I know it can be done using an image, but I'm wondering if it's possible to achieve this effect using just a si ...

htmlcss

Vue: Dragover event experiencing delayed responses from elements

One part of my webpage consists of two columns, a left column and a much larger right column. The right column contains around 1500 rows of components, each row having 5 div cells. I have set up a dragover event on the parent element that encompasses these ...

javascriptvue.jsdrag-and-drop

What is the reason behind JSON.parse returning null when the parameter is null?

When null is passed to JSON.parse, it returns null without any explanation in the documentation. Is there a specific reason for this behavior? Some other things to consider: This might be related to type conversion, as even passing JSON.parse("null") res ...

javascript

What are the steps to effectively set up a provider service in Angular.js?

What are the recommended practices or patterns for configuring a provider within a config block, similar to how $locationProvider and $routeProvider are configured? It is my understanding that only providers can be configured within config blocks. The co ...

javascriptangularjs

Encountering a 500 Internal Server Error in Next.js immediately after invoking the useEffect Hook within a 404 Page

In my code, I utilize the useEffect hook to trigger a setTimeout function inside it in order to automatically redirect the user back to the home page after 3 seconds using the useRouter hook from Next.js and calling the push method on it. Everything works ...

javascriptreactjsnext.js

The panup and pandown events in Ionic 2 seem to be malfunctioning

In my Ionic 2 project, I am currently working on implementing a drag and drop feature. To achieve this, I have utilized the following event in Ionic 2: <div (press) = "onDragInit(item, $event)" (panstart)="dragStart($event)" (panup)="onDra ...

javascripttypescriptionic-frameworkionic2hammer.js

Executing function with ng-click in AngularJS only on the second click of the button

Currently, I am studying AngularJS and working on an exercise that involves using the ng-click function. Strangely, I am only able to view the result after clicking upload for the second time. I am trying to display my json content but it's not workin ...

javascriptjqueryhtmlangularjs

D3.js is a powerful tool for defining a color scheme, where the domain represents a specific range of colors and

I am in the process of building a color scale where the domain consists of a selection of colors, and the range includes a specific set of "subcolors." To better illustrate this concept, let's use an example scenario. I aim to create a function that, ...

javascriptd3.js

Using AngularJS to pass a parameter to a directive's template

My basic set looks like this HTML <linear-chart chartData="myArray" height="666"> </linear-chart> JS ... ... app.directive('linearChart', function($window){ return{ restrict:'EA', template:"<svg ...

javascriptangularjs

Resetting the continuous scroll feature to display newly fetched results using AJAX technology

I have a filter form that, when changed, populates a container div (#results) with newly filtered results from a database. However, the Infinite Ajax Scroll plugin displays the results of the first search on the second page after changing the filter. On th ...

phpjqueryajaxinfinite-scrolljquery-ias

Transforming each element of an observable array by updating their properties with data retrieved from an ajax request using knockout

In my ViewModel "AppViewModel", I am fetching JSON data to create the model. One of the properties, "totalSessions", requires an ajax call to be fetched. While my code runs without errors, the view does not update as expected. var jsonapparray = []; ...

javascriptjqueryajaxknockout.jsko.observablearray