Multiple select weird comma

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Multiple select weird comma

majnor pro asked 7 years ago

I have very long options in my multiple select and when it shows the chosen option, it does it a bit unusual with the comma before the option e.g. Option 1 , Option 2 , Option 3 is there an easy way to get the comma to be placed behind the chosen option? Thanks, Maja

Damian Gemza staff answered 7 years ago

Hello majnor, Could you provide me your's array in .ts file with your's select options? I think, that you place comma in your's .ts file, and it's undesirable here. In example, take a look at my .ts code: 
optionsSelect: Array<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

{ value: '4', label: 'Option 4' },

{ value: '5', label: 'Option 5' },

{ value: '6', label: 'Option 6' },

{ value: '7', label: 'Option 7' },

{ value: '8', label: 'Option 8' },

{ value: '9', label: 'Option 9' },

];

}
And look at screenshot that shows my multiple select: https://screenshots.firefox.com/sV7Lj1qFKppeMQMS/localhost For me everything is working fine. Please provide me some screenshots and your's code. Best Regards, Damian

majnor pro answered 7 years ago

Hi Not sure how to add a file here, but this is the array I use for as [options] export const Q4dropdown = [{"value": 0, "label": "Alpha-crystallin hspX"}, {"value": 1, "label": "Bacteriophage CTXφ"}, {"value": 2, "label": "Botulinum neurotoxin (BoNT)"}, {"value": 3, "label": "Brucella virulence factor bvfA"}, {"value": 4, "label": "Dot/Icm secretion system"}, {"value": 5, "label": "Francisella Pathogenicity Island"}, {"value": 6, "label": "Heat shock protein htpG"}, {"value": 7, "label": "Intimin (eae)"}, {"value": 8, "label": "Plasmid pMT1"}, {"value": 9, "label": "Plasmid pO157"}, {"value": 10, "label": "Plasmid pPCP1"}, {"value": 11, "label": "Plasmid pXO1"}, {"value": 12, "label": "Plasmid pxO2"}, {"value": 13, "label": "Salmonella Pathogenicity Island SPI-1"}, {"value": 14, "label": "Salmonella Pathogenicity Island SPI-2"}, {"value": 15, "label": "Salmonella Pathogenicity Island SPI-3"}, {"value": 16, "label": "Salmonella Pathogenicity Island SPI-5"}, {"value": 17, "label": "Salmonella Pathogenicity Island SPI-7"}, {"value": 18, "label": "Secreted protein espA"}, {"value": 19, "label": "Secreted protein espB"}, {"value": 20, "label": "Shiga toxin"}, {"value": 21, "label": "Superoxide dismutase enzyme (SOD)"}, {"value": 22, "label": "Surface cell antigen Sca2"}, {"value": 23, "label": "TNF-alpha-Inducing protein (Tipalpha)"}, {"value": 24, "label": "Type II secretion system (T2SS)"}, {"value": 25, "label": "Type III secretion system (T3SS)"}, {"value": 26, "label": "Typhoid toxin"}, {"value": 27, "label": "Verotoxin"}, {"value": 28, "label": "virB operon"}, {"value": 29, "label": "Yersinia-like fimbrial gene cluster (YLF)"}, ]; Her you can see the result of the choise of two long ones in a small browser: https://screenshots.firefox.com/C6yBf7DxaGF8fG2S/localhost And the "," is in a weird place in the dom. It is in the same div->span as the choise but before,  so i cannot force it with css. 
Start your code here
<div class="multiple"> <!--bindings={"ng-reflect-ng-if": "false"}--> <!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}--> <div class="option"> <span class="deselect-option">, </span>Salmonella Pathogenicity Island SPI-1 </div> <div class="option"> <span class="deselect-option">, </span>Salmonella Pathogenicity Island SPI-2 </div> <!--bindings={"ng-reflect-ng-if": "false"}--> <!--bindings={"ng-reflect-ng-if": "true"}--><div class="toggle"> ... regards,  

Damian Gemza staff answered 7 years ago

Dear majnor, It's proper behavior. This looks same as on my screenshot, but you have very long options to select, and they are fitting only one in row, and this comma is automatically added to second row. We can't do anything with this because it's proper. You could try to increase width of your's select area, to fix your's case. Best Regards, Damian

majnor pro commented 7 years ago

I knew it was the length of the options that were the cause. But if there is nothing to do about it now i would like to subbmit a change request, put the comma behind the option and the hide the las comma with css with the last option. From the docs: NgForOf provides several exported values that can be aliased to local variables: $implicit: T: The value of the individual items in the iterable (ngForOf). ngForOf: NgIterable: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async). index: number: The index of the current item in the iterable. first: boolean: True when the item is the first item in the iterable. last: boolean: True when the item is the last item in the iterable. even: boolean: True when the item has an even index in the iterable. odd: boolean: True when the item has an odd index in the iterable. regards,

Damian Gemza staff commented 7 years ago

Thanks for your's report. We'll take a look at this, and we'll think how we can upgrade our Material Select in future. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
wibar
Pro User
10Support score
3Questions 1Answers
0Snippets likes 0Snippets