iOS Select Overlapping Label - Bug?


I am experiencing a bug when using the react library with the iOS theme, Select and labelStyle of floating. Please see the code below and two screenshots. On first render when a default item is specified, the label overlaps the item. If I select the item again or change the item then it renders correctly.

Any workarounds or am I doing something incorrectly? Tested on Firefox and Chrome using V4.7.2. Thanks!

import React, {useState} from 'react';

import mobiscroll from "@mobiscroll/react";
import "@mobiscroll/react/dist/css/mobiscroll.min.css";

mobiscroll.settings = {
    theme: 'ios',

const locationList = [
        value: 1,
        text: 'Rosebank, Johannesburg',
        value: 2,
        text: 'Sandton, Johannesburg',

const Bug = () => {

    const [selectedLocation, setSelectedLocation] = useState(null);

    return (
        <mobiscroll.Form labelStyle="floating">
                        onSet={(event, inst) => setSelectedLocation(inst.getVal())}

export default Bug;

Hi @Imtiaz

Yes, I can confirm this is a bug in the 4.7.2 version. Until the fix comes out the following css inserted into the app, should fix it:

.mbsc-ios .mbsc-label-floating.mbsc-input .mbsc-label ~ input {
  height: 3.75em;
  padding-top: 1.5em;
1 Like

Hi @Imtiaz :wave:

I just wanted to let you know that we’ve just released a new version of Mobiscroll 4.7.3.
In this release we fixed the issue with the select floating label, so if you update to the latest version, you won’t need the workaround I sent you earlier.
Let me know how it goes :wink: