Dalie came up with a great solution to stop the "stretched" to the right dialog boxes when they appear in IE.
Fixing "stretched" XPage extension library dialog box in IE?
Dalie's solution was to set the width of the dialog box. This worked great. But now I am having the same issue with the extension library Name Picker. It has a width property which I set but does not seem to solve the problem.
To review, basically in IE dialog boxes are "stretched" all the way over to the right border of the dialog box. No matter where you move the dialog box the right side stays anchored in place.
Any solution to this issue?
Try forcing IE not to use compatibility mode by setting the X-UA-Compatible header to IE=8 (or even IE=Edge):
<xp:this.beforeRenderResponse><![CDATA[#{javascript: if (context.getUserAgent().isIE()) {
var response = facesContext.getExternalContext().getResponse();
response.setHeader("X-UA-Compatible", "IE=8");
}}]]>
</xp:this.beforeRenderResponse>
Related
I am using the extlib Dialog component to display some data. I want the user to only close the dialog via a button I have in it.
I can't see any option to disable the close icon in the title bar. Can someone point me to the documentation on doing this? So far I've checked the wiki + extlib book (maybe I missed it?).
css rules, again! As far as I can see there's no "native" way to get rid of that close button (and to be honest, I don't think it's a really good idea to do so; see below). But using some css you of course can hide anything you want on your page.
Just give your dialog some custom styleClass; at runtime this custom class is then added to the dialog's outer div-container.
The close button itself is an link inside a span; the has tow style classes, one being "lotusClose".
Finally adding this piece of code to your style sheet will hide the button:
div.yourCustomClass a.lotusClose {display:none;}
Caveat:
The "close" button is there on purpose. And instead of hiding it I would rather add some kind of validation code to your dialog's close event. There are numerous examples, but maybe you just want to refer to dojotoolkit.org's reference for
dijit.Dialog
(section "Forms and Functionality in Dialogs).
Btw: since the dialog is based on dijit.Dialog you may also want to browse stackoverflow's dojo section.
I am using Dialog control from extension library in xpages. The issue is regarding the center position of Dialog box.
when I click on link,dialog box appears, but on to the right bottom of the page not in center, I have tried in Chrome, Firefox and Internet Explorer too. Same issue in all the browser.
After some research, I found the way by providing the css style with specific Width to the dialog box. This helped me to get the dialog box to the center-bottom, But not in the center of the page.
How do I get the dialog control accurately in center of the page?
Summary of discussion: misplaced ExtLib dialog is caused by its content. Specifying the exact height and width of the dialog will solve the problem.
See also: Extlib dialog appears to be pinned to the right window border
I've been doing searches trying to find help on this, but so far all I have found is how to set options for popping up a SharePoint modal dialog box from custom code.
However, I haven't created any custom web parts to display modal dialogs. What's happening, is if someone clicks the upload document button in a library, the upload document modal dialog comes up, but the ok and cancel buttons are half off of the bottom of the box. Users can click on them, but it just doesn't look very good.
I started playing with the CSS to make the modal dialog box bigger to reveal the buttons, and that works for the most part, but the real problem is the grant user permission dialog box.
When that is clicked, it doesn't show the ok and cancel buttons, and maximizing the dialog box doesn't reveal them. The user has to hit tab about 5-10 times before the focus moves to the ok button and is then clickable.
I would post an image, but I don't have enough reputation to do so.
Has anyone come across this? It seems very strange that the out of the box setting would have this problem.
The CSS that I use to adjust the height and width of the modal dialog is:
.ms-dlgFrame, .ms-dlgContent, .ms-dlgBorder, .ms-dlgFrameContainer
I'm just trying to set the height/min-height values, but I haven't had much luck.
We're using Internet Explorer 11 to view the pages.
Stevangelista actually pointed me in the right direction, I wish I could mark comments as answers, and since I'm new I can't upvote the comment, but here's the solution:
I am using a customized master page, and that comment had me take a look at the elements in the page.
Since the master page is being used in the dialog boxes as well, I used the s4-notdlg class to remove parts that weren't needed in the dialogs. Those parts were pushing the buttons below the bottom of the screen.
I'm not a css expert, so there may be ways of keeping those parts and still have the buttons accessible, but the particular issue I was trying to fix was resolved by using the s4-notdlg class to objects in my custom master page.
I have a dojo text area which I'm binding it to a field. I saw that on browser, its height is OK but if I open the xpage in the Notes client its height is twice bigger. I tried adding height property for the text area, but it doesn't work.
Thanks in advance!
Browsers Firefox and XPiNC (XPages in Notes Client - that is XULrunner based on Firefox) show Dojo Text Area (dijit.form.Textarea) always with at least two rows even it contains only one line of text.
Other browsers like Chrome and IE work like expected.
You don't have a chance to change that behavior with style "height"/"minHeight" or parameter "rows".
The only solution I found is to create an own Textarea widget. But I am not sure if it's worth it...
This issue shows up only for contents with one line. As soon as you have two or more text lines Dojo Text Area's height adapts exactly - for all browsers.
Try setting the height using css styles, that should do it.
Update:
In case css should not be working here try using the classic HTML attributes 'cols' and 'rows'. I don't have Domino Designer ata hand right now, so I can't tell whether those attributes are available. If not you could add them yourself using the 'attrs' group.
How do you change the text within the extension library dialog box? No matter what I do, the text remains the same size. I can see the font change in the designer cleint but not in the browser. I tried looking at it with IE Developer Tools but I can't even see the text anywhere.
I have no idea what was going on yesterday but it just wasn't working. I was simply trying to set the text size of a computed field inside a dialog box. I changed the font size in the properties of the computed field and seems to work now, We have seen these issues on our dev server before.
I am not sure if you can change the text with text options but you can if you use HTML, and it should also work with CSS.
Standard <h1><h2><h... oh you get the idea works for me.