I am trying to show the content (inside ScroolView) on the Popup (Devextreme Popup) and there are buttons on the bottom of the Popup. The problem when the content getting bigger, buttons disappear on the popup. It means ScrollView (Devextreme ScrollView) doesn't work as expected. I have to fix the buttons of the popup and ScrollView (the content inside it) should use the remaining part of the popup.
I don't want to set a specific height for ScrollView because I want to make it responsive.
I make a simple demo that shows the problem.
http://plnkr.co/edit/ERpesFefmMGM99LuM6nj?p=preview
How can i achieve this?
ps: I am using the Angular 2.x framework
And this is the source of the sample
<dx-popup #searchPopup maxWidth="40%" height="90%" class="popup" [showTitle]="true" [dragEnabled]="true" title="Test Pop" [visible]="true"> <div *dxTemplate="let data of 'content'">
<form id="searchForm" #f (ngSubmit)="do()" class="form-horizontal" >
<dx-scroll-view [showScrollbar]="Always">
<!-- Dynamic content which is gonna getting bigger -->
</dx-scroll-view>
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<dx-button text="Button 1" type="normal" ></dx-button>
<dx-button id="button" text="Button 2" type="default" [useSubmitBehavior]="true"></dx-button>
</div>
</div>
</div>
</form> </div> </dx-popup>
You have to set the height to .dx-scrollable-native.dx-scrollable-native-generic class. Either static or dynamically its up to you. When you say responsive it will behave according to the device height. But for your popup you have to specify the height of your content container
//dx.common.css line number 991
.dx-scrollable-native.dx-scrollable-native-generic {
-ms-overflow-style: auto;
/* overflow: hidden; */
max-height: 400px;
overflow-y: scroll;
}
Update this css in dx.common.css line number 991. 400 is the approximate height if content exceeds the container scroll will be there and if content is less than 400 the auto height will work for you.
I have solved this issue. it is need to dock the form inside the popup content. To do this, set the 100% height to the form. Then, you need to decrease the scroll view height by the height of your buttons. So, the scroll view height should be 100% - 36 pixels.
See the updated plunk.
this is the updated parts.
form tag:
<form id="searchForm" #f (ngSubmit)="search()" class="form-horizontal" style="height: 100%;">
scroll-view tag:
<dx-scroll-view [showScrollbar]="'always'" style="height: calc(100% - 36px);">
Related
The main issue that is not treated in similar questions listed below is a FORM object that has a variable part and a non variable footer (submit buttons)
The aim is to display:
A header (a table (width:100%) with a logo and a text in second cell): size should be the smallest possible with all content displayed
A FORM (containing 2 parts):
Fields are in a div that will expand to all space remaining and will scroll if it lack space. (minimum size: 1 text line)
Submit / Rest buttons are in a table and should ALWAYS be visible and not resized in anyway. At worst the stick to bottom of browser window.(except if browser window becomes ridiculously small of course)
Nothing should go below bottom of browser window (except if user resize to a ridiculous size).
Hardcoded height is NOT an option (except the 100% for technical reasons - body or column parent for example). Header and footer height MUST be autocomputed by browser to use minimum space while displaying all content. If user reduce the width of the browser window increasing the header or footer text to wrap on more lines, the height must grow accordingly. Thus percentage or viewport heigh is not an option as it is arbitrary and can't take car of the user zoom, the browser width resize and such.
I've tried the following layout:
<div id="column">
<div id="header>
<table><tbody>
<tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
</tbody></table>
<!-- optionnel error line (arbitrary length) if previous form submission failed -->
</div>
<form>
<div id="variable_scrollable_content">
<!-- multiple field sets hosting some input (text, select, ...) -->
</div>
<div id="footer">
<table><tbody>
<tr><td>Save button</td><td>Reset button</td></tr>
</tbody></table>
<!-- A few lines of text -->
</div>
</form>
</div>
After I gave a careful view to similar questions (see below), I was unable to find something that could handle the FORM object that has a variable size scrollable part and a fixed footer.
I also gave a careful look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox with no more success.
I tried the flex approach for classes header, variable_scrollable_content and footer with no success. I also tried to put the form object in flex class but that doesn't work.
As I can't separate the FORM submit/reset buttons from the fields they manage, I don't know how to solve this.
header should stick to top of browser windows
footer (containing form control buttons) should stick to bottom of browser window at worst or stick at the end of the last fields if browser windows is big enough.
fields should be in a variable size container that uses all the remaining space between header and footer and has overflow-y:scroll; so it can scroll if it can't display its whole content.
In case the above simplified code is not sufficient, the "real" code can be found here:
https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/edit_config.php
The full css is here:
https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/css/screen.css
Similar questions
I have checked the following similar questions, and I believe my question is different as the main problem is the FORM object interfering with the layout:
scrolling content between fixed header & footer with variable height
Content height expand between fixed header and fixed footer
Make a div fill the height of the remaining screen space
Original question was here: variable height div between header and footer
I've just found the solution.
In this situation, the problem was the FORM object that would interfere with flex column children not at the same Dom level tree.
The simple solution was to move the FORM object so it includes the flex column it its whole content.
The above code becomes:
<form>
<div id="column">
<div id="header>
<table><tbody>
<tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
</tbody></table>
<!-- optionnal error line (arbitrary length) if previous form submission failed -->
</div>
<div id="variable_scrollable_content">
<!-- multiple field sets hosting some input (text, select, ...) -->
</div>
<div id="footer">
<table><tbody>
<tr><td>Save button</td><td>Reset button</td></tr>
</tbody></table>
<!-- A few lines of text -->
</div>
</div>
</form>
But this was not sufficient because setting flex column height to 100% (when body is also set to 100%) won't work. maybe the form object doesn't propagate the height?
The solution was to set height of column with vh (viewport height) unit.
So I set it to 100vh. Unfortunately, there are some glitches due to some border size and padding from parent objects and itself. So as a fallback I put it to 96vh, but this is ugly and I'll investigate and will remove the parasite border size padding that makes the body bigger than 100vh.
<body style="height: 100%">
<form>
<div style="display: flex; flex-flow: column; height: 100vh;">
<div id="header" style="flex: 0 0 auto;">foo bar</div>
<div id="content" style="flex: 1 1 auto; overflow-y: scroll;">Input fields</div>
<div id="footer" style="flex: 0 0 auto;">Control buttons</div>
</div>
</form>
</body>
The above sump is bigger than 100vh in height.
There are 2 solution to fix that:
Remove any border padding or such from parent object.
Set the column to an absolute position (0,0)
Alternative solution to scrollable FORM in flex content with fixed footer containing control buttons is to move FORM control buttons outside the form.
The code then looks like:
<body style="height: 100%">
<div style="display: flex; flex-flow: column; height: 100%;">
<div id="header" style="flex: 0 0 auto;">foo bar</div>
<div id="content" style="flex: 1 1 auto; overflow-y: scroll;">
<form id="foobar">
Input fields
</form>
</div>
<div id="footer" style="flex: 0 0 auto;">
<button form="foobar" type="submit" formmethod="POST">Submit</button>
<button form="foobar" type="reset">Reset</button>
</div>
</div>
</body>
The advantage is that it works with height 100% as it takes account of margin borders and padding of parent (while vh is an absolute viewport size).
I have a top nav, side nav and the main content of the page. On click, the tabs on the side nav should bring the div associated with the tab to the top of the page (This is a different issue i am facing as scrollTop method from JS isn't working, but I am able to use scrollIntoView() for now to get something going)
template
<mat-card class="main-card">
<mat-card-title>Some title</mat-card-title>
<mat-card-content class="main-content">
<div class="div1">Div1 content</div>
<div class="div2">Div2 content</div>
<div class="div3">Div2 content</div>
</mat-card-content>
</mat-card>
CSS
.main-card {
overflow: auto;
height: 700px;
}
.main-content {
height: 1000px;
overflow: auto;
}
sidenav items
<div class="side-nav">
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div1</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div2)">
<span>Div2</span>
</div>
<div class="mat-list-item" (click)="handleElemScroll(div1)">
<span>Div2</span>
</div>
</div>
on the main card, I am unable to add the height prop to, even if I use !important. I've run into this issue with a few other times using angular-material. I am forcing a scroll, but mid way through the scroll, the entire page begins to scroll. Even though the height of my mat-card-content is set to be larger than the mat-card itself.
A few questions if anyone can guide me
1. Why does my entire page begins to scroll mid way?
2. Without making my side and top nav stick, how can I implement a scroll? Is my idea of using overflow, and making the inner container height larger than its parent container the correct idea here?
Thanks for any help
I have the following div :
I am trying to make the Form Content Scrollable while leaving everything else fixed. The dialog height changes based on the form content and can grow upto the window size. But beyond that it should add a scroll in the form content.
I tried playing around with flex and got it working IF THE TAB divs (Tab parent and tab content) were not present. Even then the scroll bar remains permanently even if the height is available (Another problem but not as major).
Any suggestions on how to use flex styling on the mutable divs to get the scrolling just on form content?
The CSS that worked when tab portion was not present:
<div id="dialog" style="display: flex;">
<div id="form" style="display: flex; flex-direction: columnl">
<div id="formContent" style="overflow-y: auto;"></div>
<div id="formFooter"></div>
<div>
</div>
The above HTML and CSS worked as expected, adding a scrollbar to the form content. BUT when the dialog is maximum height, and the scroll bar is no longer required, the scroll bar is still present.
This approach does not work when the tab portion is included. It is creating unexpected behavior by showing 2 scrollbars or scrolling the entire dialog instead of just the form content. One for the form content div and another for dialog div.
The HTML CSS is as follows:
<div id="Dialog" style="height:300px;overflow-y: auto;width: 400px;">
<div id="DialogContent">
<div id="TabController">
<div id="tabHeader">
</div>
<div id="tabContentPanel">
<div id="tabContent">
<div id="form">
<div id="formContent">
Y U NO SCROLL ????
</div>
<div id="formFooter">
This is the Footer.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ok so I am using Jquery-ui resizable, so the user can control it.
The problem I am having is on the bottom half there is a textarea that is not expanding to 100% height.
Eventually, the textarea will be controlled by the codemirror library.
In my fiddle I have not included anything with code mirror, to keep it simple.
I think the form tag has something to do with it, since it is a block element.
<form>
<div class="wrapper">
<div id='ilo'>
<div id='iloWrapper'></div>
<div id='handle' class="ui-resizable-handle ui-resizable-s"></div>
</div>
<div id="editor">
<div class="edit-tool-bar"></div>
<div class="editor-window">
<textarea id="tArea"></textarea>
</div>
</div>
</div>
</form>
jsfiddle
[UPDATE]
Here is a new fiddle based on the answer from audre7.
As you can see The textarea is 100% but it is expanding well past the bottom of the page.
All I want is 2 sections one top and one bottom.
The bottom section will have 2 items in it the top item will not scroll but be sticky to the top of that bottom section.
The textarea will take up the rest of the room in the bottom section, and it will be able to scroll vertically.
You have to put the container of the textarea in a position absolute, and it seems to work as you want.
.editor-window{
position:absolute;
}
I was wondering How To make a Form and Div have a max width of child elements. Eg in this example both the form and the outerDiv stretch the full width of the page. I would like the form and outerDiv to have a width of 200px.
This becomes a problem when I have this page in an iframe, because the width of the page is larger than the iframe I get a horizontal scroll bar.
<body>
<form name="myForm" method="post" action="#" >
<div id="outerDiv" >
<div style="width: 200px">
Both the form and outer div stretch 100%. I am wondering how I
would get them to wrap tightly around the inner div.
</div>
</div>
</form>
</body>
Thanks for your time and help.
To make a block display like an inline element you can use
display: inline-block;
I believe the "proper" way is to make them inline elements:
style="display: inline;"
divs are block elements and fill their container,
spans are inline elements and shrink to fit their contents.
You can either use spans as containers or just add the above style to your divs.
Good luck!
To prevent scrollbars for #outerDiv you could set a max-width and overflow properties:
#outerDiv {
max-width: 300px;
overflow: hidden;
}
In this way, you assure no scroll bars, and I'm assuming the width of the iframe is never wider than 300 pixels. Also be sure to set frameborder="0" on the iframe and check the margins on the body of the included html.