On menu-item tap, item not high-lighting

12 posts, 0 answers
  1. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 22 Mar Link to this post

    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?

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 22 Mar Link to this post

    Hi,
    Thank you for your interest in NativeScirpt.

    In case you are using Button component for your the menu you could set btn btn-active  CSS classes to the component while using nativescript-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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 22 Mar in reply to nikolay.tsonev Link to this post

    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.

     

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 23 Mar Link to this post

    Hello,
    I reviewed that case again on my side, however applying btn class to the component do not attach border and shadow.
    Regarding that, when we set btn-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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 23 Mar in reply to nikolay.tsonev Link to this post

    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>

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 23 Mar Link to this post

    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 "sidedrawer-list-item-text" class apply some style to the border.

    I look forward to hearing from you

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 23 Mar in reply to nikolay.tsonev Link to this post

    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 :(.

     

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 24 Mar Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  9. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 24 Mar in reply to nikolay.tsonev Link to this post

    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.

     

  10. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 27 Mar Link to this post

    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"
        <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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  11. dash
    dash avatar
    17 posts
    Member since:
    Nov 2016

    Posted 27 Mar Link to this post

    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.

     

  12. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 28 Mar Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top