Need to implement a scrolling list with selected item visible
The requirement is a scroll-able list of items with a certain item highlighted, and visible by default. So, if item 50 in a list of 100 is the special selected item, the list would be initially displayed by scrolling down enough so item 50 is in the middle of the list.
This is a MEAN stack application, and I already have the items loaded from a service and populating a template using *ngFor, but the visual requirement of highlighting a specific item and making that item visible by default is not working well.
The additional requirement (isn't management great?) is that each item should be multi-line and html formatted info, so an html select filled every need except that one.
I'm currently using an un-ordered list with css overflow to handle the scrolling, but that doesn't give me the ability to scroll down to a specific item.
<nav>
<ol style="height:500px; width:100%; overflow:hidden; overflow-y:scroll;">
<li *ngFor="let item of list">
<table>
<tr *ngIf="item.store_number == my_store; else otherstore"><b>{{item.store_number}}</b></tr>
<ng-template #otherstore><tr>{{item.store_number}}</tr></ng-template>
<div style="color:gray">
<small>
<tr>{{item.detail[0].address.store_address.line1}}
{{item.detail[0].address.store_address.line2}}</tr>
<tr>{{item.detail[0].address.store_address.city}},
{{item.detail[0].address.shop_store_address.state}}</tr>
</small>
</div>
</table>
</li>
</ol>
</nav>
Any ideas on how to implement this? One last requirement: must be html/css/javascript/typescript. No purpose-built npm packages, because management.
- Scrolling list
- Multi-line items
- ...with ability to format items using html/css
- Ability to scroll down to a specific item
javascript html css mean-stack
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
add a comment |
The requirement is a scroll-able list of items with a certain item highlighted, and visible by default. So, if item 50 in a list of 100 is the special selected item, the list would be initially displayed by scrolling down enough so item 50 is in the middle of the list.
This is a MEAN stack application, and I already have the items loaded from a service and populating a template using *ngFor, but the visual requirement of highlighting a specific item and making that item visible by default is not working well.
The additional requirement (isn't management great?) is that each item should be multi-line and html formatted info, so an html select filled every need except that one.
I'm currently using an un-ordered list with css overflow to handle the scrolling, but that doesn't give me the ability to scroll down to a specific item.
<nav>
<ol style="height:500px; width:100%; overflow:hidden; overflow-y:scroll;">
<li *ngFor="let item of list">
<table>
<tr *ngIf="item.store_number == my_store; else otherstore"><b>{{item.store_number}}</b></tr>
<ng-template #otherstore><tr>{{item.store_number}}</tr></ng-template>
<div style="color:gray">
<small>
<tr>{{item.detail[0].address.store_address.line1}}
{{item.detail[0].address.store_address.line2}}</tr>
<tr>{{item.detail[0].address.store_address.city}},
{{item.detail[0].address.shop_store_address.state}}</tr>
</small>
</div>
</table>
</li>
</ol>
</nav>
Any ideas on how to implement this? One last requirement: must be html/css/javascript/typescript. No purpose-built npm packages, because management.
- Scrolling list
- Multi-line items
- ...with ability to format items using html/css
- Ability to scroll down to a specific item
javascript html css mean-stack
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using thescrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.
– Roj
Nov 15 '18 at 15:46
Also remove theoverflow:hiddenproperty since you're already setting scroll to y
– Roj
Nov 15 '18 at 15:49
add a comment |
The requirement is a scroll-able list of items with a certain item highlighted, and visible by default. So, if item 50 in a list of 100 is the special selected item, the list would be initially displayed by scrolling down enough so item 50 is in the middle of the list.
This is a MEAN stack application, and I already have the items loaded from a service and populating a template using *ngFor, but the visual requirement of highlighting a specific item and making that item visible by default is not working well.
The additional requirement (isn't management great?) is that each item should be multi-line and html formatted info, so an html select filled every need except that one.
I'm currently using an un-ordered list with css overflow to handle the scrolling, but that doesn't give me the ability to scroll down to a specific item.
<nav>
<ol style="height:500px; width:100%; overflow:hidden; overflow-y:scroll;">
<li *ngFor="let item of list">
<table>
<tr *ngIf="item.store_number == my_store; else otherstore"><b>{{item.store_number}}</b></tr>
<ng-template #otherstore><tr>{{item.store_number}}</tr></ng-template>
<div style="color:gray">
<small>
<tr>{{item.detail[0].address.store_address.line1}}
{{item.detail[0].address.store_address.line2}}</tr>
<tr>{{item.detail[0].address.store_address.city}},
{{item.detail[0].address.shop_store_address.state}}</tr>
</small>
</div>
</table>
</li>
</ol>
</nav>
Any ideas on how to implement this? One last requirement: must be html/css/javascript/typescript. No purpose-built npm packages, because management.
- Scrolling list
- Multi-line items
- ...with ability to format items using html/css
- Ability to scroll down to a specific item
javascript html css mean-stack
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
The requirement is a scroll-able list of items with a certain item highlighted, and visible by default. So, if item 50 in a list of 100 is the special selected item, the list would be initially displayed by scrolling down enough so item 50 is in the middle of the list.
This is a MEAN stack application, and I already have the items loaded from a service and populating a template using *ngFor, but the visual requirement of highlighting a specific item and making that item visible by default is not working well.
The additional requirement (isn't management great?) is that each item should be multi-line and html formatted info, so an html select filled every need except that one.
I'm currently using an un-ordered list with css overflow to handle the scrolling, but that doesn't give me the ability to scroll down to a specific item.
<nav>
<ol style="height:500px; width:100%; overflow:hidden; overflow-y:scroll;">
<li *ngFor="let item of list">
<table>
<tr *ngIf="item.store_number == my_store; else otherstore"><b>{{item.store_number}}</b></tr>
<ng-template #otherstore><tr>{{item.store_number}}</tr></ng-template>
<div style="color:gray">
<small>
<tr>{{item.detail[0].address.store_address.line1}}
{{item.detail[0].address.store_address.line2}}</tr>
<tr>{{item.detail[0].address.store_address.city}},
{{item.detail[0].address.shop_store_address.state}}</tr>
</small>
</div>
</table>
</li>
</ol>
</nav>
Any ideas on how to implement this? One last requirement: must be html/css/javascript/typescript. No purpose-built npm packages, because management.
- Scrolling list
- Multi-line items
- ...with ability to format items using html/css
- Ability to scroll down to a specific item
javascript html css mean-stack
javascript html css mean-stack
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
asked Nov 15 '18 at 15:34
John MarquezJohn Marquez
301212
301212
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using thescrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.
– Roj
Nov 15 '18 at 15:46
Also remove theoverflow:hiddenproperty since you're already setting scroll to y
– Roj
Nov 15 '18 at 15:49
add a comment |
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using thescrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.
– Roj
Nov 15 '18 at 15:46
Also remove theoverflow:hiddenproperty since you're already setting scroll to y
– Roj
Nov 15 '18 at 15:49
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using the
scrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.– Roj
Nov 15 '18 at 15:46
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using the
scrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.– Roj
Nov 15 '18 at 15:46
Also remove the
overflow:hidden property since you're already setting scroll to y– Roj
Nov 15 '18 at 15:49
Also remove the
overflow:hidden property since you're already setting scroll to y– Roj
Nov 15 '18 at 15:49
add a comment |
0
active
oldest
votes
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%2f53322819%2fneed-to-implement-a-scrolling-list-with-selected-item-visible%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53322819%2fneed-to-implement-a-scrolling-list-with-selected-item-visible%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
Calculate the height of your scrollable div(since you've already set it that shouldnt be a problem) and then the position of the element within that div. And then using the
scrollTo()with the position as the parameter. That's how I would probably do it. With that logic you could Google how to get said variables. Would have give you a sample cos if I was home right now , but I hope that helps a bit. Good luck.– Roj
Nov 15 '18 at 15:46
Also remove the
overflow:hiddenproperty since you're already setting scroll to y– Roj
Nov 15 '18 at 15:49