Here is a code sandbox that defines a Logs React component and works great.
It uses react-scroll-to-bottom to show a page with a header and some logs. Note that because we use a flexbox, the size of log section grows perfectly to fit the height of the screen.
Now I want to place this Logs component inside an App component. The problem is that now the log section is too tall and another scrollbar appears in addition to the scroll-to-bottom scrollbar. You can see this here.
I think this is because we use 100vh for the height of the Logs component. The problem is, if I change this to 100%, ScrollToBottom breaks and displays the full log content as if it were a normal div. It seems like ScrollToBottom requires a specific type of height such as px, em or vh to work. I'm not sure where to go from here.
How do I grow ScrollToBottom to fill the height of the screen?
This issue is indeed with using 100vh. You're not accounting for the height of the header. You could change the height to something like 90vh and it seems to work. Or even give it a defined height in px.
Related
I am developing CRM project using HTML and CSS. I need to fit my project for all screens without vertical scroll bar same like g mail. If we observe g mail we have scroll bar only for mail section not for browser. I need too implement same like that. Can anyone please help me how to implement. the page should be fit for all screens means if it is in small screen or big screen or medium screen. Is there any tutorials or any script for calculating height for main content based on browser height.
I attached image. In that header and main content section is there. So I need to set body height based on browser height and as well as I need to calculate each section height each time based on browser as well as inside divisions.
we should not give any fixed height , why because we need to fit the screen for all resolutions like 1366*768 and 1400*968 and 1680*1050 and 1920*1080. So when we are increasing the browser height the DOM height also should be increase as well as decrease.
Please help me to find this type of development with HTML, CSS , JavaScript and Jquery.
First you check how the default height of your element is. With JQuery this can be done like this: var height = $('.classOfYourElement').height(); var currentBrowserHeight = $(window).height(); Then you need to attach a listener to resize Event $(window).resize(function() { // Inside here you are now calculating the difference of the height of the window to the default height of window which you set earlier. this difference you should then apply to the div height :) hope that helps. }); –
You need to have a wrapper around the 5th section and give it a fixed height.
Then you have to specify the overflow-y value to scroll i guess.
Please see http://jsbin.com/okUxAvE/28/
This has a width of 500px. The graph works as intended, with the nodes adjusting their position to stay in view as necessary.
How can I have this width be the arbitrary width of its parent instead of the specific 500px? For example, when viewing on a given device, the width might need to be 300px instead of 500px, but except for the change in width, everything should continue to work as in the example (i.e. no resizing of nodes).
Note that I don't care much about when the user resizes the window, although for orientation change it could be useful; so if anyone knows that it's a bonus, but not my main issue.
UPDATE, for clarification: I need 100% of the parent container, not 500px. I can't just use 100%. I know I could get the width of the parent, stick it into a variable and use that, but I'd like to know if there is a better way.
Is there any solution for making such boxes fluid responsive ?
The problem that I face is while the width of the window changes the first column (which includes the first block with text) gets a higher height and then it becomes something like this: (at a different size but in this sketch I kept the same aspect in order to see it
Are there any tricks for this?
UPDATE:
The height of the blocks is not fixed
I don't fully understand what you mean, but perhaps:
overflow: hidden;
This will make that you can't see the text that not fits in the window, so doesn't affect the height.
EDIT: Auto-size dynamic text to fill fixed size container
I am currently working on a webpage and I have achieved fitting it in the whole browser window by using percentage(%) values in the width and height properties of my css. The problem now is that when I resize the window, everything gets scrambled and distorted (e.g labels,links, etc.) Is there a way to have a minimum height and width so as when the window is resized, there is a limit those properties to prevent the layout being distorted?
Thanks is advance!
You actually answered the question yourself. You can use the CSS properties min-width and min-height to set minimum width and height, respectively, for a block level element like a container.
A better solution would be to use responsive design, though, which will continually adjust itself as the window grows and shrinks.
Check out the css properties min-height:
http://reference.sitepoint.com/css/min-height
and min-width:
http://reference.sitepoint.com/css/min-width
You may also look into a simple css framework like StackLayout:
http://stacklayout.com/
I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!
Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/
if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands