I am using Foundation off-canvas and the reveal-for-large class so that the sidebar is always visible to larger screens. In Chrome and Firefox, the sidebar always appears open between page loads, which is great. However, upon each page load in Edge and IE, the sidebar first does not appear (although left margin space has been reserved for it) - and then the sidebar slides in to fill the space.
It is distracting to have this animation on each page load. Is there any way to force the sidebar to stay open in IE? Or disable the animation perhaps?
Change the $offcanvas-transition-length SASS property to 0s.
Related
I've created a responsive dropdown/drilldown megamenu in Foundation 6.5.3.
It works great in every browser except Microsoft Edge and IE11. I expected problems in IE, but the edge issues threw me for a loop.
In Edge, the menu items get stacked vertically even though it is supposed to be a horizontal menu. As illustrated by this pen:
https://codepen.io/denpub/pen/KLRQGO
right now the divs that wrap the menus and the one that wraps the large menu contain both the grid-x and cell styles:
<div class="grid-x cell ..."></div>
seems to be the what causes the stacking issue and if I separate these like so:
<div class="grid-x ..."><div class="cell"></div></div>
it fixes the stacking issue in Edge, but causes the menu to lose the nice flex spacing in all browsers as illustrated with this pen:
https://codepen.io/denpub/pen/KLRojm
In IE11 all the menu items stack on top of each other. If anyone has a suggestion to resolve this it would be greatly appreciated.
My guess is it's the expanded class on the parent menu. This could cause the li's to go full width when there is less space.
When embedding a PowerBI report into a mobile app, switching the view from portrait to landscape results in an excess of grey space appearing below the report that wasn't there when the report initially loaded in portrait view. Switching back and forth between landscape and portrait does not restore the original/appropriate height inside the iframe it seems.
The report is loaded with the following configuration:
{
type: 'report',
embedUrl: 'https://app.powerbi.com/reportEmbed',
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
...
}
I would have expected the report to maintain the amount of space in the iframe needed to display report content and not have excess grey space remain/present. This seems like something that is being handled inside reportEmbed.*.js. Any assistance would be greatly appreciated.
The scrollbar in the image gives a relative idea of how far down we are in the iframe.
UPDATE (19/07/18): This was tested on an iPhone running iOS 9.3.
FitToPage option maintains the proportions of the page, and might still have gray shoulders remaining for iframes that don't hold the same ratio for height & width.
however, recent feature allows you to make the gray shoulders disappear:
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Transparent-Background
I am trying to customize the video player example that comes with the SDK. I am displaying the videoplayer on the left side of the screen and the playlist on the right side with the navigation through this playlist.
However I am able to display only few videos on the rightside. Hence I need to add scroll to the playlist so that I can display all the videos there.
I have reserched on it and found the rotextscreen that provides scroll but that opens a whole new screen which doesnot serve my purpose as I want to show the playlsit on tthe right side of the player more like you tube.
I cannot use Rogridscreen for the same reason as rotextscreen.
Is there any other component i can use to display the playlist and add the vertical scroll to the playlist or any other approach I can take??
I am a bit lost at the moment. Any suggestions would be really appreciated.
Have a look at roListScreen, a scrollable list will be on the left
When the slider loads all the content is stacked.
Please check the effect on http://smbsol.com/?lang=fr and switch between languages for example, you can see that the orbit content slider loads all the slides at once then puts them into a slider.
What would be a possible smart fix ?
Is there any way to not display the div until it finishes its loading?
I have required styles (from designer) applied on my TABs used in Actionbar for navigation and I use Actionbar Sherlock. They look perfectly from ldpi to xhdpi devices, but situation changes on xxhdpi devices.
I have only 2tabs and except mentioned styling, I have the same code as Sherlock DEMO app in "Tab Navigation". I found 2 older simmilar questions not answered yet.
Stacked ActionBar tab bar not filling parent
(I've got a simmilar problem, centered tabs. Sorry for inconvenience, I can't attach images because of rep points.)
and
action bar tabs not fill screen in android
Since the time of their posts, this is not only the issue of tablets, but now, there are many FULLHD (flagship) smartphones and this is becomming the big "design" issue.
I want my 2tabs to fill/match the full width of ANY device size, so in my case to fill 50% width each. Default Holo styled tabs doesn't look that bad (as shown in previous link), but my styled tabs on this big screen look much worse.
PS: Situation doesn't change if I make a text in tabs bigger or longer. Tabs don't adujst their width, instead they change their height and text takes 2 lines.
Unfortunatelly, this is a another JB changes:
https://android.googlesource.com/platform/frameworks/base/+/b8139af3dcae80c0030afd0354dc424a7c72c3d9
One of solution: set target SDK 15 or lower.