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.

asked Nov 10 at 19:19

Ratna

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

add a comment |

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.

asked Nov 10 at 19:19

Ratna

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

add a comment |

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.

asked Nov 10 at 19:19

Ratna

768

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

asked Nov 10 at 19:19

Ratna

768

asked Nov 10 at 19:19

Ratna

768

asked Nov 10 at 19:19

Ratna

768

asked Nov 10 at 19:19

Ratna

768

asked Nov 10 at 19:19

Ratna

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

add a comment |

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

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

add a comment |

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.

answered Nov 10 at 20:53

Sujil Maharjan

44728

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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.

answered Nov 10 at 20:53

Sujil Maharjan

44728

add a comment |

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.

answered Nov 10 at 20:53

Sujil Maharjan

44728

add a comment |

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.

answered Nov 10 at 20:53

Sujil Maharjan

44728

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.

answered Nov 10 at 20:53

Sujil Maharjan

44728

answered Nov 10 at 20:53

Sujil Maharjan

44728

answered Nov 10 at 20:53

Sujil Maharjan

44728

answered Nov 10 at 20:53

Sujil Maharjan

44728

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky