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
But I would like to keep the placeholder same like below if there are selected items or not.
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
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
But I would like to keep the placeholder same like below if there are selected items or not.
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
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
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
But I would like to keep the placeholder same like below if there are selected items or not.
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
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
But I would like to keep the placeholder same like below if there are selected items or not.
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
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
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
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
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 |
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.
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
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
44728
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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