Framework7->CSS: How to make tabs under popover scrollable - css

My question pertains to framework7 implementation, but is basically a CSS question:
I have tabs under a popover. I need to make these tabs content vertically scrollable. The default implementation of tabs has scrolling enables, but when these tabs are placed under popover (modal if you like) then these tabs stop being scrollable.
I have made a basic fiddle, to better explain the issue. In the fiddle, if you click "Click Me" and then go to "Account" tab you will notice that the tab is not scrollable.
THanks

There you go, fixed: https://jsfiddle.net/xbvqksu8/3/
This CSS was added:
.popover-inner {
max-height:100vh !important;
}
.list-block ul {
overflow-Y:auto;
}
If you want your menu to fit in the screen better change the 100vh to something lower. Good luck!

#Fausto NA is great.
There is a little problem because the popover has top margin (usual 8px).
Therefore something like that is needed:
.popover-inner {
max-height: calc(100vh - 8px) !important; // last fallback
max-height: -webkit-fill-available !important; // fallback: supported by many webviews
max-height: stretch !important; // still not widely supported
}
References: Can I use Intrinsic & Extrinsic Sizing

Related

Bootstrap4: Width slightly too wide on mobile with animations (causes scroll at bottom)

I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element

Nested flexbox UI with scrolling content rendered differently in Safari and in MS Edge

See the frozen DOM state of the page in this Plunker.
The code should represent a modal with four tabs, of which the third tab content is open. Should look something like the image below (rendered in latest Chrome): three divs side-by-side which contain overflowing content and the divs are scrollable. On the bottom there's a div containing Plotting method text and a button. The same view is visible in Firefox as well.
What I see in latest Safari:
After disabling the style
height: 10px;
from .heatmap-multiple-variable-container
the rendered Safari content is:
notice how the third content div, which is scrolled way down, does not present all of its content (the Select all row) as it does in Chrome. Also the div containing Plotting method is not visible.
In Microsoft Edge, the div containing Plotting method is visible but the same scrolling problem as in Safari exists.
Any ideas on how to modify the Flexbox layout to display the menu in the same manner for all of the three browsers? I'm really stuck, so any pointers you can give me are appreciated.
Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)
body .multiple-variable-selection-columns-container {
height: calc(100% - 66px);
}
body .modal-menu .tab-content {
height: calc(100% - 57px);
}
body .modal-wide .modal-dialog .modal-content .modal-body {
height: calc(100% - 110px);
}
ng-include {
display: block;
}
You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.
I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.
I hope I could help you.

set body overflow on hover div without javascript (css only)

I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).
When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.
With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.
.noscroll { overflow:hidden !important; }
Tried to do this with CSS only but can't get it to work, tried several things like:
.nav .panel:hover > body,
.nav .panel:hover > html { overflow:hidden !important; }
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */
The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.
How can achieve the effect I want?
Image (click on right mousebutton to view larger image):
This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.

Bootstrap 3 popover doesn't work in "responsive" mode

Here is my JSFiddle for full code example.
Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.
I tried:
#fieldMode .popover {
min-width: 300px
}
#fieldMode .popover-title {
color: rgb(255,102,0);
background: rgb(176,205,249);
}
#fieldMode .popover-content {
color: rgb(12,66,144)
}
...but that doesn't seem to work. What's the fix?
On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/
#fieldModePopover {
display: inline-block;
}

CSS fullscreen layout with top menu and content filling remaining screen space

I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.

Resources