Here is a jsfiddle demonstrating the following issue.
I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.
<-- Button to Reveal Modal -->
Click For Modal
<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
<ul data-orbit>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
</ul>
</div>
Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:
$('.reveal-modal').on('opened', function(){
$(this).find('[data-orbit]').css('height','');
$(window).trigger('resize.fndtn.orbit');
});
However this fix no longer works in the newest version of Foundation. Is there any way to get it working?
Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.
In short I believe this is the answer:
$(document).foundation();
$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
OR
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(window).trigger('resize');
});
I looked at the following references:
Foundation 4.1.2: Orbit slider not shown in Reveal window
The one you listed as "hacky fixes" above
Squashed picture when using Orbit in a Reveal
Orbit height not set on accordion.
It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.
Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.
I forked your jsfiddle and added the changes here.
I hope that helps.
For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:
div.gallery-in-modal .orbit-container {
height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
max-height: initial !important;
}
Related
I've implemented a popover with number keys on it using this library https://github.com/alvarowolfx/ng-keypad.
When I click on an input field, the popover appears. But, sometimes the position of content of popover is not correct.
Can you please help me.
Here is my html:
<script id="keypad-popover.html" type="text/ng-template">
<ion-popover-view class="aiv-keypad">
<ion-content overflow-scroll=false>
<div class="ios">
<ng-keypad on-key-pressed='onKeyPressed'>
<ng-key ng-repeat='key in aivkeys' ng-key-data='key' ng-key-type='keypad.type'>{{key}}</ng-key>
<!--<ng-key ng-key-type='keypad.type' ng-key-data="keypad.data">{{keypad.data}}</ng-key>-->
</ng-keypad>
</div>
</ion-content>
</ion-popover-view>
</script>
In controller,
$ionicPopover.fromTemplateUrl('keypad-popover.html', {
scope: $scope,
backdropClickToClose:false
}).then(function(popover) {
$scope.keypad_popover = popover;
});
Expected,
Sometimes, this problem occurs,
While the problem could be described as overflow scrolling, the overflow-scroll=false attribute you're using on <ion-content> means you are explicitly using Ionic scroll, which is to use transform3d() in CSS to implement scrolling. Usually overflow-scroll=false is the default.
If you'd turn overflow-scroll=true the element would use "traditional" overflow-y: auto CSS rule instead of transform3d(). With popovers, this is usually enough to fix the problem you describe.
If not—you can disable element's scrolling altogether with scroll=false attribute.
I have searched the internet for a solution to this problem but have yet to come across one yet. I was hoping someone here has had experience with this and can help point me in the right direction.
I have a line chart created with Angular-nvd3 and I am using Bootstrap for responsiveness. Basically I have two charts per row. The problem I am running into is that when I first load the page, the charts are squished into a small width. I am not setting the width on the charts so that it can inherit 100% width and fill the container. As soon as I do anything with the browser, such as open the console or resize the browser, the charts scale to their correct width. I was wondering if there was any way to force a resize. I had a similar issue before when using c3d3 but using chart.resize() solved the issue. I do not know if nvd3 has a similar method as I do not have as much experience with nvd3. I was wondering if there was a similar method I could use or if there was a pure way with d3 to do this.
Here are some before and after pics to help visualize the issue:
Before:
After opening the console or resizing the browser in any way, it scales correctly:
EDIT: I should add that setting a fixed width circumvents the issue but then the inherent responsiveness goes away (new problems arise where graphs overlap at smaller browser sizes)
EDIT: Added Some code snippets that I hope can help. I am using rows and columns the Bootstrap way. I am also declaring the chart options in the JS
HTML
<div class="row">
<div class="col-sm-6">
<nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
</div>
<div class="col-sm-6">
<nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
</div>
</div>
JS
$scope.inletOptions = {
chart: {
type: 'lineChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) { return d.x; },
y: function(d) { return d.y; }
}
};
For those running into a similar issue, please see the following posts:
https://github.com/krispo/angular-nvd3/issues/259
http://plnkr.co/edit/ncT72d?p=preview
$scope.triggerResizeEvent = function() {
window.dispatchEvent(new Event('resize'));
}
If anyone is running into this problem, for me it was actually a very simple solution without a resize event.
This is my chart.
<div id="chart" class="row">
<div class="col-xs-12">
<svg>
</svg>
</div>
</div>
If I have no data to show, I simply hide the div using JavaScript:
function ShowChart(show) {
$('#chart').css("display", (show ? "block" : "none"));
}
But it was squished when I passed "true" to the function.
My solution was that I had to first show the div, then use .update() for the graph.
So, for me, this did not work:
d3.select("#chart svg").datum(chart_data);
chart.update();
ShowChart(true);
And this did:
ShowChart(true);
d3.select("#chart svg").datum(chart_data);
chart.update()
I'm trying to get to grips with Polymer version 1.0 but what I thought would be simple example is turning out not to be so. After after several hours of experimenting, and reading Polymer documentation I've not clue as to were I'm going wrong.
What I was trying to do is convert the Collapsing toolbar example from robdobson on GitHub to something that would work under Polynmer 1.0.
Here is the body of my code from within my index.html file
<collapse-toolbar query="(max-width: 500px)">
<div class="logo">
<a href="#">
<iron-icon icon="polymer"></iron-icon>
</a>
</div>
<paper-menu>
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</collapse-toolbar>
Here is the code from my custom element (collapse-toolbar.html) file:
<dom-module id="collapse-toolbar">
<template>
<content select=".logo"></content>
<template is="dom-if" if="{{smallScreen}}">
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<content select="paper-menu"></content>
</paper-menu-button>
</template>
<template is="dom-if" if="{{!smallScreen}}">
<content select="paper-menu"></content>
</template>
<iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
</template>
</dom-module>
<script>
Polymer({
is: 'collapse-toolbar',
properties: {
query: String
}
});
</script>
What I'm seeing when I run this in a browser (Chrome) is the following:
If I open the index.html file with my browser window set to > 500px wide, what I see is the Polyer icon and the paper-menu, which is exactly what I expect.
If I reduce the width of the browser window to <500px, the paper-menu disappears and a hamburger menu appears along side the polymer icon. If I click on the hamburger menu, NO drop down menu appears.
If I now scale the window back to >500px, the hamburger menu disappears but my regular paper-menu does not come back.
If I load the page with the window at <500px to begin with, the hamburger menu appears, but does not operate and when I expand the window to > 500px the paper-menu also does NOT appear.
Hoping someone can put me on the right track.
Inside index.html, you should use <paper-menu class="dropdown-content"> to make the dropdown menu work.
I have still no idea how to replicate the functionality of the original collapse-toolbar in polymer 1.0.
UPDATE:
Use <template is="dom-if" if="{{!smallScreen}}" restamp="true"> to make the menu reappear after enlarging the window.
I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using it.
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
I had to wrap the progress bar and tooltip in another element, but not nest the tooltip inside of the progress bar:
<div class="progress-container">
<md-progress-linear md-mode="determinate" value="50"></md-progress-linear>
<md-tooltip>Hello</md-tooltip>
</div>
I styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.
Demo: http://codepen.io/langdonx/pen/GowBeq
I know this is pretty old, but I just found myself a solution and maybe this can be used by others as well.
Putting the tooltip directly under the progressbar doesn't work, but you can wrap the whole thing in a div or span:
<div>
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
</div>
This way it works fine. Haven't found anything else yet and it doesn't seem to have a solution in the official discussions
I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}