nativescript-dev-webpack

nativescript-dev-webpack copied to clipboard

Please refers this issuehttps://github.com/NativeScript/nativescript-dev-webpack/issues/296

Hi @NickIliev,

I've tested this and have found that there is a problem with iOS ActionBar background image. I've pulled this repo to check and changed the background colour to pink as the previous colour was too close to the background image colour to notice a difference.

Please see attached image.

@sissingclay indeed it seems at this point (tested with [email protected]) the ActionBar is not supporting background-image directly. However, you could easily create a custom ActionBar layout like this

<ActionBar title="Home" class="action-bar">
    <StackLayout class="my-bar" width="100%" height="100%"></StackLayout>
</ActionBar>

where the CSS is something like this:

.action-bar {
    background-color: green;
}

.my-bar {
    color: #F00;
    font-size: 24;
    text-align: center;
    background-image: url("https://d2odgkulk9w7if.cloudfront.net/images/default-source/logos/ns-logo-shadowed-min.png?sfvrsn=16b60efe_2");
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}

Here is a Playground app demonstrating the above

I'm trying to get the full Action Bar to have a background image. On Android, this worked by simply setting the background-image value in an ActionBar CSS class. However, the same code doesn't work on iOS.

When I tried to set the background image of an inner layout, the left-side padding pushes the image to the right. Is there a suggested way to fix this? I tried by setting the padding to 0, which did not solve the problem, as well as overriding the margins of the layout.