Basically i am trying to insert scrollbar to slickgrid in my application. Here I am initializing the slickgrid and loading it on popup open. Issue is, when the rows are mininum (i.e one for example) the scroll bar appears when overflow-y is set to scroll. How to make the vertical scroll bar hide when the number of rows are lesser than the height of the given div and appear when the rows exceed the fixed height? Please find the code below.
<td id="popupView" style="padding-left:10px;float:left">
<a href="#" onclick="popupView()" style="color:blue;" >slickgrid </a></td>
Onclick of "slickgrid" a popup opens which will load slickgrid that is initialized below (javascript for grid is assumed to have initialized):
<div id="slickgridGrid" style="height:99%;width:100%;border:1px solid lightgray;overflow-y:scroll;" >
The overflow-y property is mentioned for appearance of vertical scrollbar in grid,which will appear even when a single row appears. Please help me resolve the problem. Thank you in advance.
var gridOptions = { autoHeight:true };
you need to set the autoHeight option and then the page scrolls according to the height of the grid. You can also set a min-height for the surrounding div to avoid a small grid when there is no data.
Related
By debugging this web interface, I found an issue about the horizontal view, as you can see in the image below, for horizontal view it need more vertical space, so it need to add a scrollbar, in my case between header and footer, like the old html frame concept. But the scrollbar don't appear, so the form is cutted. how can I fix it?
Also trying to resize it on desktop by following the LINK is without scrollbar.
You are using position: fixed. fixed and absolute both 'remove' the element from its parent, it thus no longer contributes to the height of the body. In my opinion the easiest would be to create a container with a flexbox and center the card that way.
Is there any way to detect that the user has focused on an input that is under the fixed footer?
I have a form that allows the user to enter multiple items and keep adding items. They normally are able to tab into the input boxes and the screen scrolls up automatically. After the addition of a sticky footer, it appears that the page doesn't read the footer as blocking the view. The scrollintoview() only scrolls the page up a little bit but is still covered by the footer. Additionally, the element.scrollintoview is not triggered until the user tabs into an input box that is actually outside of the screen instead of being obscured by the fixed footer.
I even tried modifying the tabindex, but the issue seems to be the fixed footer.
scrollIntoView is still an experimental feature. You can scroll to the element by setting scrollTop of the page (or scrollable container) manually.
Just take the element's (your input) position via element.getBoundingClientRect().top and if it's lower than the viewport height, set document.scrollTop (or container.scrollTop) considering your footer height
I'm working on a calendar picker, using Semantic UI. I'm using their modal module, but only half the popup is visible, and the rest overflows into the modal div itself. I want it to show up above the content. I know this is possible with javascript, but I'd like to avoid that.
Any ideas? I've tried adjusting the z-index, but doesn't work because it's embedded into the modal. Thanks so much. Please see below:
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working. With this atributte movePopup: false now popup semantic-ui is over the top from other elements;
follow my anwser here: https://stackoverflow.com/a/62688669/4530242
This is an issue when overflow is set on the parent div while using relative or absolute positioned elements within.
Basically, there is no way around this without forcing certain elements (Calander Pop-ups, Select inputs, etc.) to be position 'Fixed' on open.
The good news:
Certain libraries have accounted for this and have built in attributes/functions and the like to correct.
Bootstrap for example has this to add: data-container="body" which tells the element where to append to the DOM.
If you are not using a library with a fix:
A simple switch is not that easy here. You will need to implement a function that calcs the position of your Date input's bottom and appends the appropriate CSS left/top properties to that location. This is because 'fixed' fixes the element to one location on the page, regardless of parental rules.
Furthermore, you must account for scroll events as well. (What if the user scrolls while the calendar is open?)
UPDATE:
According to Semantic Documentation you are using:
$('.longer.modal')
.modal('show')
;
This forces the modal content to scroll, thus having an overflow-y: scroll set on the parent div.
Try using the following:
$('.long.modal')
.modal('show')
;
This page scrolls to cover all of the modal content, hopefully preventing the cut-off. If verified, we know the overflow is the issue.
I had a similar issue where I had a very long text in a span on a Semantic UI card which I needed to hide the overflow, but at the same I needed to show a popup of the whole text when user hovers over the shown portion of the text. I resolved the issue like this:
<div class="content">
<div class="description" style="position: absolute; width: 172px; height: 19px;">
<span style="display: block; width: 100%; height: 100%;" data-tooltip="A very very very very very very very long text" data-position="bottom left"></span>
</div>
<div class="description" style="text-overflow: ellipsis; overflow-x: hidden;">
<span style="white-space: nowrap;">A very very very very very very very long text</span>
</div>
</div>
The first div basically creates an invisible overlay on top of the second div so it displays the popup when user hovers over it. Also since height and width of the cards were fixed, I had no issues with hard-coding the height and the width of the overlay-ed element in this scenario.
NOTE: I've modified the subject and some of the content of this post.
I'm writing a responsive menu that is position:fixed and overflow-y:scroll.
The menu height can be greater than the height of the device screen, and I'm trying to find a work around so the menu is scrollable, regardless of either the document or the window/device height
I've put together a little demo here:
http://s.codepen.io/onebitrocket/fullpage/iysLI?
and here's the codepen iframed link:
http://codepen.io/onebitrocket/full/iysLI
Unless I missing something, I don't think a vertical fixed position menu is possible. Mainly due to the height of the menu being larger than the height of the device window.
Is there a solution to enable this?
-- Additionally
My initial question was this
The iOS bottom 'nav' bar seems to have a reserved touch area, which conflicts with the last elements in my menu - see the image below.
This prevents me from clicking on the last item in my menu.
Is there a fix for this?
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}