Angular 2 multi select show only the static placeholder









up vote
0
down vote

favorite












I am new to angular 4 and I started working on angular multiselect and using the following npm package



https://www.npmjs.com/package/angular2-multiselect-dropdown



I could able to configure this properly and also getting the selected and deselected items/events.



Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.



If any item is selected from the item the multi select box is converted like the below



enter image description here



But I would like to keep the placeholder same like below if there are selected items or not.



enter image description here



I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.










share|improve this question

















  • 2




    Please share a minimal Stackblitz sample replicating this issue.
    – SiddAjmera
    Nov 10 at 19:22










  • I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
    – johey
    Nov 10 at 19:26











  • Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
    – johey
    Nov 10 at 19:30














up vote
0
down vote

favorite












I am new to angular 4 and I started working on angular multiselect and using the following npm package



https://www.npmjs.com/package/angular2-multiselect-dropdown



I could able to configure this properly and also getting the selected and deselected items/events.



Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.



If any item is selected from the item the multi select box is converted like the below



enter image description here



But I would like to keep the placeholder same like below if there are selected items or not.



enter image description here



I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.










share|improve this question

















  • 2




    Please share a minimal Stackblitz sample replicating this issue.
    – SiddAjmera
    Nov 10 at 19:22










  • I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
    – johey
    Nov 10 at 19:26











  • Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
    – johey
    Nov 10 at 19:30












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am new to angular 4 and I started working on angular multiselect and using the following npm package



https://www.npmjs.com/package/angular2-multiselect-dropdown



I could able to configure this properly and also getting the selected and deselected items/events.



Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.



If any item is selected from the item the multi select box is converted like the below



enter image description here



But I would like to keep the placeholder same like below if there are selected items or not.



enter image description here



I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.










share|improve this question













I am new to angular 4 and I started working on angular multiselect and using the following npm package



https://www.npmjs.com/package/angular2-multiselect-dropdown



I could able to configure this properly and also getting the selected and deselected items/events.



Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.



If any item is selected from the item the multi select box is converted like the below



enter image description here



But I would like to keep the placeholder same like below if there are selected items or not.



enter image description here



I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.







css angular npm responsive-design






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 19:19









Ratna

768




768







  • 2




    Please share a minimal Stackblitz sample replicating this issue.
    – SiddAjmera
    Nov 10 at 19:22










  • I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
    – johey
    Nov 10 at 19:26











  • Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
    – johey
    Nov 10 at 19:30












  • 2




    Please share a minimal Stackblitz sample replicating this issue.
    – SiddAjmera
    Nov 10 at 19:22










  • I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
    – johey
    Nov 10 at 19:26











  • Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
    – johey
    Nov 10 at 19:30







2




2




Please share a minimal Stackblitz sample replicating this issue.
– SiddAjmera
Nov 10 at 19:22




Please share a minimal Stackblitz sample replicating this issue.
– SiddAjmera
Nov 10 at 19:22












I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
– johey
Nov 10 at 19:26





I don't have experience with this component, but it looks like you can customize the way a selected item is shown in the textbox: <angular2-multiselect ...> <c-badge> <ng-template let-item="item"> <label style="margin: 0px;">item.itemName</label> ... </ng-template> </c-badge> </angular2-multiselect> (cf. npmjs.com/package/…) Maybe you can try with an empty template?
– johey
Nov 10 at 19:26













Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
– johey
Nov 10 at 19:30




Maybe you could try to ask your question on the developer's Github page. github.com/CuppaLabs/angular2-multiselect-dropdown/issues
– johey
Nov 10 at 19:30












1 Answer
1






active

oldest

votes

















up vote
0
down vote













Currently, it looks like the feature is not there. However, there is a work around.



Workaround



You could hide the list that is shown. In your CSS, you can add this:



.c-list
display: none;



This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.






share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242560%2fangular-2-multi-select-show-only-the-static-placeholder%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    Currently, it looks like the feature is not there. However, there is a work around.



    Workaround



    You could hide the list that is shown. In your CSS, you can add this:



    .c-list
    display: none;



    This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.






    share|improve this answer
























      up vote
      0
      down vote













      Currently, it looks like the feature is not there. However, there is a work around.



      Workaround



      You could hide the list that is shown. In your CSS, you can add this:



      .c-list
      display: none;



      This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.






      share|improve this answer






















        up vote
        0
        down vote










        up vote
        0
        down vote









        Currently, it looks like the feature is not there. However, there is a work around.



        Workaround



        You could hide the list that is shown. In your CSS, you can add this:



        .c-list
        display: none;



        This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.






        share|improve this answer












        Currently, it looks like the feature is not there. However, there is a work around.



        Workaround



        You could hide the list that is shown. In your CSS, you can add this:



        .c-list
        display: none;



        This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 10 at 20:53









        Sujil Maharjan

        44738




        44738



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242560%2fangular-2-multi-select-show-only-the-static-placeholder%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Top Tejano songwriter Luis Silva dead of heart attack at 64

            政党

            天津地下鉄3号線