Mixing
Ionic Active Segment Not Highlighted when Multiple ngFor
I have a problem in using Ionic segments. I use dynamic values (ngFor) for the segment and its contents. The problem is, the selected active segment is not highlighted.
I have a simple array like this in my component, order-menu.ts:
public myCategories =
[{
catName: "Chicken",
},
{
catName: "Beef",
}];
public mySelCategory: string = "Chicken";
I want to display this segments in ionic app.
This is my template, order-menu.html:
<ion-segment [(ngModel)]="mySelCategory">
<ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
{{category.catName}}
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
I am able to show the data correctly using segment, however it does not highlight the active segment.
I noticed that if I do not include this:
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
, the active segment is shown correctly.
Can anybody help to troubleshoot this? Or any workaround? Thank you very much.
angular ionic-framework
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
add a comment |
I have a problem in using Ionic segments. I use dynamic values (ngFor) for the segment and its contents. The problem is, the selected active segment is not highlighted.
I have a simple array like this in my component, order-menu.ts:
public myCategories =
[{
catName: "Chicken",
},
{
catName: "Beef",
}];
public mySelCategory: string = "Chicken";
I want to display this segments in ionic app.
This is my template, order-menu.html:
<ion-segment [(ngModel)]="mySelCategory">
<ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
{{category.catName}}
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
I am able to show the data correctly using segment, however it does not highlight the active segment.
I noticed that if I do not include this:
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
, the active segment is shown correctly.
Can anybody help to troubleshoot this? Or any workaround? Thank you very much.
angular ionic-framework
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
add a comment |
I have a problem in using Ionic segments. I use dynamic values (ngFor) for the segment and its contents. The problem is, the selected active segment is not highlighted.
I have a simple array like this in my component, order-menu.ts:
public myCategories =
[{
catName: "Chicken",
},
{
catName: "Beef",
}];
public mySelCategory: string = "Chicken";
I want to display this segments in ionic app.
This is my template, order-menu.html:
<ion-segment [(ngModel)]="mySelCategory">
<ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
{{category.catName}}
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
I am able to show the data correctly using segment, however it does not highlight the active segment.
I noticed that if I do not include this:
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
, the active segment is shown correctly.
Can anybody help to troubleshoot this? Or any workaround? Thank you very much.
angular ionic-framework
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
I have a problem in using Ionic segments. I use dynamic values (ngFor) for the segment and its contents. The problem is, the selected active segment is not highlighted.
I have a simple array like this in my component, order-menu.ts:
public myCategories =
[{
catName: "Chicken",
},
{
catName: "Beef",
}];
public mySelCategory: string = "Chicken";
I want to display this segments in ionic app.
This is my template, order-menu.html:
<ion-segment [(ngModel)]="mySelCategory">
<ion-segment-button *ngFor="let category of myCategories" value="{{category.catName}}">
{{category.catName}}
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
I am able to show the data correctly using segment, however it does not highlight the active segment.
I noticed that if I do not include this:
<div [ngSwitch]="mySelCategory">
<div *ngFor="let category of myCategories">
<ion-list *ngSwitchCase="category.catName">
<ion-item>
{{category.catName}}
</ion-item>
</ion-list>
</div>
</div>
, the active segment is shown correctly.
Can anybody help to troubleshoot this? Or any workaround? Thank you very much.
angular ionic-framework
angular ionic-framework
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
asked Nov 20 '18 at 4:27
Brian Ivander T. P.Brian Ivander T. P.
749
749
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I solved it. I think the segment's border (the line below the selected active segment) is outside of its container. Thus when we have an item below it, the border is covered by that container.
I added this line in my order-menu.scss to check the border of active segment:
.segment-button.segment-activated{
border: 2px dashed black !important;
}
Now you can see that the bottom border is not visible.
As a workaround, I added a class to my segment HTML and scss:
<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">
.menuSegments{
margin-bottom: 5px;
}
Which then results to this:
I then remove the .segment-button.segment-activated class from my scss to get the default settings from ionic for the bottom border.
I am currently using "ionic-angular": "^3.9.2".
I think ionic team has solved this in ionic 4. This problem does not occur in ionic 4 (by today, 20 Nov 2018).
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
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',
autoActivateHeartbeat: false,
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
});
}
});
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%2f53386226%2fionic-active-segment-not-highlighted-when-multiple-ngfor%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
I solved it. I think the segment's border (the line below the selected active segment) is outside of its container. Thus when we have an item below it, the border is covered by that container.
I added this line in my order-menu.scss to check the border of active segment:
.segment-button.segment-activated{
border: 2px dashed black !important;
}
Now you can see that the bottom border is not visible.
As a workaround, I added a class to my segment HTML and scss:
<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">
.menuSegments{
margin-bottom: 5px;
}
Which then results to this:
I then remove the .segment-button.segment-activated class from my scss to get the default settings from ionic for the bottom border.
I am currently using "ionic-angular": "^3.9.2".
I think ionic team has solved this in ionic 4. This problem does not occur in ionic 4 (by today, 20 Nov 2018).
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
add a comment |
I solved it. I think the segment's border (the line below the selected active segment) is outside of its container. Thus when we have an item below it, the border is covered by that container.
I added this line in my order-menu.scss to check the border of active segment:
.segment-button.segment-activated{
border: 2px dashed black !important;
}
Now you can see that the bottom border is not visible.
As a workaround, I added a class to my segment HTML and scss:
<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">
.menuSegments{
margin-bottom: 5px;
}
Which then results to this:
I then remove the .segment-button.segment-activated class from my scss to get the default settings from ionic for the bottom border.
I am currently using "ionic-angular": "^3.9.2".
I think ionic team has solved this in ionic 4. This problem does not occur in ionic 4 (by today, 20 Nov 2018).
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
add a comment |
I solved it. I think the segment's border (the line below the selected active segment) is outside of its container. Thus when we have an item below it, the border is covered by that container.
I added this line in my order-menu.scss to check the border of active segment:
.segment-button.segment-activated{
border: 2px dashed black !important;
}
Now you can see that the bottom border is not visible.
As a workaround, I added a class to my segment HTML and scss:
<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">
.menuSegments{
margin-bottom: 5px;
}
Which then results to this:
I then remove the .segment-button.segment-activated class from my scss to get the default settings from ionic for the bottom border.
I am currently using "ionic-angular": "^3.9.2".
I think ionic team has solved this in ionic 4. This problem does not occur in ionic 4 (by today, 20 Nov 2018).
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
I solved it. I think the segment's border (the line below the selected active segment) is outside of its container. Thus when we have an item below it, the border is covered by that container.
I added this line in my order-menu.scss to check the border of active segment:
.segment-button.segment-activated{
border: 2px dashed black !important;
}
Now you can see that the bottom border is not visible.
As a workaround, I added a class to my segment HTML and scss:
<ion-segment class="menuSegments" [(ngModel)]="mySelCategory">
.menuSegments{
margin-bottom: 5px;
}
Which then results to this:
I then remove the .segment-button.segment-activated class from my scss to get the default settings from ionic for the bottom border.
I am currently using "ionic-angular": "^3.9.2".
I think ionic team has solved this in ionic 4. This problem does not occur in ionic 4 (by today, 20 Nov 2018).
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
answered Nov 20 '18 at 5:34
Brian Ivander T. P.Brian Ivander T. P.
749
749
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53386226%2fionic-active-segment-not-highlighted-when-multiple-ngfor%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
