With WebKit-based browser when I go with the mouse over the popup-header (where the month is defined) the entire popup "collapses/shrinks".
I went then to the richfaces showcase page to see if the problem exists there too, but there the popup width/size doesn't changes.
I look at the code and tried to set the width in mine too with style="width:200px", but there is no effect...
If I look with FireBug(F12) the element property width doesn't even appear:
element.style {
position: absolute;
z-index: 3;
left: 459px;
top: 225px;
}
And here is the calendar code:
<td style="font-size: 5pt; border: 0; min-width: 60px">
<rich:calendar id="startDate" value="#{detailModel.afterObject.startDate}"
datePattern="yyyy-MM-dd" enableManualInput="true"
style="width:200px"
disabled="#{detailModel.mode == detailModel.viewMode}">
<f:validateBean/>
</rich:calendar>
<h:messages for="startDate" style="color:red; font-size:12px;"/><br/>
</td>
Any suggestion why it doesn't work in my code?
The style applies to the invisible div that contains the input and the button, what you want to use is popupStyle or popupClass. See the docs.
Related
I want to hide the scroll bar for mat-select-filter and show only for mat-option in Angular .
In AppComponent.html
<mat-form-field class="input-permissions">
<mat-select
placeholder="Permissions"
multiple
[formControl]="permissionsControl"
disableOptionCentering
>
<mat-select-filter
[placeholder]="'Search Permissions'"
[array]="permissions"
(filteredReturn)="filteredList = $event"
[displayMember]="'appPermissions'"
[showSpinner]="false"
>
</mat-select-filter>
<mat-option
*ngFor="let permission of permissions"
[value]="permission.value"
>
{{ permission.value}}
</mat-option>
</mat-select>
</mat-form-field>
Now it is showing like this,
I want to show the scroll bar like this,
Any help would be appreciated.
I was able to solve this by using virtual scroll inside mat-select for mat-option in Angular.
https://material.angular.io/cdk/scrolling/overview
The dynamite solution is to use position:sticky and z-index properties. You can try adding the following CSS to the item you want to stay fixed while the items below it are scrollable:
.class-name {
top: 0px;
position: -webkit-sticky;
position: sticky;
z-index: 100;
}
I have a modal window that shows a few data that also has Images which open in Blueimp gallery. The problem I have is, when the image is opened in BlueImp gallery, the image is not vertically aligned in the middle of the screen. Its either to the bottom or to the top and it depends on where I have scrolled in the modal window. I need to go to the middle of the modal window and open the gallery in which case the Lightbox looks centered. This issue doesnt happen when blueimp is used directly in the page without a modal. It appears the blueimp gallery's lightbox is centered to the whole modal height instead of the viewport height. How can I override that for blueimp inside modal windows only? Is there a css fix or js fix to override this when blueimp is used in boostrap modals?
Here is a sample of my set-up:
<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-xl">
<div class="modal-content" uib-modal-transclude="">
<div class="lightBoxGallery">
<a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
<img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
</a>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol> </div>
</div>
</div>
</div>
</div>
My set-up: Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery
UPDATE:
The problem I am having here is, my Bootstrap Modal window has overflow-y as scrollable and it has a fixed positioning:
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
And when the blueimp-gallery is opened, as a child div with fixed position, it is positioning the Div to the center of the parent's fixed position instead of center of the viewport:
.blueimp-gallery {
position: fixed;
z-index: 999999;
overflow: hidden;
background: #000;
background: rgba(0,0,0,.9);
opacity: 0;
display: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none;
}
The blueimp-gallery is aligning to the middle, but I dont want it aligning to the middle of parent (modal) div. I want it aligned to the middle of viewport. For example, in my laptop, my modal has a height of 2000px where as my viewport height is a lot less like 860px. That is why the gallery lightbox is opening either to the top or bottom of the viewport unless the user is right in the middle of the modal window. If I place the blueimp-gallery directly in the body without the modal window, I dont have this issue. But in this use case, I have to place the blueimp-gallery inside a Modal window that has variable height depending on the dynamic content loaded in it.
I am still stuck on this, does anyone have a suggestion to this problem please?
The only way I was able to resolve this issue was to pull the "#blueimp-gallery" element out of the Modal Window and then insert it again as a direct child of the body element. Using Jquery, I added this code that fixed the issue:
$(document).ready(function(){
$("#blueimp-gallery").prependTo($("body"));
});
Now, after the above code, the BlueImp Gallery's fixed position is relative to the body element and therefore the height is that of the viewport. The Modal height no longer affects the BlueImp Gallery's height since it is now placed as a direct child of body element.
You should try to put the blueimp in a div with the class row and then another div with the class col-md-6 not 100% sure but it should be alligned in the middle then.
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="blueimp-gallery" class="blueimp-gallery vcenter ">
...
</div>
</div>
</div>
Edit tried it it has to have container tag above it to.
most likely this is not the sollution to getting it to the center vertically but this is worth a try i guess
ADDITION
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
create a costum tag add it in a css file and call on it.
I'm using Ionic Framework to develop a mobile application for Android.
My issue is that I need to have a list of containers at random positions and are able to be clicked.
The list of containers are displayed correctly at the random positions but the click areas only work when i click at the top of the view, not at the position itself.
The clicking works fine in the mobile browsers at the correct position but when I run the app as a native application in Android, the clicks messed up.
It seems like clicking areas are lined up at the top of the view, does anyone know what is causing this?
The codes are here:
HTML file
<div class="col" ng-model="qtablelayout">
<div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
<h2>{{qtable.tableNo}}</h2>
<ul>
<li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
<li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
</ul>
</div>
</div>
CSS file
div.tablediv
{
position: absolute;
background: url("../img/table/tablestatus.png") no-repeat;
color: #fff !important;
width: 178px;
height: 178px;
padding: 0;
margin: 0;
text-align: center;
display: block;
overflow: hidden;
}
The Controller side
$scope.tblActions = function(m)
{
alert("x:" + m.x + ",y:" + m.y);
}
I found out the cause of the problem is that I had an Ion-Refresher before the list of containers and it seemed to have shifted up the clicking areas together with the space for the Ion-Refresher.
It worked when I put the Ion-Refresher at the bottom of the HTML.
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
In my extjs project, I have some panel's to which I am showing toolbar on mouseEnter event. This is working fine. But when I just update the panel with new html then the mouseenter event is not working on it.
panel.update('hello');
Then I realised through Chrome developer tool that the update method is erasing the last nested div inside panel before writing the new text to it (ie 'hello').
Each panel has 3/4 nested div's but when we use update(), the panel has only 2 nested div's?
This was the main reason which was not invoking the mouseenter event on the panel because I think the Ext is unable to identify the panel as a valid panel after update() method.
Anyway, later I solved this issue by checking the panel variable in chrome console like below.
panel.body.dom.childNodes[0].children[0].childNodes[0].data = 'hello';
The above implementation looks disgusting but it worked for me. Any other nice way to do this?
Edit :
//In controller
this.control({
'#monthCalendar>panel>panel': {
render: function(container){
container.on('mouseenter',function(){
//do something here
},container,{element: 'el'});
}
}
})
Before Update:
<div class="x-panel x-box-item x-panel-default" id="panel-1078" style="left: 870px; top: 0px; margin: 0px; width: 174px; height: 52px;">
<div id="panel-1078-body" class="x-panel-body x-panel-body-default x-panel-body-default x-box-layout-ct" style="width: 174px; height: 52px; left: 0px; top: 0px;">
<div id="panel-1078-innerCt" class="x-box-inner " role="presentation" style="height: 50px; width: 172px;">
<div id="panel-1078-targetEl" style="position: absolute; width: 172px; left: 0px; top: 0px; height: 1px;">
March 01
</div>
</div>
</div>
</div>
After update:
<div class="x-panel x-box-item x-panel-default" id="panel-1078" style="left: 870px; top: 0px; margin: 0px; width: 174px; height: 52px;">
<div id="panel-1078-body" class="x-panel-body x-panel-body-default x-panel-body-default x-box-layout-ct" style="width: 174px; height: 52px; left: 0px; top: 0px;">
February 01
</div>
</div>
I am available on Sencha chat room.
Your event handler stops working because your update() erases the inner elements added by the panel's layout.
You are using either HBox or VBox layout on your panel, which adds additional HTML elements inside the main one, as you noticed. If you call update() on the main component's element, you erase the inner elements added by the layout, including that on which your event handler was listening.
The solution is to either:
use a simpler layout on your panel, such as Auto;
or
update the inner element added by the layout:
panel.getLayout().targetEl.update('Updated');
If you want to update the content of a panel, you should call
panel.body.update('hello');
This will update content area element only and will not ruin the panel integrity. As far as I know, calling update directly on panel is wrong, because call to function inherited from AbstractComponent will not take into account internal panel's structure and will overwrite essential panel's markup.