Configuration of flexbox for cordova on a Samsung Galaxy Tab running on Android version 4.1.2

I am having trouble using flexbox css to design a cordova app on a Galaxy Tab running Android 4.1.2

Here is the CSS code I am currently using:

.container {
    /*display: flex;
    display: -webkit-box;*/
    display: -webkit-flex;
    /*justify-content: space-between;*/
    -webkit-justify-content: space-between;
    width: 83%;
    margin-left: auto;
    margin-right: auto;
}

The result that I am getting is different from what I expect, as shown in the image below:

https://i.sstatic.net/QCTh8.png

Do you have any idea why the CSS display differs between the emulator and the actual device?

Thank you!

androidcsscordovaflexbox

Answer №1

.box {
    display: -webkit-box;
    -webkit-box-pack: justify;
    width: 83%;
    margin-left: auto;
    margin-right: auto;
}

Did the magic

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

What is the method for choosing a parent element over a child element in CSS?

I am struggling with styling a menu that has a structure like this: <div class="myclass" > <ul> <li> <li> <------- need to style the parent li and not the child li <li> <ul ...

css

Obtain GPS information in Android even when the application is operating in the background using LocationListener

I am encountering an issue with my Android application. I require an application that can run in the background and continuously fetch GPS location data even when another application is open. While I have created start and stop buttons to retrieve GPS loca ...

androidbackgroundgps

Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading. $(window).on("load", function() { $(".loading").fadeOut("slow"); ...

javascripthtmlcsspreloader

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

I encountered an issue where I was unable to customize the styling of the

I'm facing an issue where I cannot override the style using `className` on a `Button`. Interestingly, the same style works correctly on a `TextField`. However, when I use the `style` prop, it allows me to successfully override the `Button` style. What ...

cssreactjsbuttonmaterial-uistyles

The table spills over the container and disappears underneath the navbar

After downloading a template table from the internet and customizing it to my liking, I encountered an issue where it does not adhere to the assigned settings (as shown in the image), but that's not the only problem. The dropdown navbar on my website ...

htmlcssnavbarcss-tables

Ensure that a v-card in Vuetify/Vue 2 is consistently square in shape, yet capable of adjusting its size dynamically

I am facing an issue where I am trying to make sure a v-card always maintains a square shape (or any other aspect ratio set), even if it means there is scrolling or cut-off text/components inside the card. For example, I want this v-card with lorem ipsum ...

cssvue.jsvuejs2vuetify.jsaspect-ratio

Centering the menu on the screen

I need help aligning the menu bar in the center. I have attempted to use text-align:center; but it is not working. You can view the website here. Any guidance would be appreciated. Thank you. <nav style="text-transform: uppercase;" id="site-navigation" ...

css

A Bootstrap navigation sidebar with a secure footer and a div that can be scrolled

In the image below, you can see that the scrollable TreeView in the sidebar is not functioning properly. Additionally, I need to have a fixed footer for this sidebar that remains in place when users scroll through the content. How can I resolve this? http ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Could you kindly clarify this for me? Looking to understand the private List<> name(List<> model, String name) method in Java

Can you please clarify the following for me? private List<> named(List<> collection, String identifier) ...

javaandroid

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-5

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss

The parcelable object in the appwidget provider consistently comes back as empty

Whenever I try to fetch a parcelable object from RemoteViewsService in the onReceive() method of AppWidgetProvider, I always end up with a null value. I tested passing string and int which worked perfectly, but when it comes to parcelable, I face this iss ...

androidandroid-appwidgetappwidgetprovider

How can I adjust the height and width of a checkbox input specifically for mobile screens?

Check out this code snippet: <div class="container-fluid mt-5"> <div class="row"> <div class="col-10"> Hello <br> Hello </div> <div class="col-2"> <input type="checkbox" class= ...

cssbootstrap-4

The Ionic search bar will only initiate a search once the keyboard is no longer in view

In my Ionic application, I have implemented a search bar to filter and search through a list. The filtering process is triggered as soon as I start typing in the search bar. However, the updated results are not displayed on the screen until I manually hide ...

javascriptandroidangulartypescriptionic-framework

choose the initial element within a class

Seeking a way to target the first element within each group of the same class? Consider the following scenario: <div class="group"> <div class="element"></div> <div class="element"></div> <div class="element"&g ...

htmlcssless

menu fails to expand when clicked in mobile view

Could someone please help me troubleshoot why the menu icon is not expanding in mobile view? I'm not sure what I did wrong. Here is the link for reference: Snippet of HTML: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ...

htmlcsstwitter-bootstrapresponsive-design

Two divisions placed side by side

The current structure I am working with looks like this: <div id="container"> <div id="msg"><p>Lorem ipsum dolor sit amet.</p></div> <div id="img"><div id="content"></div></div> </div> # ...

htmlcss

Creating an HTML table that adjusts to the screen height with square-shaped cells

var grid = document.getElementById("grid"); var size = 50; for (var y = 0; y < size; y++) { var currentRow = grid.insertRow(0); for (var x = 0; x < size; x++) { var currentCell = currentRow.insertCell(-1); currentCell.style.height = currentCell.styl ...

javascripthtmlcsshtml-table

What steps should I take to remove the strange gray drop shadow effect from my EditText fields?

I can't quite pinpoint the exact name of it.. but it appears distorted on certain devices. ...

android