I have an angular-ui modal window, which can contain more elements, than the screen can contain. Naturally, modal is automatically scrolling, but I need to scroll to the bottom to see the modal-footer.
Is it possible to anchor the footer, so scrolling does not affect it, resulting in footer to be always visible?
Working example here
You can give the modal's body max-height and overflow:scroll properties to achieve the effect you are after.
http://plnkr.co/edit/u1gdVHiv1bNOpfZ203rt?p=preview
<div class="modal-header">
...
</div>
<div class="modal-body" style="max-height:400px; overflow-x:scroll;">
...
</div>
<div class="modal-footer">
...
</div>
Related
How do I scroll to the bottom of a Modal window using Puppeteer (v1.15.0)? I need to click an Accept button at the bottom of that Modal window but that button is only enabled once scrolled to the very bottom of the Modal window. The Modal window contains a lot of text which requires scrolling given the Modal window fixed height.
For now, I am getting the button element location via .boundingBox() and then moving the mouse via relative pixel positions to the bottom of the modal vertical scroll bar and clicking it until I get to the bottom. Is there a more 'native' way in Puppeteer?
Modal HTML looks something like:
<div class="modal-header">
<h4 class="modal-title" style="text-align:center">Some Title</h4>
</div>
<div class="modal-body" style="height: 475px; overflow:auto;">
<div id="msgBody">lots and lots of text...
</div>
</div>
<div class="modal-footer">
<input id="modal-option" type="submit" class="btn btn-success" name="option" value="Accept" disabled="disabled">
<input id="modal-cancel" type="button" class="btn btn-warning" name="cancel" value="Decline">
</div>
With reference to your last comment, both page.click() and page.hover() scroll an element into view in the same way. The API documentation for page.click() states:
This method fetches an element with selector, scrolls it into view if needed, and then uses page.mouse to click in the center of the element.
For page.hover():
This method fetches an element with selector, scrolls it into view if needed, and then uses page.mouse to hover over the center of the element
I'm not sure why you might be having this problem but the easiest might be to rethink your app's UX—why do you have so much content in a modal that it leads to this problem?
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);">
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>
I need to set the position of a table container as absolute based on the <body> container rather than its nearest positioned parent container.
Fixed position is NOT what I want since it positions it based on the viewport and not the main body (this is the expected behaviour for fixed).
Here is a little more details and code showing what I want.
CSS:
#media screen and (max-width: 480px)
I need the <table> content to have an absolute position based on the <body> container
and not the <div id="SearchForm"> container which is the nearest parent with its position set
HTML:
<body>
<div class="page"> <!--position: absolute;-->
<div id="Header"> <!-- position: fixed;-->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
<table> <!--quicksearch-->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</div>
</div>
</div>
</body>
The reason behind this is that when the page is displayed in the mobile view for devices under 480px wide,
The <header> and <div id=searchform> stay fixed at the top of the screen/viewport regardless of scrolling down.
The <table> is the quickview search box that pops up during search showing nearest results.
The problem is, that this causes the quicksearch suggestion box to stay at the top as well. The rest of the page will scroll underneath it, but the suggestion box will stay "fixed" at the top of the screen.
This is somewhat fine if there were just a few results, but when there are more and it extends beyond the bottom of the screen/viewport, there is no way to scroll the suggestion box down to see the rest of them.
I could add a scroll bar for overflow but I want to be able to scroll beyond the quicksearch container and see the content of the main body if I keep scrolling down. As of now, the main content will scroll under the quicksearch results but always remain hidden under it.
if I use position:absolute; it will remain at the top of the screen and I won't be able to scroll down to the results that are offscreen.
If I use position:fixed; then the same thing will happen since it will be positioned based on its viewport and not based on the main body
My only current working option is to have the JS load outside DOM and thus have the ability place it anyway I want it.
This though creates other positioning issues when resizing the window beyond 480px for desktop view mode as it is harder to calculate the offset based on a child container that is deep in the body and keeps resizing dynamically when the window resizes.
Setting the table to position: absolute relative to the body will be impossible as long as any of it's parents has position: fixed.
You will have to move the <table> outside of the fixed header one way or another.
I would use an extra wrapper to be able to switch which element has position: fixed at what viewport width:
<body>
<div class="page"> <!--position: absolute;-->
<div class="ExtraWrapper"> <!-- position: fixed; above 480px -->
<div id="Header"> <!-- position: fixed; below 480px -->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
</div>
</div>
</div>
</div>
<table> <!-- quicksearch. position: absolute; below 480px -->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</body>
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;
}