On menu-item tap, item not high-lighting

[dash]

On tapping a menu, I'd like to see the item high-light and then revert to normal color - some visual feedback.

I don't see anything happening.

I'm using nativescript-theme-core with the scss definitions.

Should it be working using the default scss definitions?

 

[Nikolay Tsonev]

Hi,
Thank you for your interest in NativeScirpt.

In case you are using Button component for your the menu you could set -active  CSS classes to the component while using -theme-core. This should highlight the component on tap for both iOS and Android.

For Example:

<Button text="Test" tap="" class="btn btn-active" />

Hope this helps.
Regards,
nikolay.tsonev
Telerik by Progress

[dash]

Yes that's what I discovered also.

But btn class creates a button with a border and a shadow all around it - I wasn't able to turn that off.

 

[Nikolay Tsonev]

Hello,
I reviewed that case again on my side, however applying  class to the component do not attach border and shadow.
Regarding that, when we set -active, the background will be changed only on tap. For your convenience, I am attaching gifs.
Could you also verify, whether you have set some extra CSS style to the component?

Let me know, whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress

[dash]

Can you apply that to a button inside RadSideDrawer?

 

                  <StackLayout class="sidedrawer-list-item">
                    <Button text="Download" class="sidedrawer-list-item-text btn btn-active"/>
                  </StackLayout>

[Nikolay Tsonev]

Hello,

I tested the same scenario while creating RadListView with buttons and the highlight of the component work as expected.
For your convenience, I am attaching sample code from the project, which I use for testing.
It would help if you could provide some more info about the device, where you are testing the app and if you could send us sample project, which could be debugged locally.

XML

<Page  loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <lv:RadListView items="{{ dataItems }}" >
        <lv:RadListView.listViewLayout>
            <lv:ListViewLinearLayout scrollDirection="Vertical"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <StackLayout class="sidedrawer-list-item">
                    <Button text="Download" class="sidedrawer-list-item-text btn btn-active"/>
                  </StackLayout>
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</Page>

TypeScript

import viewModel = require("./getting-started-model");
export function onPageLoaded(args){
    var page = args.object;
    var items=[];
    for (var i = 0; i < 10; i++) {
                items.push("test");
            }
    page.bindingContext = {dataItems:items};
}

In the meantime, you could also check, whether "-list-item-text" class apply some style to the border.

I look forward to hearing from you

Regards,
nikolay.tsonev
Telerik by Progress

[dash]

I'm on Android with the latest software.

I created a test project with "tns create myApp --template tsc".

Then in main-page.xml, I changed Button class to "btn btn-active".

I can't attach images - but the TAP button has a border with shadows around it.

I looked at the css file - and no where is the border being set.

nativescript-theme-core is installed.

I'm using SCSS - but this simple test file seems to have the same problem.

If I remove all class from Button element - the button has a gray background - no idea how that's being set.

 

There doesn't seem to be a way to attach files :(.

 

[Nikolay Tsonev]

Hello,
Thank you for the attached steps for reproducing.
I follow them and tested this case on my side and was able to reproduce this scenario only on Genymotion emulator. 
However, this issue is not reproduced on Android default emulator. Could you try to set up new AVD emulator, while following the instructions in this article and to verify, whether you will have the same problem?

If you still have an issue, please provide some more info about your environment(CLI, node versions) and for the emulator or device, which has been used for testing.

Regarding ticket submit, you should be able to attach a file to the ticket. At the and of the ticket there should be a "Select file" button as it has been shown in the attached image.

Hope this helps
Regards,
nikolay.tsonev
Telerik by Progress

[dash]

Thanks for the support.

I re-created a new tsc project.

Set the button class to "btn btn-active". I get an outline with shadow.

I commented out all CSS definitions, I get a gray background button.

 

My platform is Android emulator running (not Geny) on Windows w/ Android 6.0 API 23.

My setup is Node 6.9.1.

NS 2.5.3 core 2.5.2 and tns-android 2.5

 

Since I commented out all CSS and still getting the gray background,

Looks like by default button is being styled by Android.

Enabling the CSS and setting to class "btn btn-active", clears the background and has a gray outline w/ shadow.

 

REASON FOR ALL THIS - For the sidedrawer, I'm just trying to create tapped effect when I click on a sidedrawer item. Seems like this can only be done on a Button (not a Label). Using buttons I'm getting this outline that I cannot turn off.

 

p.s. still no upload option.

 

[Nikolay Tsonev]

Hello,

Could you send us your sample project? This will help us to verified your exact scenario and to debug this case on our side.

I have tested applying this CSS classes on a Button inside the SideDrawer, however, still everything seems to work as expected:
Sample:

XML

<Page xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded"

    navigatedTo="onNavigatedTo" 

    xmlns:dpg="nativescript-telerik-ui-pro/sidedrawer/drawerpage"

    xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer"

    xmlns="http://www.nativescript.org/tns.xsd">

    <navigation.actionBar>

        <ActionBar title="Getting started" />

    </navigation.actionBar>

 

    <dpg:DrawerPage.sideDrawer>

        <drawer:RadSideDrawer id="sideDrawer">

          <drawer:RadSideDrawer.drawerContent>

            <StackLayout cssClass="drawerContent">

              <StackLayout cssClass="headerContent">

                <Label text="Navigation Menu"/>

              </StackLayout>

              <StackLayout cssClass="drawerMenuContent">

                <Button text="Primary" cssClass="btn btn-active" />

                <Button text="Social" class="btn btn-active" />

                <Button text="Promotions" cssClass="drawerSectionItem" />

                <Button text="Labels" cssClass="drawerSectionHeader" />

                <Button text="Important" cssClass="drawerSectionItem" />

                <Button text="Starred" cssClass="drawerSectionItem" />

                <Button text="Sent Mail" cssClass="drawerSectionItem" />

                <Button text="Drafts" cssClass="drawerSectionItem" />

              </StackLayout>

              <Button text="Close Drawer" tap="{{ onCloseDrawerTap }}"/>

            </StackLayout>

          </drawer:RadSideDrawer.drawerContent>

        </drawer:RadSideDrawer>

    </dpg:DrawerPage.sideDrawer>

 

    <StackLayout >

      <Label text="{{ mainContentText }}" textWrap="true" cssClass="drawerContentText"/>

      <Button text="Open drawer" tap="{{ onOpenDrawerTap }}" cssClass="drawerContentButton"/>

    </StackLayout>

</Page>



Thank you in advance for your cooperation.
Regards,
nikolay.tsonev
Telerik by Progress

[dash]

The issue is I'm trying to get a button with no background/border.

Your screenshot has buttons that have a background color -

In all fairness it's not particular to RadSidedrawer - it's a {N} issue.

So I'll close this issue here.

 

[Nikolay Tsonev]

Hello,
I was able to reproduce this behavior on one of our devices. However, this seems to be something expected for Android.

To remove the shadow of the component you could setup the borderWidth and the borderColor for the Button. 
For example:
XML

<StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>

CSS

.btn{
    border-color: transparent;
    border-width: 1;
}

Hope this helps.
Regards,
nikolay.tsonev
Telerik by Progress