Styling autocomplete view

7 posts, 1 answers
  1. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 23 Feb Link to this post

    Hi all.

    I am using the trial version of NativeScript UI, downloaded yesterday, version 1.6.0.063.

    I am unable to apply a style to the autocomplete view, I always get a white background in the SuggestionView and suggestionItems are spaced vertically (as shown in the attached image 1).

    I used the code from the sample in the documentation downloaded with the component, i just applied a couple of classes or inline style to try to achieve the desired result (image 2).

    <ACTextField:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}"
        tokenAdded="{{ onTokenAdded}}"
        suggestMode="SuggestAppend" displayMode="Plain" completionMode="StartsWith" class="searchTextField">
        <ACTextField:RadAutoCompleteTextView.suggestionView backgroundColor="magenta">
            <ACTextField:SuggestionView suggestionViewHeight="300" class="suggestion-view" backgroundColor="magenta">
                <ACTextField:SuggestionView.suggestionItemTemplate backgroundColor="magenta">
                    <StackLayout orientation="vertical" padding="10" class="suggestion-element" backgroundColor="#07354c" margin="0">
                        <Label text="{{ text }}" margin="0" color="#ffffff"></Label>
                    </StackLayout>
                </ACTextField:SuggestionView.suggestionItemTemplate>
            </ACTextField:SuggestionView>
        </ACTextField:RadAutoCompleteTextView.suggestionView>
    </ACTextField:RadAutoCompleteTextView>

     

    CSS class selectors doesn't work at all, for example I am trying this and only the first one on the main textfield works:

    .suggestion-element {
        color: #f8e;
        background-color: #07354c;
        margin: 0;
    }
    .suggestion-element Label {
        color: #ffff00;
        background-color: #0000ff;
        margin: 0;
    }
    .suggestion-view {
        background-color: #07354c;
    }

     

    Any help appreciated, thank you very much,

    Christo_

  2. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 23 Feb in reply to christo Link to this post

    Update.

    Sorry, in the CSS code above the first rule was missing (the only that actually works), this:

    .searchTextField {
        font-family: 'GT America';
        font-weight: 300;
        font-size: 18;
        color: #000000;
        background-color: #ffffff;
        padding: 15 20;
        border-radius: 2;
    }
  3. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 23 Feb in reply to christo Link to this post

    Apparently I could achieve the result setting the height of the inner StackLayout equal to the SuggestionView suggestionViewHeight (300). Only inline, css classes of inner elements don't work.

  4. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 23 Feb in reply to christo Link to this post

    After setting the height of the StackLayout in suggestionItemTemplate I am still getting a very strange behaviour (random results with empty slots in between, see the attached animated gif).

  5. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 23 Feb Link to this post

    Hello Christo,

    After some research and test on our side, it appears that indeed the SuggestionView can not be styled for iOS (while it will be style successfully in Android by applying a global background color for the RadAutoCompleteTextView). I am glad that you have found a solution, although in your case setting the height of the internal stack layout as big as the whole suggestion view the user will have to scroll through the possible suggestions to see them all.(which might be undesired UX)

    To prevent unwanted hidden suggestions, there is another workaround. What you can do is access the native control behind the suggestion view and change its natural background color.
    e.g.:

    your-page.xml
    <ACTextField:RadAutoCompleteTextView loaded="onRadAutoLoaded" id="autocmp" items="{{ dataItems }}" tokenAdded="{{ onTokenAdded}}" suggestMode="SuggestAppend" displayMode="Plain" completionMode="StartsWith" class="searchTextField">
    The only difference in the XML file is that I am using the loaded event to get a reference to the control (the same can be achieved with the id and getViewById method).

    your-page.ts
    export function onRadAutoLoaded(args: AutoCompleteEventData) {
      var autocomplete = <RadAutoCompleteTextView>args.object;
     
      if (app.ios) {
        console.log(autocomplete.ios); // TKAutoCompleteTextView from http://docs.telerik.com/devtools/ios/api/Classes/TKAutoCompleteTextView.html
     
        var radIOS = autocomplete.ios;
     
        var wantedColor = new Color("#07354c");
        radIOS.suggestionView.backgroundColor = wantedColor.ios; // NOTE that we are using the iOS color
     
      }
    }

    Now the suggestionView will be set with the desired color and there is no need to set the same height for each suggestion (which would cause the suggestions to be hidden and always in need of scrolling).
    Using this workflow you can also have direct access to any native elements

    Meanwhile. I have logged this one as a bug here so that our developers can handle this one and provide out of the box implementation for styling the SuggestionView.

    Regards,
    Nikolay Iliev
    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.
  6. christo
    christo avatar
    11 posts
    Member since:
    Feb 2017

    Posted 23 Feb in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    thank you very much: your solution worked like a charm.

    Sorry, can I bother you with another question about style and elements in autocomplete?

    This is a location search and I would like – on focus – to prepend a default clickable “near me” item to results, like in the attached image. Do you think it is possible or can you address me to a way to approach it?
    If not, I will find a different solution for that choice.

    Thank you again,
    C_

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 23 Feb Link to this post

    Hey Christo,

    Glad to head the workaround was applicable for your case!

    Regarding your new request - at this very moment, the feature you are looking for is not implemented for RadAutoCompleteTextView. Still, we have this ni mind as the original widgets that stand behind it has similar functionalities which can also be implemented in the nativeScript versions. I've logged this request here - you can track its development and also join the thread if you have ideas or further suggestions.

    Regards,
    Nikolay Iliev
    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