I have a ng-zorro table and i would want the scroll bar to resize when i resize the browser window (say for example in a smaller device). So that it will be dinamically changed based on the page size, how to do that?
Well, firstly you should provide more context to your question: for example you could provide a minimal reproducible example
and some code so we can have more context to the question asked.
But anyway i will try to answer your question:
Here's what you can do:
looking at the ng-zorro table i see that there is a property for nzScroll that takes an object as argument.
so when you delcare the table you can do this:
<nz-table [nzScroll]="{ y: 'calc(100vh - 276px)' }">
</nz-table>
What is that code doing?
So since we want to scroll vertically (and not horizontally) we need to change the y axis ence the y: in the code.
you can assign a pixel value to that ybut that will result your scrollbar to have a fixed height so resizing the window will not resize the scrollbar.
what i did was calculate all the elements heights in my page so that i know how much height my table is taking. I did this when the table was empty using an extension for google chrome smart page ruler extension
knowing the elements height in my page i could subtract that amount to the viewHeight of my page.
Therefore everytime you resize the window the scrollbar is going to resize because is calculating the difference between 100% of the viewHeight and the sum between all of your elements heights.
If you have any question about my answer i will happly answer, cheers!
Related
I have an idea for a layout. When users first load a page. The content will be display full window height. But when users resize the window, it will add a vertical scroll bar to view the full window height.
To put into another, it is like I want to keep the full height window when users resize the window.
Example, initially the window full height is 1600px, and then when users use a mouse to resize the window to 1000px for example, I want the content still 1600px and a scroll bar is added to help users view the content.
And if users open the window initially at let's say the smaller screen 800px height. I want it first make full height but then when users resize the content will fit the resize window.
Am I confused about my idea but is it possible to do so?
If you mean zoom when you say resize and mouse. You can use
window.resize = function() {
//will be called whenever the window changes size. I.E zooming in or changing the window size manually
}
To pick up that behaviour, but the best approach I believe would be the place the content you wish to have this property into a div wrapper. As that way you can set the size manually.
Hope that helps
Let's do it by steps:
are you using any framework ?, Frameworks generally use the window's resizing base, the percentage of the window used, so it will adapt whenever the user decreases or enlarges the screen, if you want the static screen when resizing, change the css attributes of your framework, or create your layout with pixel or hexadecimal from scratch. To create an adaptive window on the first access and then leave it static, first you have to put your highest value DOM element (html, or window) in css, and the other elements you leave in pixel values, if you need , also use the "position: fixed" attribute.
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.
I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.
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'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.
How can I do this? You can find the example at apple page. Try to scale it and look at top menu.
EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.
The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:
div {
width: %; //percentage value you want
min-width: px; //the minimum pixel value you want
}
This way it expands and decreases with the page width, yet maintains a min width for readability
Also, using em as a font-size will help keep the text size dynamic as well.
You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.
You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.
There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)
here is a workaroud: it will only work if the font-size is zoomed
http://jsfiddle.net/gGdAq/4/
Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.
Maybe this question helps:
Catch browser's "zoom" event in JavaScript