I have a product page with two tabs (description and technical details): description can have long content and tech details is usually small.
Both tabs are fixed/sticy on scrolling, and anchored.
I would like the anchor to the second tab (technical details) to correctly position me to the top of the content but when I scroll the description and click on anchor, the link takes me to wrong vertical position.
How should I fix this in css?
Related
I have this page with a permanent sidebar. Along the top of the page there is a group of MUI tabs.
The Estimations tab contains a Material-Table. Navigating to this tab causes the page to expand horizontally. I want to stop this from happening.
Setting a fixed width to the table only stops the table from expanding. The background still expands when navigating to this tab. Setting a fixed width for the Paper component in IntakeDetails2 does not stop this expansion from occurring.
This code sandbox link shows a working demo of this issue. I would like to keep the estimation tab along with its table within the same boundary as the solutioning tab. The outcome here would be a horizontal scroll bar on the table itself rather than the web page.
I'm trying to make a Wordpress menu that scrolls to a specific place on a page when you click on a menu item. When the viewport is on that element of page there's a dot at the end of the menu item title and moves acordingly which part of the page is visible. E.g. When you click on "photo" on the menu it scrolls to the photo section and a dot slides to the end of the word "photo." Then when you click "contact" the dot slides from the end of the word "photo" to the end of the word "contact" and the page scrolls to the contact section. The dot should also slide when you scroll to a section manually. I've tried to use onScroll but failed. Is there any way to achieve this?
I think your question is related to scrollspy. If i got you correct then, try this link:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy&stacked=h
i am trying to build a website..i am using a "sticky menu" concept which automatically minimizes its height after certain scroll..now the problem is when there is a jump within a page,the sticky menu covers half the content on jump!
for example..look at this website:
type in---"www.sitnlearnit.com" in your address bar...
in that website,when we navigate through "COURSES OFFERED" item and select any list item,we are supposed to jump to that location! it is happening..but the content is covered by sticky menu..
how to solve this???
Design the site so that the area where the sticky menu will be will never have content in it - wherever the menu moves in that space, there will never be content to cover up.
I am trying to get a livecycle image field to be right up against the side of the page that it is on. It seems that I always have a little space between the image and the edge of the page no matter what I do.
Here is an image so you can see the problem: http://imgur.com/4WVVudi
The person should be on the edge of the page, he should be touching the bottom and right side.
Thanks!
Is the image on a master page or just within the content pages/subforms?
If the image is in the content pages check that the 'content area' in the master page is the full width and height of the page (use the information in the layout tab).
For precise positioning choose anchor bottom right and use the x and y co-ordinates in the layout tab.
cheers
Use the layout panel to check and set values for the content area width that contains your image field. Also set the width and positioning for the parent subform if you have the image in a subform.
I am using jquery tabbed content and I have noticed when navigating to any tab other than the product tab the page shifts a few pixels to the right and then when clicking the product tab it shifts back. What in the world is causing this?
The link to see it in action, http://clients.zerozendesign.info/techject/
The reason is the presence of the scroll bar on the long page content on the products tab. You should consider displaying the scroll bar even when the content does not require it using the CSS property for overflow, like so:
html { overflow-y:scroll; }