英文:
how to make 2 span under mat-option to have left and right align in angular material auto complete
问题
Here is the translated code portion you provided:
<mat-form-field class="example-full-width">
<input #stateInput (keyup)="0" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (onSelectionChange)="stateInput.value !=undefined && onEnter($event)" *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<span>Population: {{state.population}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Please note that the code is the same as the original, but with HTML entities for special characters to ensure correct rendering.
英文:
i am using angular material auto complete, here i have option dropdown where i have 2 span 1st span must be left align and 2nd span to be left, i tried with absolute position setting to 2nd span but responsiveness gives issue.
Html:
<mat-form-field class="example-full-width">
<input #stateInput (keyup)="0" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (onSelectionChange)="stateInput.value !=undefined && onEnter($event)" *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<span>Population: {{state.population}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
答案1
得分: 1
将这些跨度包装到另一个标签中，然后对该新标签应用display:flex和justify-content:space-between。
您还需要将跨度宽度扩展到新标签和Material的.mat-option-text，例如，我应用了width:100%以占用整个可用空间。
这里是您的代码更新。
英文:
You should wrap the spans into another tag, then apply the display:flex and justify-content:space-betweeen to that new tag.
You also need to stretch the span width to both the new tag and the Material .mat-option-text, I applied a width:100% for instance to take the whole space available.
Here is your code updated.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论