I have a standard design with some controls and a datatable below. I would like the datatable to adjust to the window height. My first thought was to include the table in a div and assign a % height to the div.
However, it seems that the table only responds to vh and not %. Currently I am setting the table height via f"calc(100vh - {margin*2+controls}px)".
Is there any way to adjust the height of the table in proportion to the div it is contained in? Or is there generally a preferred way to achieve this behaviour?
Related
I need to set height of a vertical layout dynamically. My page has a header image of height 100px, a tab of height 26px remaining part is the main content. I have written the following code in App.controller.js. It doesn't works
// tab_layt is the id of vertical layout
var thisView = this.getView().byId("tab_layt");
var height = jQuery(window).height() - (jQuery(".header").height() + jQuery(".tab").height());
thisView.setHeight(height);
it shows the error
"thisView.setHeight is not a function".
sap.ui.layout.VerticalLayout has no property called height.
Layout height will be aligned to the child elements' height automatically.
However, you can overwrite this by using custom CSS classes, but it's not really recommended.
thisView.addStyleClass("nameOfTheCssClass");
Or you can resize the child elements to fill the whole screen - this will resize the layout itself. For example, if you are using a table, you can set the height property of the table instead of the outer layout.
(variable name thisView is not the best if you are referencing to a layout, later it can cause misunderstanding when you are trying to understand your own code)
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
I am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
I'm currently developping a Chrome extension (which means that I don't need a cross browser solution).
Basically, I want my web page to be separated into two parts. A left panel which would take 20% of the width and 100% of the height and a right panel which would take 80% of the width and 100% of the height. Those panels would contain various elements, textareas, list, select.
The issue is that I don't know how to achieve this and to handle resizement. Currently, I'm using jQuery with a window.onresize hook. I keep changing the width and height based on the window's size.
I want to know if that could be done in a simplier way, using CSS for instance. And what should I use? A div, a table, etc...
Thanks in Advance.
You could put the existing panel, or element divs & spans inside a containing relative div. If
you use position:absolute for the panel divs, they will then be positioned
absolutely, relative to the containing div, not the page body.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Please adding css into your div, add min-height, and max-height properties
#mydiv{
min-height: 700px;
}