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;
}
Related
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.
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
I am currently struggling with the CSS of my mobile-view pages (handehlds, for example iphone in portrait view). Strangely, there is an approximate margin of 90 pixels to the right of the body/content container. I simply do not get the reason for that - any idea?
See it here:
http://quirktools.com/screenfly/#u=http%3A//bigbertha.golfanatics.de/testsite/&w=320&h=480&a=33&s=1
URL: http://bigbertha.golfanatics.de/testsite/index.php
Thank you in advance for any hints! best regards, Ralph
What you can do, is this.
body {
overflow-x:hidden;
}
This will remove the scroll bars on mobile. (from left to right)
Edit: I took another look at your site, and noticed that you have this on your html element
html {
overflow-y:scroll;
}
Remove that line, and voila :)
You have explicit width to #roksearch_results and you just apply opacity: 0;. You have to display: none; to this div ( or change the width to 100%).
#roksearch_result {
display: none;
}
And you also give scew transform to socialmedia navigation which goes beyond your width. You could overflow: hidden the navigation but this would hide the corners of the scewed socials so I would suggest to overflow-x:hidden to the body.
#body {
overflow-x: hidden;
}
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }