Can flexbox be utilized on iPhone 4/iOS4, or is there a backup option available?

I have been scouring the internet but haven't found a solution yet. I am trying to make my flexbox grid rows compatible with iPhone 4, but I can't seem to make it work. The version of Safari on iOS4 does not support the new flexbox syntax, so I tried using a combination of old and new syntax based on suggestions from my research. However, this approach is not working for me:

.row-eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

I have a header with elements that I want to center, which I can achieve using flexbox:

<div class="row row-eq-height">
  <div class="col-xs-12">
    <button class="center-y">Some button</button>
  </div>
</div>

Just to clarify, the center-y class is not causing the issue. It is simply illustrating what I am aiming to accomplish.

If there is an error in my solution, please let me know. If not, is there a way to provide a fallback option to make it work?

I am testing on iPhone 4 using browserstack, so there could be a glitch in their service that I am unaware of.

ioscssiphonetwitter-bootstrapflexbox

Answer №2

If you want to maintain responsiveness while using vertically aligned inline-blocks, remember that whitespace is crucial when working with inline-block elements. Be sure to remove it or comment it out to avoid any layout issues.

<style>
    .vertical-middle {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
</style>

<div class="row">
    <div class="col-xs-12 col-sm-6 vertical-middle">
        <p>
            Insert your long text here
        </p>
    </div><!--
    --><div class="col-xs-12 col-sm-6 vertical-middle">
        <button>Click me</button>
    </div>
</div>

Answer №3

Absolutely, it is possible to achieve this as long as you do not require a flex-wrap, which is not supported by -webkit-box. To make flexbox work effectively, you need to assign a flex-grow value of 1 or define a flex width. In the old -webkit-box model, flex-grow is indicated by: -webkit-box-flex: 1;

Once the flex-item (.col-xs-12) has the ability to grow, you can easily center the button using text-align. Check out this fiddle for an example.

Flexbox Tip: To write CSS that is compatible with older browsers, consider using a useful flexbox code generator with the "Generate legacy flexbox styles" option enabled. This tool will automatically generate the necessary CSS code equivalent to apply for the older "box-flex" 2009 specification.

You can also explore and test the capabilities of the old flexbox model using this flexiejs playground. Most modern versions of Safari, Chrome, Firefox, and even Edge should be able to handle it as intended.

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

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

htmlcssresponsive-design

Creating art using metal mesh techniques

I'm trying to replicate the feature shown in the picture below. The numbers indicate the touch order on the screen and the dots represent the position. I want to achieve a similar effect. While we can accomplish this using the normal drawing index pr ...

iosmetalmetalkit

"Enhance the information displayed when hovering over the content

I am working on an HTML menu and I need to keep the markdown as is. The requirement is to have the content expand on hover over the "-link." <div class="container"> <div class="first-div-in row-menu" data-menu-block="first-div-in">Title</ ...

javascriptjqueryhtmlcss

Mastering the application of map, filter, and other functions in Angular using Observables

After creating this Observable: const numbers$:Observable<any>=Observable.create((observer)=>{ for(let i=0;i<5;i++) observer.next(i); }) I attempted to use map and filter as shown below: numbers$.pipe(map(x=>{x+110})).subscr ...

htmlcssangulartypescriptfrontend

The title is positioned at a different level compared to the ion-buttons in the toolbar

I am facing a challenge with the positioning of the logo in IOS compared to Android. On Android, the logo and buttons are aligned at the same height, but on IOS the logo appears higher than the buttons. Here is my code snippet: <ion-header> <i ...

htmlcssionic-framework

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

javascripthtmlcssjscolor

Incorporating a scrolling background image behind my other <div> columns

I've been working on a website for a relative and have organized the page into columns wrapped in div elements, However, I'm struggling to get the columns centered over the scrolling background image, If I place the background div element at th ...

jqueryhtmlcssbackground-image

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

iphoneioscss

The ultimate guide to leveraging UIApplication handleOpenURL Notifications

I've been attempting to manage UIApplication Notifications in order to retrieve URL Schemes within the current open view. Despite trying a variety of notifications, I'm unsure of which object actually contains the URL Schemes. NSNotificationCen ...

iosnotificationsuiapplicationurl-scheme

Effortlessly change fonts across the entire iOS application at once!

I have developed an app for a client at work and it is already available on the app store. However, my client now requires me to modify the font of all labels/textviews or any text in the app to a customized font. Is there a way I can make this change in ...

iphoneobjective-ciosipadfonts

Modify the CSS selector for a dropdown menu element upon selection

I have customized a select box using CSS, but I am facing an issue where the custom arrow remains upward even after selecting an option. I want the arrow to point downwards once an option is chosen and revert to the default position when clicked outside. ...

htmlcss

Icons and texts are not appearing in the Bootstrap Navbar

I'm having an issue with displaying the brand logo along with a compact disk image and some text. The code works fine everywhere except within the tag.</p> <p>Here's the code snippet I'm working with, using Django on the backend ...

htmlcssdjangobootstrap-4font-awesome-5

Customizing Column Background Color with AngularJS

https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...

javascripthtmlcssangularjsweb-applications

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

What is the best way to vertically align a Material UI component to occupy the remaining space within a container

Issue with Material UI/Grids for Login Page As a newcomer to Material UI/Grids, I am currently working on creating a login page where the layout is split into two parts. The left side occupies 5 column spaces while the right side takes up 7 column spaces. ...

cssreactjsmaterial-ui

What are some methods for implementing infinite scroll on a Scroll View within an Xcode project?

Within my app, I have a Scrollview that displays multiple slides. The current behavior is such that when the last slide (for example, slide 5) is reached, the scrolling stops to the right, and when you go back to the first slide, it stops scrolling to the ...

iosxcode

How to Achieve Seamless Vertical Scrolling Through Clicking a Button

I'm currently working with Bootstrap 4 Modal and have removed the Overflow-Y (ScrollBar) to enhance the design. However, I've also incorporated a function with two buttons (Up & Down) using JavaScript to facilitate easier navigation for users. Th ...

javascripthtmlcssbootstrap-4bootstrap-modal

jQuery UI dynamically adjusting content layout based on browser size changes

Having an issue with my custom accordion script where resizing the browser causes formatting problems in one of the sections. I want the content to remain intact and to utilize a scrollbar if necessary to view the content. The problem is visible in section ...

javascriptjqueryhtmlcssjquery-ui

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

htmlcssbootstrap-4

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

htmlcssexpand