Can't set backgroundcolor to transparent on modal after update


#1

After updating to NS 3.0, I am not able to set background color of Modal dialog page to transparent on Android. It was working fine with NS 2.5 with tns-core-modules 2.4.2.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

  • CLI: 3.0.2
  • Cross-platform modules: (check the ‘version’ attribute in the
    node_modules/tns-core-modules/package.json file in your project)
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project)
  • Plugin(s): (look for the version number in the package.json file of your
    project)

┌──────────────────┬─────────────────┬──────────│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 3.0.2 │ 3.0.2 │ Up to date │
│ tns-core-modules │ │ 3.0.1 │ Not installed │
│ tns-android │ │ 3.0.1 │ Not installed │
│ tns-ios │ │ 3.0.1 │ Not installed │
└──────────────────┴─────────────────┴──────────

Please tell us how to recreate the issue in as much detail as possible.

Try creating a modal page with backgroundColor set to transparent.
Also tried setting background-color: transparent on css also tried setting backgroundColor="#00000000"

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

modalPage.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally">
    <GridLayout class="mainstack" rows="auto, auto" columns="auto">
    <Label text="  " class="avatar-circle-halo" row="0" />
    <Label text="&#xE7FB;" horizontalAlignment="center" class="avatar-circle-icon" row="0" />
    <GridLayout rows="auto, auto, auto, auto, auto" columns="auto" class="headerFooter" row="1">
        <Label text="Connect with Us" class="headingtxt align-center" row="0"/>
        <Button text="&#xf099; Twitter" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="1" id="twitter"/>
        <Button text="&#xf230; Facebook" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="2" id="fb"/>
        <Button text="&#xf16d; Instagram" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="3" id="insta"/>
        <Button text="&#xf166; YouTube" horizontalAlignment="center" tap="moveTo" class="socialbtn" row="4" id="youtube"/>
    </GridLayout>
    </GridLayout>
</Page>

modalPage.css

.mainstack {
    margin-left: 10;
    margin-right: 10;
    margin-top: 10;
    background-color: transparent;
    opacity: 0.8;
    border-radius: 10;
}
 
.socialbtn {
    font-family: FontAwesome, fontawesome;
    padding: 10;
    font-size: 24;
    background-color: #7D110C;
    color: white;
    border-radius: 15;
    height: 45;
    width: 160;
    margin-left: 20;
    margin-right: 20;
    margin-bottom: 10;
    margin-top: 2;
    text-transform: capitalize;
}
 
 
.headerFooter {
    background-color: white;
    border-radius: 10;
    width: 200;
}
 
.avatar-circle-icon {
    font-size:40px;
    height: 50;
    width: 50;
    color: #fff;
    background-color: #7D110C;
    border-radius: 30;
    margin-left: 12;
    margin-top: 3.75;
    margin-bottom: 3.75;
    text-align: center;
    font-family: MaterialIcons, Material Icons;
    vertical-align: middle;
}
 
.avatar-circle-halo {
    /*font-size:20;*/
    height: 60;
    width: 60;
    color: #fff;
    background-color: white;
    border-radius: 30;
    margin-left: 12;
    margin-top: 3.75;
    margin-bottom: 3.75;
    text-align: center;
    font-family: MaterialIcons, Material Icons;
    font-weight: normal;
    font-style: normal;
    font-size: 42px;   /*Preferred icon size */
}

Images for reference:

Before update->

After update->


How to set Background Color to Modal Page
#2

This post helped me: https://github.com/NativeScript/NativeScript/issues/4300#issuecomment-305398439