base div height on dynamic canvas height - dynamic

I have a canvas element that changes in height after some user interaction.
The canvas is contained in a div. When the canvas changes in height, it currently overflows the div vertically.
Can I add a (javascript or jquery) listener (or something like that) to the height of the canvas, that dynamically changes the div's height according to the canvas height? Or is there a css way to let the div automatically enlarge (like in a table row).
thanks

Have you tried adding this style to the div : height:auto;

As a workaround, I've put the canvas in a table. A bit ugly, but it works.

Related

The equivalent behaviour of a HTML block element

I'm new to react-native, coming from the web-world.
The standard behaviour for a View component seem to be to collapse to it's content's width.
Is there a way to have a component always stretch to the full horizontal width, limited only by a parent's fixed width or else screen width?
Any of width, minWidth or maxWdith set to '100%' doesn't seem to do any difference.
For this purpose, you can simply use the flex box system

Sapui5 horizontal line

is there any alternative to the depricated"HorizontalDivider" in SAPUI5? Since Sap doesn´t mention any alternative, I ran over something like "" Element that draws a Horizontal line?
It is better that you use a toolbar element as it has the bottom border. When you use the html hr tag, it does not respect the theme color while the toolbar use the theme color and also its spacing policy.
<sap.m.Toolbar width="100%" height="1px"/>
It the following picture you can see what is the result of using a toolbar with 1px height.
And in the following picture the result of using html hr tag.
Or you can use any boxing elements of the UI5 and just play with its class. For example you can assign the class sapMTBStandard to your element to make a bottom border with suitable color in your theme.
<html:hr></html:hr>
Make sure you add xmlns:html="http://www.w3.org/1999/xhtml" library

Slider prestashop 1.7

I have question how to display full width slider prestashop 1.7 on mobile phones. I can't find file where I could change this.If anybody can HELP PLEASE.
Regards,
Pat
The Slider actually depends on your theme how you present the slider TPL file with CSS.
Basically, in default theme of 1.7 your slider will be under the "container" DIV, And the Container DIV has a maximum width value set from Bootstrap about 940px max.
You need to Hook your slider out of Container DIV within WRAP div which allows you to show within 100% width.
See below how the main Container limit your ma size within 940px Slider div under container DIV
Here 940px is max width and 15px padding on both left and right.
If i just place the Slider Div out of Container then what happens? See below
Slider DIV out from Container DIV
So all you need to fix it from your theme where you HOOK slider module. By default in any responsive theme, your slider will be 100% width. This is not your slider is 100% width, This is why because your outer DIV make the limit of that width.
Hope that help you to understand how you can solve your issue

Make a vector path in xaml responsive

I have a canvas that is within a page in XAML that contains some paths from an .ai document. I would like this to be responsive and have resize according to the proportions of the grid that it is contained on. How?
Okay I fixed it myself. Replaced the canvas with a grid, then enclosed that grid in a viewbox. All paths under the canvas now has horizontal and vertical alignment set to left and top respectively, and its Canvas.Left and Canvas.Top values are now replaced by a margin reflecting these values.

Image with a min-height and height of 100% for large browsers

I want a background-image that only resizes if the browser is larger than the image size. Therefore, I need a min-height equal to the image pixel height, but also a height of 100% if the browser's height is larger than the image height.
I know I might be able to do this with a div, but would rather use the background-image & background-size CSS properties. This is all I have so far:
body{
background-image:url('Images/newBG.jpg');background-size: 1911px 824px;
}
Any idea where I should put the min-height or if this is even possible without using a div? If someone has the div solution, I would appreciate that also.