• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Fixed Position In a Component

Contributor ,
May 10, 2023 May 10, 2023

Copy link to clipboard

Copied

I have a sidebar filter that is a component with multiple states but I would like that filter fixed as the page scrolls. I have fixed position groups out of a component but I do not know how to achieve this from within a component. Is it even possible? and How? Thanks.

TOPICS
Design , How to , Prototyping

Views

643

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 15, 2023 May 15, 2023

Oh, okay, I see. I just now noticed that your sidebar is a part of a larger component, along with the elements on the left (image, title, cards and so on). You can't fix elements within a component independently. If you want to fix the sidebar only, you'll have to take it outside of the "The NAEP Blog" component, which might require you to change how the whole thing works. Anything that's part of a component moves together, so you can't partially fix elements from it.

Votes

Translate

Translate
Community Expert ,
May 11, 2023 May 11, 2023

Copy link to clipboard

Copied

Hey there! Could you post some screenshot of how it's set up and what you need to be fixed position? Is the whole sidebar going to be fixed? You can't make parts of a component fixed, but you can do it for the whole component.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 12, 2023 May 12, 2023

Copy link to clipboard

Copied

No, entire sibar does not need to be. Only the sidebar content which scrolling vertically needs to be fixed. 

Syeds_0-1683900198736.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 13, 2023 May 13, 2023

Copy link to clipboard

Copied

So you want to be able to scroll that list of states independently of the rest? You can put the states inside the white box into a scroll group, so when you hover over it with the cursor and scroll, only the states will scroll vertically.

 

Made you a quick example. Here's the prototype, and here's the .xd file.

 

Scrollbar doesn't move, but that's beyond Xd's capabilities 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

@Spas K. Thanks for doing this. I actally achieved this already. Thanks for your previous guidance wen I was in my earlty stangeg of learnign Abode XD. I actually am looking if it is possible to fix the position from"Reset Filters >" to the end of the tag clound "Private schools" The verticle scroll I am talking about is the page scroll.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

Oh, okay, I see. I just now noticed that your sidebar is a part of a larger component, along with the elements on the left (image, title, cards and so on). You can't fix elements within a component independently. If you want to fix the sidebar only, you'll have to take it outside of the "The NAEP Blog" component, which might require you to change how the whole thing works. Anything that's part of a component moves together, so you can't partially fix elements from it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 17, 2023 May 17, 2023

Copy link to clipboard

Copied

LATEST

Yes, you are correct and that what I did. I had to change up my component structure a bit but I got what I intended. I appreciate you lookingi into it. Take care.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines