White statusbar

Bug Reports
1

For some reason the status bar on both android and iOS has turned white when previously before I updated to the last version of fuse, was the system default.

I haven’t changed my code at all, the status bar is declared in the outer layer of the app inside a dock panel and is docked to the top.

Anybody know why this is, and how I can get it back to normal or change the colour?

Many thanks,
Casey

2

Hi,

There are two aspects of the status bar:

  1. Whether or not your app content is filling up the space behind the status bar. If you use a ClientPanel or StatusBarBackground, the space behind the status bar will not be occupied by your app content, and you will be seeing the <App Background=".. color.
  2. On Android, you can also set a OS-drawn fill color for the status bar. By default in more recent Fuse versions, it is transparent, so you have to set it like this: <Android.StatusBarConfig Color="..

Hope that helps. Without seeing screenshots and code, it is hard to give a more specific response.

3

Hey Anders I think this should be something that should be easily linked in the docs, I remember when I first joined the Fuse community, lots of people had statusbar problems. Now things have changed with StatusBar since 0.20 so it should be something that is on the left side navigation in the docs explaining exactly how it works like you did above. Thanks.

4

Same here. I also have the white statusbar but haven’t done anything to it. It wasn’t white in older versions of Fuse though.

file
yDpWUkX4HQms-image-1472574033866.png720×1280

5

Yeah, the exact same as me :slight_smile:

Edit:
I will post code later, sorry about the delay haven’t been able to work on the app much lately. I’m on mobile at the moment so can’t post code till I get home.

Edit 2:
Here’s the code for my MainView.ux:

<App>

    <JavaScript File="Backend.js"/>
    <!-- INCLUDE THE COLOR PALLETE -->
    <ColorPalette/>
    <!-- Declare the Icon font (place in ./fonts folder) -->
    <Font File="Fonts/MaterialIcons-Regular.ttf" ux:Global="materialIcon" />
    <!-- Declare the Icon class -->
    <Text Font="materialIcon" ux:Class="Icon" Color="icons"></Text>

    <!-- Declare the Roboto font (place in ./fonts folder) -->
    <Font File="fonts/LemonMilk.otf" ux:Global="medium" />
    <Font File="fonts/LemonMilk.otf" ux:Global="regular" />




    <DockPanel>
        <StatusBarBackground Dock="Top"/>
        <BottomBarBackground Dock="Bottom" IsEnabled="false"/>

        <Router ux:Name="router" BackButtonAction="GoBack"/>


        <WhileTrue Value="{logout_popup_visible}">
            <LogoutPopup Layer="Overlay"/>
        </WhileTrue>

        <Navigator DefaultTemplate="login">
            <Login ux:Template="login" router="router" />
            <Home ux:Template="home" router="router" />
            <Health ux:Template="health" router="router" />
            <Social ux:Template="social" router="router" />
            <Physical ux:Template="physical" router="router" />
            <News ux:Template="news" router="router" />
            <Sharp ux:Template="sharp" router="router" />
            <Contact ux:Template="contact" router="router" />
            <Tos ux:Template="tos" router="router" />
            <Mental ux:Template="mental" router="router" />
            <ReportAbsence ux:Template="reportabsence" router="router"/>
            <AboutUs ux:Template="aboutus" router="router"/>
        </Navigator>
    </DockPanel>

</App>
6

I’ve just set the <App Background=".. and this has done the trick for me!:slight_smile:
Thanks

7

Hey Casey :slight_smile: Awesome! So what exactly did you write in the Background Attribute of the App tag?

8

Hi Falco!

I set mine to <App Background="#000"> as I wanted the top bar to be black:)

9

Works like a charm! Thanks mate!

10

No problem, thanks Anders also haha!

11

Definitely! Just tried to set the Background of “StatusBarBackground”. This works as well (and doesn’t set the Background of the entire app to black or something else).

12

Falco Liebau wrote:

Definitely! Just tried to set the Background of “StatusBarBackground”. This works as well (and doesn’t set the Background of the entire app to black or something else).

Okay cool that might be useful in future, thanks:)