I tired open dialag on top page.
I add flag position in map propertis set to top but not work.
primefaces 6.0
Dialog visible in center.
public void openWindowNotification() {
try {
System.err.println("openWindowNotification");
Map<String, Object> options = new HashMap<String, Object>();
options.put("draggable", false);
options.put("modal", true);
options.put("position", "top"); // <--- not work
options.put("width", "90%");
options.put("contentWidth", "90%");
options.put("height", "90%");
options.put("contentheight", "90%");
options.put("size", "auto");
options.put("widgetVar", "editarDialog");
RequestContext.getCurrentInstance().openDialog("window/WindowNotification", options, null);
} catch (Exception e) {
e.printStackTrace();
}
}
Any ideas ?
edit:
fire bug show code:
> <div id="formFindPanel:bAdd_dlg" class="ui-dialog ui-widget
> ui-widget-content ui-corner-all ui-shadow ui-hidden-container
> ui-resizable ui-overlay-visible"
> data-widgetvar="formFindPanel_bAdd_dlgwidget"
> data-pfdlgcid="96e9d80e-f114-49a2-8699-1684bf9e3418" style="width:
> 90%; height: auto; left: 83px; top: 365.5px; visibility: visible;
> z-index: 1001; display: block;" role="dialog"
> aria-labelledby="formFindPanel:bAdd_dlg_title" aria-hidden="false"
> aria-live="polite">
in css is top propertis 365.5px what causes that dialog is in center.
I need set to top around ~15px;
You can just set a hard value (e.g 500) to the height, it should work.
Related
Hello, friends!
I'm new to Javascript. Using native JS.
I need when I click on the red button the blue button becomes disabled using removeEventListener. And vice versa - clicking on the blue button will add removeEventListener to the red button.
But my method does not work because the first array does not see the other array.
Thanks for the help. And, please, add comments to your code))
Here is the code and example https://jsfiddle.net/of83ycmx/
<body>
<button class="red">Red</button>
<button class="blue">Blue</button>
<div class="box">BOX</div>
<button class="red">Red</button>
<button class="blue">Blue</button>
<div class="box">BOX</div>
<script>
const box = document.querySelectorAll('.box');
const red = document.querySelectorAll('.red');
const blue = document.querySelectorAll('.blue');
red.forEach((item, i) => {
item.addEventListener('click', function redListener() {
box[i].classList.add('redBox');
//removeEventListener doesnt work because blueListener is not defined
//item.removeEventListener('click', blueListener);
});
});
blue.forEach((item, i) => {
item.addEventListener('click', function blueListener() {
box[i].classList.add('blueBox');
// item.removeEventListener('click', redListener)
});
});
</script>
made some changes that made sense to me. I am quite a beginner, so anyone who sees anything no-no or bad practice go ahead and call me out.
What should happen:
My interpretation of your explanation is this: When a user clicks on 1 of 2 buttons, the button that was NOT clicked should have its event listener removed.
Solution:
Making the functions accessible was your main problem-named functions inside of event listeners are limited to that listener (I assume). So instead move the function outside of the listener and simply call the function:
function blueListener () {
// Do stuff here
}
item.addEventListener('click', blueListener)
Now the function is accessible to the other function, so when you remove the event listener you wont get blueListener is not defined.
By wrapping the buttons and the box in a div allows you to select the button you need. Using .querySelectorAll() on the parent div allows you to select the button with the respective class (i. e the selecting the blue button when you click the red button).
The functions don't need any other info; they use this to access the clicked element. Then you can find the parent element, and select the box to change the background color, and select the respective button to remove the event listener.
DEMO:
const box = document.querySelectorAll('.box');
const red = document.querySelectorAll('.red');
const blue = document.querySelectorAll('.blue');
function redListener() {
var parent = this.parentElement;
var box = parent.querySelectorAll('.box')[0]
var blueButton = parent.querySelectorAll('.blue')[0]
box.classList.add('redBox');
blueButton.removeEventListener('click', blueListener)
}
function blueListener() {
var parent = this.parentElement;
var box = parent.querySelectorAll('.box')[0]
var redButton = parent.querySelectorAll('.red')[0]
box.classList.add('blueBox');
redButton.removeEventListener('click', redListener)
}
red.forEach((item, i) => {
item.addEventListener('click', redListener)
})
blue.forEach((item, i) => {
item.addEventListener('click', blueListener)
});
body {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(172, 172, 172);
margin: 0px 0px 40px 0px;
display: flex;
justify-content: center;
align-items: center;
}
.redBox {
background-color: rgb(156, 56, 56);
}
.blueBox {
background-color: rgb(66, 56, 156);
}
<div class="buttons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<div class="box">BOX</div>
</div>
<div class="buttons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<div class="box">BOX</div>
</div>
I wish to have all the tabs have the same height, no matter what contents are inside.
The tabs reside inside a div. Preferably I don't need to set a fixed height for this div, but instead the div should have the height of the mat-tab that has the most stuff.
Haven't found anything really works yet, if someone could help that will be wonderful!
My current code:
HTML:
<div fxLayout="column" style="min-height: 100%; height: 100%">
<mat-tab-group style="height: 100%">
<mat-tab label="1">
<mat-card fxFill class="mat-elevation-z4 about-card">
this mat-card contains the most amount of stuff
</mat-card>
</mat-tab>
<mat-tab label="2">
<mat-card fxFill class="mat-elevation-z4 about-card">
...a bunch of things
</mat-card>
</mat-tab>
<mat-tab label="3">
<mat-card fxFill class="mat-elevation-z4 about-card">
...a bunch of things
</mat-card>
</mat-tab>
</mat-tab-group>
</div>
CSS:
.about-card {
display: flex;
align-items: center;
justify-content: center;
margin: 16px;
padding: 16px;
border-radius: 8px;
}
Edit: Some boilerplate example:
First tab:
Second tab:
See how the heights of the content are different
This is a solution using javascript. You need to get the element with the max height and update the height of mat-tab-body-wrapper container :
ngAfterViewInit() {
const groups = document.querySelectorAll("mat-tab-group");
groups.forEach(group => {
const tabCont = group.querySelectorAll("mat-tab-body");
const wrapper = group.querySelector(".mat-tab-body-wrapper")
const maxHeight = Math.max(...Array.from(tabCont).map(body => body.clientHeight));
wrapper.setAttribute("style", `min-height:${maxHeight}px;`);
});
}
You can transform it using the angular API
Try this.
<mat-tab-group #myTabGroup id="myTabGroup">
ngAfterViewInit() {
this.setTabHeights();
}
#HostListener('window:resize', ['$event'])
handleResize(event: Event) {
this.setTabHeights();
}
setTabHeights() {
const tabCardBody = document
.querySelectorAll('mat-tab-group#setupWarehouseDataTab mat-tab-body');
if (!tabCardBody) return;
const maxHeight = Math.max(...Array.from(tabCardBody)
.map((elm: any) => elm.clientHeight));
tabCardBody.forEach((elm => {
elm.setAttribute('style', `height:${maxHeight}px;`);
});
}
My question is how could I use the mat-radio-button inside RTL mat-dialog?
Here are the details:
When I changed the Mat Dialog configuration to RTL such below :
private showCreateOrEditDialog(id?: number): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.width="100%";
dialogConfig.height="100%";
dialogConfig.maxWidth='100vw';
dialogConfig.maxHeight='100vh';
dialogConfig.disableClose=true;
dialogConfig.direction="rtl"; //<========= if I change it to ltr everything // working fine
let createOrEditDialog;
if (id === undefined || id <= 0) {
createOrEditDialog = this._dialog.open(CreateComponent,dialogConfig);
} else {
createOrEditDialog = this._dialog.open(EditComponent, {
data: id
});
}
createOrEditDialog.afterClosed().subscribe(result => {
// if (result) {
// this.rerender(Number(this.selecteddCity));
// }
});
}
the mat-radio-button stop working properly :
1- first thing the scroll-x extended to much such below screen shoot.
this problem disappeared when removing the mat-radio-buttons from my form
2- second thing I can't select any one of them, both mat-radio-button not selected but when my form was in LTR I were could choose one of them but in RTL direction I cant.
here is my angular :
<form autocomplete="off" #createModal="ngForm" (ngSubmit)="save()">
<h1 mat-dialog-title>Create New </h1>
<mat-dialog-content style="width: 100%;height:100%;">
<mat-tab-group>
<mat-tab [label]="'GeneralInformation' | localize">
<div class="row">
<div class="col-md-4" >
<mat-form-field >
<mat-radio-group aria-label="Select an option" labelPosition="before" name='Readiness' required>
<mat-radio-button class='Readiness' [value]="1" >ready</mat-radio-button>
<mat-radio-button class='Readiness' [value]="0" >not ready</mat-radio-button>
</mat-radio-group>
<label id="Readiness-ID">Readiness</label>
</mat-form-field>
</div>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<div mat-dialog-actions align="end">
<button mat-button type="button" [disabled]="saving" (click)="close(false)">
{{ "Cancel" | localize }}
</button>
<button
mat-flat-button
type="submit"
flex="15"
color="primary"
[disabled]="!createModal.form.valid || saving">
Save
</button>
</div>
</form>
I got it . its a weird problem but when I check the materialize.css file I found below CSS tags :
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
What I did simply I commented them and every thing working fine !
/* Radio Buttons
========================================================================== */
/* [type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
} */
Update:
Similar problem for Checkboxes,so, you should comment below css in materialize.css file :
/* [type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
} */
Note: materialize version is Materialize v0.97.7 (http://materializecss.com)
I would like to get the current slide index onChange and not onClick but I don't know how do do that.
First, I had it with ng-click, like this:
In the .html:
<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
<li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
style="background-color: #0a0a0a; height: 100%;width: 100%;">
<img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>
</li>
</ul>
And in the .js:
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currIndex = 0;
var slides = $scope.slides = [];
$scope.addSlide = function(media,data) {
slides.push({
imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
id: currIndex++,
data:data
});
};
$scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
for(var i=0;i<enrichedImages.length;i++) {
var enrichedImage=enrichedImages[i];
$scope.addSlide(enrichedImage.previewImage,enrichedImage);
}
$scope.setSelectedImage =function(imageUrl){
$scope.currentEnrichedImage=imageUrl;
}
I've tried on put an onchange="setSelectedImage(slide.data)" in #my-carousel, but it doesn't work since the slide is unknown when the change occurs.
I hope someone can help me.
You can't use ngChange because the directive doesn't expose any ngModel
From the ngChange docs
Note, this directive requires ngModel to be present.
But you have the active property that you can $watch
$scope.$watch('active', function(newIndex, oldIndex) {
if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
// invoke your function here
}
});
Here is a forked plunk
It seems that active is holding the current index.
You should be able to just use $scope.active.
I am trying to make an alert bar slide in over my header bar in jQuery mobile. So far I have got the slide in down, but I am having trouble with the CSS. I originally tried make the outer most div with position: absolute; top 0px: which makes it slide over the header from the top, but then inside Safari on the iPhone, the close button is cut off and you have to scroll to the right. How do I fix that?
Here is the HTML code for the alert bar:
<div class="ui-bar ui-bar-b error" style="position: absolute; top: 0px;">
<h3>
Form Validation Errors
</h3>
<div style="display:inline-block; width:8%; margin-top:0px; float: right;">
Dismiss
</div>
<ul class="validation_errors_list"></ul>
</div>
I ended up finally use this CSS. The alert bar slides directly over the header.
//you only really need this just to get it to slide over the header nicely and make sure you use top:0 if you always want it to be at the top. The plugin I made shows in/out the error message at position you are scrolled to in the document
.alert{
position: absolute;
z-index: 9998;
width: 100%;
height: 30px;
display: none;
color: #ffffff;
text-shadow: none;
font-family: Helvetica,Arial,sans-serif;
}
//This CSS is only used if you have an X button to close the alert. See the plugin below.
.alert-button-container{
display:inline-block;
margin-top:-10px;
margin-right: 15px;
float: right;
}
Here is my HTML Code (note the ui-bar class is a jQuery mobile class that you need to add so you don't have to mess around some of the width and sizing stuff).
<div class="ui-bar alert">
<div class="alert-message"></div>
</div>
Here is a custom plugin I made from jQuery to do this alert bar.
Features + Use Cases
Features: Fades In/Out gracefully, can inject custom HTML error messages, can render a list of messages, slides over header, has a close X button for error messages, works on all browsers that I have tested so far (IE, iOS, Firefox), error messages appear at the position you are scrolled to in the document. No more have to scroll up to see the error :)
Form Validation Errors. You can pass in an array of error messages and it will parse it into a list.
var messages = new Array();
messages[0] = 'My Message';
//prevent from showing accidentally
if(messages.length > 0)
{
$(".alert").alertBar('error', "<h2>Form Validation Errors</h2>", {
'errorMessages': messages
});
}
Success or action messages:
$(".alert").alertBar('success', 'Removed From Your Itinerary');
////////////plugin code
(
function($) {
$.fn.alertBar = function(alertType, alertMessage, userOptions) { //Add the function
var options = $.extend({}, $.fn.alertBar.defaultOptions, userOptions);
var $this = $(this);
$this.addClass(options.cssClass)
.empty()
.html(alertMessage)
.css('top', $(document).scrollTop());
if(alertType == 'success')
{
$this
.fadeIn()
.addClass('alert-success')
.delay(options.animationDelay)
.fadeOut();
}
if(alertType == 'error')
{
var button = $('<div>')
.addClass('alert-button-container')
.append(
$('<a>').attr({
'href': '#',
'data-role': 'button',
'data-icon': 'delete',
'data-iconpos': 'notext',
'class': 'dismiss-error'
})
.append('Dismiss')
);
//build error container
$this
.addClass('alert-error')
.append(button);
//add optional items to error container
if(options.errorMessages)
{
var $messageList = $('<ul>').addClass('error-message-list');
for ( var i=0, len=options.errorMessages.length; i<len; ++i ){
$messageList.append(
$('<li>')
.append(options.errorMessages[i])
);
}
$this.append($messageList);
}
//show alert bar
$this
.trigger('create')
.fadeIn();
$(".dismiss-error").live('click', function(){
$this.fadeOut();
});
}
if(alertType == 'informational')
{
$this
.addClass('alert-informational')
.fadeIn()
.delay(options.animationDelay)
.fadeOut();
}
return $this;
};
$.fn.alertBar.defaultOptions = {
cssClass : 'alert',
alertBarType: '',
animationDelay: 1500
};
})(jQuery);
additional CSS classes if you use this. It just changes the color of the bar.
.alert-success{
background-color: #8cc63f;
}
.alert-error{
background-color: #ed1c24;
height: auto;
}
.alert-informational{
background-color: #0071bc;
}
Example picture: