So I really like the scroll functionality that app-header-layout provides, and I'd like to use it within a confined space on my webapp. The trouble is, it keeps sticking to the top of the page, regardless of the dom I place it in. Is there anyway around this?
Related
I am new to Web Development and React (and fairly amateur at CSS), so there must be some fundamental issue with my understanding of how flex works.
With reference to this codesandbox, the website that I am designing (for upskilling myself) seems to have (for the lack of a better word) some kind of 'shunt' in the Home Page. To elaborate, keep a close watch on the navbar on top. As soon as you click on 'About', the whole page seems to move a little to the right. Only the home page is being affected in this manner.
I have tried figuring out the issue on my own using the Browser's handy 'inspect tools'. Came to the following conclusions.
It seems that the Home page has the width of 1519px whereas all other pages have the size 1536px. I am unable to understand why there is a difference of 15px at all.
Trying to isolate the issue (by removing all elements and adding them back one-by-one to see which one is erroneous), I realised this 'shunt' is being caused whenever I place a flex element inside another flex element. Thanks to other stackoverflow answers, I found that the dimensions of a flex element depend upon the parent (which in turn is another flex element with ambiguous sizing properties).
Issue
Even when I resolve the above mentioned problem, there still remains the "latest-post-card" element which impacts the Home Page orientation. Further, when I remove the height property for the "latest-post-card" everything falls right into place, perfectly, just the way I want it to appear, save for the fact that the height of this card is variable. For the sake of consistency, I would like this card's height to be fixed (as I will keep updating the contents of this card dynamically through the backend).
Requesting fellow developers to shed light on the issue here; would appreciate if anyone can point out what the root of the problem is and how I can remedy it.
What you're referring to as a "shunt" is caused by the other pages taking up less height and therefore not needing the scrollbar. When the scrollbar disappears, the page basically expands by the width of the scrollbar and therefore the content jumps slightly to the right.
I'm mainly a back-end programmer but every now and then I need to put a human-friendly face over something, and end up becoming a web designer/dev for a day.
More than a few times my layout issues have been solved with wrapping everything in a div directly inside the <body> tags and applying some styling to that, mainly sticky footers or pushing content down to fill at least the height of the viewport. Because I use I use it infrequently, I tend to forget the intricacies of HTML/CSS, but I'm wondering should I always wrap all body content in a div as good practice?
On one hand:
It seems to be the most commonly suggested solution to stretching content all the way down (sidebars also seem to be a menace for this).
Even if I don't need it to start with, I may need it in future, and putting it there to start with means it is less likely to affect the rest of the page if I need to add one later.
But I feel like there's enough I don't know about web page rendering that overall it could be detrimental somehow. Is it semantic? Does it open up the potential for bigger problems with other parts of the page? I like clean code and I like scanning through my work and be able to tell at a glance what everything does and why it is there. Something just feels off to me about a div whose purpose is not immediately clear.
Not that you have to wrap body content with div. It just historically web was about content only. You can trace it even how names has changed over time.
Webpage - page in web. Page like a book page, just simple text. Text has flow layout. Styling is minimal (in terms of location). It is not important what is underneath when content is finished, just the rest of blank page.
And now your already mention term viewport. It is place for content and control elements. Modern web-page not a classic page anymore, it is application nowadays. But term web-page already in use. Try to calculate how much of page space takes text content (flow layout) and the rest(buttons, images, video, controls - block layout) for example on Facebook
Element div become universal element used to split content logically into separate blocks. Element div just a block with max available width of his parent and height of inner content. The visual presentation of div element can be widely changed using styling. There are a lot of new semantic elements in html5 those were emulated by div element mostly previously. Easy to guess what for such elements like header, footer, aside, nav...
Main idea of div is to split content logically and style it as you need.
I have a page structure for a website using fixed headers/footers around the main content. To keep things simpler for responsive design, I'm not using margins around the main content, I'm actually repeating the header/footer in the document - one in the fixed position, and once in the dynamic one. This means I don't need to worry about different heights on different devices.
However, I don't want the repeated content showing in search-engine results, so how can I hide it?
CSS doesn't hide anything from search engines.
For good practice, you should consider getting back to only one header/footer.
How about duplicating the header and footer with Javascript? You could use the jQuery .clone() method for this purpose.
Most search engine don't execute Javascript for their crawling.
My problem is a lot like this:
Can I make a Flash/Flex Drop Down Extend outside the flash object boundaries?
Except I am not using <iframe> tags only <object> and <embded> tags and not using flex at all. The banner I have been suing is 90 px in height and has to stay that way, which causes the problem of drop down menus being cut off when opening them.
Is there a way to make them extend out of the object tag, or even have them always extend down because currently they all want to extend up even though some could be seen better going down?
If it's your site, then you can use Javascript to change the object's height.
Is there an easy library out there to do something along these lines:
I have a page with a lot of elements. At any given time I want to be able to put a modal on top of the entire page and just highlight one of the pre existing elements on the page to draw attention to it.
Most of the libraries I've seen revolve around dialogs that pop up and then hide the rest of the page. Are there any easy alternatives?
Thanks!
You can use a BlockUI script, then raise the single element's z-index to be above the block.
However, you'll need to make sure it's in the same stacking container; you may need to move it to the <body> and position it absolutely.