Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices.

<div className="modal-row">
    <div className="col1">
        <span>{dict.YourServiceNumber}</span>
    </div>
    <div className="col2">
        <span>{this.props.mobileNumber}</span>
    </div>
</div>

MyCssFile.css:

.modal-row {
    display: flex;
}

.col1 {
    flex: 50%;
    text-align: left;
}

.col2 {
    flex: 50%;
    font-weight: bold;
    padding-left: 0px;
    text-align: right;
}

Although it functions correctly with iOS versions above 9 and desktop browsers, I need assistance in making it compatible with iOS 7/8 devices.

htmlcssreactjsbootstrap-4flexbox

Answer №1

According to the source, Flexbox is compatible with iOS Safari versions 7 and 8, but you must remember to use the -webkit- prefix.

To implement this, update your CSS as follows:

.modal-row {
    display: -webkit-flex;
}

.col1 {
    -webkit-flex: 50%;
    text-align: left;
}

.col2 {
    -webkit-flex: 50%;
    font-weight: bold;
    padding-left: 0px;
    text-align: right;
}

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

Using HTML to place an image tag close to an input element

I'm experiencing a strange issue where adding an img tag alongside an input and a span causes the input and span to shift downwards. <div> <span>Credit Points</span> <input type="text" name="credit_points" value="2.25"/> ...

htmlcss

Distance between cursor and the conclusion of the text (autofocus)

I discovered a method to automatically position the cursor at the end of a string using autofocus: <input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);"> ...

javascripthtmlautofocus

Tips for showing a multiline string in a textarea

Setting the value of a textarea is straightforward: var foo='<div>Some html</div>\r\nSome html<br /><br />\r\n\r\n<div >Some html</div>\r\n</b>'; $('#my_texta ...

jqueryhtmlajax

Safari 5.1.7 causing unusual behavior on the website

Despite running smoothly in most browsers, this website goes haywire and crashes on Safari when viewed on a Mac. I've attempted troubleshooting by removing the Google map, CSS transforms, and the Stellar jQuery plugin, but the issue persists. Does any ...

jqueryhtmlcsssafari

The phone number is not able to be clicked on

I have a phone number included in my markup that I would like to make clickable. Here is the code snippet: <h3 class="footer">Need assistance? Call <a href="tel:+180006XXXX">1800 06X XXX</a></h3> However, upon running this code, I ...

htmlcss

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

What is the best way to transfer information from a layout to its children within the app directory of Next.js?

One scenario I encounter frequently is the need for a button in a layout to toggle something within the components it contains. For instance, you might have a notifications button in a fixed layout that triggers a side panel to open in the main application ...

javascriptreactjsnext.js

Can elements be eliminated from a div based on their order?

Hello everyone, I am currently attempting to replicate this design using ReactJS, but I am facing challenges in getting my code to function as desired. The issue lies in positioning the profile picture next to the search bar on mobile devices, while it sh ...

htmlreactjssass

Tips for implementing a reusable instance of a class in (SSR) React (comparable to a @Bean in Spring)

I am currently developing a new application using Next.js and React (Server Components) in TypeScript. In order to showcase and evaluate the app, I need to support two different data sources that provide identical data through separate APIs. My goal is to ...

reactjstypescriptnext.jsdependency-injection

Retrieve Data with Conditions using the Json Placeholder API

I have been working on integrating my posts with the user table using the Json PlaceHolder API and nextJS for the past couple of days. Despite trying different approaches, I haven't been able to figure out the right logic yet. Any guidance or assistan ...

reactjsapiaxiosnext.jsjsonplaceholder

Discovering active path while utilizing dynamic routes - here's how!

Whenever I click on the project element in my HeadlessCMS with the URL /projects/slug-name, the projects button in my Navbar (LinkItem) does not highlight with a background color (bgColor). How can I modify this line of code: const active = path === href / ...

javascriptreactjsnext.js

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

Tips for updating Ref objects in React

In the process of fixing a section of my project, I'm encountering an issue where I have no control over how refs are being utilized. The Editable text elements are currently handled through refs and a state variable within the component that holds al ...

reactjstypescript

Analyzing and sorting two sets of data in JavaScript

I am currently working with two arrays that are used to configure buttons. The first array dictates the number of buttons and their order: buttonGroups: [ 0, 2 ] The second array consists of objects that provide information about each button: buttons = ...

javascriptarraysreactjsloopsarray.prototype.map

The .htaccess directive aimed at eliminating .html from the URL appears to be malfunctioning

Struggling to remove the .html extension from your page URLs? I've been trying various methods with the .htaccess file, but nothing seems to be working. I created an .htaccess file and placed it in the public_html directory. The code snippet I'm ...

htmlapache.htaccessweburl

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

htmlcss

Is there a way to combine a date picker and time picker to select both a date and

Is there a way to combine a date picker with a time picker? I'd like it to look similar to the image shown here: https://i.sstatic.net/VufGD.png ...

reactjsdatepickerdatetimepickermaterial-ui

The styling for buttons links is malfunctioning

I am currently developing my own version of Bootstrap and focusing on buttons and links. I have anchor tags within the button element, but the link styling is not displaying correctly. HTML <button class="btn-danger"><a href="#">Danger</a& ...

htmlcss

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

csshtml

Dealing with a failed login error in NextAuth.js

I've integrated NextAuth.js for authentication in my Next.js project. The login functionality is working smoothly, however, the page refreshes when incorrect credentials are entered without displaying any error message. I am looking to handle this err ...

reactjsnext.jsnext-auth