How to add CSS dynamically to a controller in SAPUI5 - html

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)

Related

Dash Datatable: Inherit height from parent div

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?

Dynamic Flex Item height in a flex grown flex-box container

So I am trying to build a kanban like layout (with Vue and Vuetify) that has lists that grow with their content but then stop growing the moment they reach the end of their container (the container would be the remaining size of the screen) and put in an overflow-y inside the column's div.
Here is the reproduction link: https://codesandbox.io/s/dear-god-in-heavens-o55oz
I have tried to make it look as similar to what I have in my own project at the moment.
Here's what you can see in the reproduced link:
The container inside src/components/common/ListsContainer.vue is a flex-grow flex item. I need this because I want this container to automatically take the remaining height of the screen because the wToolbar will have an extension slot that will change its height. I might also introduce new changes to it therefore it would be much more simpler if the container of the columns has a dynamic height.
The columns inside ListsContainer.vue stretch the parent container when the contents are too much, the only way I can control it is by adding a calc(100vh - XXrem) value to the container and the columns to control their height. You can see that I have commented out my calc values inside src/assets/css/custom.css in lines 19 and 24 to demonstarte the overflow of the columns from the screen.
The reason I dont want to use calc is because
calc doesnt react nicely inside an iPad and I have to introduce different calc values just to contain the columns, I have checked that different devices calculate the height differently (I checked in actual iPads since Chrome's simulator works flawlessly which isnt the case in the actual device)
When the wToolbar is extended, the calc doesnt respond and it pushes it down the page, I would like to keep the overflow-y disabled in this page.
So can you guys let me know how I can set my flex-box settings so that everything is contained the way I am trying to?

vaadin grid table column width control with css

In my Polymer 2.0 project I have using vaadin-grid#3.0.2. There is a grid with some large number of data - 20+ columns, so that have an overflow-y scrolling within the div. Because of the large number, columns width decreases inside the grid. Parent div have a display: flex property, so that the width of columns are auto-generated. Can we set minimum width for columns with CSS? or Can I control it with CSS?
Can't reproduce the problem code here because tha data comes from an external server (Oracle VM VirtualBox).
Here is the code that used in HTML:
<vaadin-grid class="projectworksheet" name="worksheet" items="[[projectData]]" page-size="10"></vaadin-grid>
Here is a screenshot of the rendered grid, vaadin-grid automatically generated <vaadin-grid-table id="scroller"> under #shadow-root I think, that's why I can't control columns min-width with CSS.
Using CSS alone you can't cross shadow dom boundaries, meaning you won't be able to set the width from outside the vaadin-grid component unless they have provided a mixin or a css variable.
However you can use javascript to access elements inside the shadowDom and set their css properties. eg: document.querySelector('vaadin-grid.projectworksheet').shadowRoot.querySelector('vaadin-grid div.col').style.width = '100px'

Form page fixed height and responsiveness

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.

How to force an element to have its child image width instead of its child paragraph

I made a basic example of my problem:
http://codepen.io/luksak/pen/Lbnga
I have a WYSIWYG editor where authors have the possibility to embed floating images of any width and height inside a blog post. These images have a description in the sibling <p> tag. This description's width should never exceed the width of it's image.
Here is where I am failing. I tried floating the child elements. I tried using display: table-cell; without success. Of course I could use some hard coded width, but that wouldn't work with my dynamic image sizes. Of course I could use JS to accomplish this, but I really think this should be solved in CSS.
Is there a way to achieve this?
You could use display value of table and a width narrow the min-width you wish.
The container will then expand to the biggest box width it contains (mostly like it will be the picture).
DEMO
.media-element-container {
display:table;/* will expand to fit the biggest element it holds within width and whole contenet within height */
width:1px;/* see this as a min-width */
}
The best way is to do it through the editor and create an area with specific width.
If you want to do it with js, keep in mind the the display will change in front of the user while the code changes the text display.
My solution will run only if there are two conditions: the p element has a specific class name (for identification purpose only) and it's directly after the img element.
var desc = document.getElementsByClassName('img_desc'); // find all descriptions tags
for (var i=0; i<desc.length; i++) {
img = desc[i].previousElementSibling; // get the image element
if (img && img.nodeName == 'IMG')
desc[i].style.width = window.getComputedStyle(img, null).width; // set the width
}
I still think this is only the last resort and you'd better do it while creating/editing.
Note: IE supports getElementsByClassName only from version 9 and above.