File Ultimate height InPlace

Question asked by Fabio - 3/16/2018 at 6:47 AM

Answered

Hi,

Is there a way to fit 100% height FileUltimate in a div parent?

I only can choose Unit.Percentage in Width....Height doesn't work.

The only way that i found to fit in a middle of page (between header and footer) was using iframe and set displaymode to viewport in content page. But with iframe FileUltimate appears in Safari/IOS/iPhone but doesn't work clicks anywhere.

4 Replies

Reply to Thread

Cem Alacayir Replied

3/28/2018 at 1:00 PM

Employee Post Marked As Answer

This is a HTML problem, you should make sure the parent element has explicit height set (it can be also 100% as long as it cascades to all parents). Otherwise the child element would collapse.

Width works because block-level elements have full width by default so they can automatically fill their parents horizontally. However Height is unknown if children's height are unknown.

Consider this simple element:

<div style="width:100%; height:100%; border: 1px solid red"> </div>

If you put this element instead of the FileManager component to the same place and you can make it expand to this parent, then FileManager will also behave the same when you replace it back.

This is how HTML works. For example, please see this answer:

http://stackoverflow.com/questions/13877302/table-height-100-inside-div-element

So, your options are

1. Specify height exactly in pixels.

2. Use height 100% but make sure parent element height does not collapse (see above link for example)

3. Use CSS 3 flexbox or CSS2 table-cell, some solutions:

http://stackoverflow.com/questions/38195295/how-to-make-height-in-css-responsive

Fabio Replied

4/3/2018 at 5:58 AM

Hi, Cem Alacayir.

My parent div has 100% of height....

Without any height set in filemanager, the component assumes 600px of height.

But when i put:

fileManager.Height = Unit.Percentage(100);

Filemanager shows cropped with only 36px of height. And the parent div still with 100%.

Fabio Replied

4/9/2018 at 5:15 AM

Finally did it work. Thanks!

Naveen Replied

9/10/2018 at 4:20 PM

HI,

Take a div like this -

</div>

Set GleamTech: FileManagerControl

<GleamTech:FileManagerControl ID="fileManager" runat="server"
                Resizable="true"
                DisplayLanguage="en" Height="100%"
                DisplayMode="Panel"
                WindowOptions-Modal="True"
                WindowOptions-Title="FileManager as a modal dialog of parent element">
            </GleamTech:FileManagerControl>

Set the height of the container in vH according to your UI Elements. I have taken 88vh because I have a top fixed row. It will auto calculate the height of the window & create a full height div for the file manager control before rendering it.

Back to Community Threads

Please leave this box unchecked

Reply to Thread

Enter the verification text