The title of this question may seem a bit confusing, but here is what is happening to me.
First off, I am using Notes/Domino 8.5.3 with UP1.
I have an Xpage with a edit mode custom control inside of it. Within the custom control are various elements using digit.forms. I have tried to set the custom control to be rendered only on edit mode, but even when it is in read mode certain dojo elements are STILL being rendered. To test this I even have set it to rendered=false for the control.
<xc:ccEditDocument rendered="false"></xc:ccEditDocument>
When I compare the source of the XPage with the custom control as rendered=false VS source of the XPage with NO custom control at all the following differences are encountered:
<script type=”text/javascript” src=”/xsp/.ibmxspres/dojoroot-1.6.1/ibm/xsp/widget/layout/layers/xspClientDojoUI.js”></script>
<script type=”text/javascript”>dojo.require(’dijit.form.Form’)</script>
and
enctype=”multipart/form-data” dojoType=”dijit.form.Form”
This is actually causing a problem for me with IE8 and iFRAME rendering of a PDF (it of course works in all other real browsers).
Is there a way to TRULY have the custom control NOT render the dojo form elements?
Thanks!
UPDATE
jjtbsomhorst had the fix! It was to add a conditional on the loaded property of the custom control.
<xc:ccEditDocument rendered="#{javascript:document1.isEditable()}"
loaded="${javascript:document1.isEditable()}">
</xc:ccEditDocument>
Thanks!!
Use the loaded property and toggle the loading of the element using a viewscope variable. This viewscope var is populated using a url parameter. Because you change the url, and do a full refresh, the loaded property is revaluated. I think this should cause the dojo not to render at unless the dojotype is loaded
You need to set the rendered property of the dojo module in the custom control itself. This will determine then at runtime whether or not the module will be added to the list of resources to be rendered.
Related
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
I have a set of tabs with proper roles and attributes for accessibility support. The content that tab controls gets loaded in via ajax. But each wrapper for the content loaded in also has proper tab pane roles and attributes.
The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding ID of the tab pane is missing for all of the tabs except the one that's currently active (because that wrapper with ID has been loaded). The exact error states: "ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM."
Since the ID will exist once the tab with the corresponding aria-controls attribute is active, is this really an error? Or is this just a case of a false positive because it's an automated test and they can only do so much.
In summary, What does aria-controls do and does it really need to refer to an ID that currently exists in the DOM?
aria-controls give your assisting technology a way to move to the controlled element.
If this element is not in the DOM or can't be accessed, then yes it's an error.
The two (the element with aria-controls as well the element with the referenced id) must exist at the same time, whether at page render or via JS injection.
The DOM is parsed by the UA/AT combo before the user even gets to the control or your script fires to make it exist. If you use JS injection then you need to make sure the DOM is re-parsed.
This would apply to aria-owns as well.
I don't know whether the following would work in your architecture, but it would solve the error problem:
Design the tabs so they are all in the page at the time it loads. Format those that should not be shown to be outside the viewport using absolute positioning and something like "left: -99em." Use AJAX to reset the positioning when the time has come to display the tabs. The result is that the ARIA ID dependencies will always be valid because the tabs are always part of the DOM.
I'm modifying a website, built with AngularJS, and in one page I have a WYSIWYG editor.
The whole widget that includes the editor, is a div that has 'ng-controller="TextsController"'.
In this div I have a button, clicking on it displays the editor. And the initializing of the editor happens in a directive - "richTextEditor".
So - I'm making a popup in this editor, that has to show some images from the server. I put the code for pulling the images in the controller ... and there I set
$http.get('/url/to/files').success(function(data) {
$scope.imagesFromServer = data;
});
and in the view I have
'ng-repeat="image in imagesFromServer"'
And the problem is that the ngRepeat doesn't see any items.
I have two ideas:
The view, containing the ngRepeat (the HTML for the editor, and the popup with the images as well) loads with AJAX, and at that very moment the scope variable is not set.
I'm initializing the scope variable in the wrong place. (Eventually has to be in the directive instead of the controller? ... but all examples I've seen and done so far - pull every data in the controller, and the view sees it directly.)
Hope I've described the situation clearly.
Thanks in advance.
In my telerik mvc grid, how can i change the text 'Displaying items xx-yy of zz' in footer. I just want to display it as "xx-yy of zz". I tried the following methods but couldn't succeed.
$('#MyGrid').find('.t-status-text').text("some HTML");
The above code changes the text on page load, but again changes to the default text when the data loads.
I also tried editing the telerik.grid.min.js file, but finally ended up no where.
One easier way would be to localize your grid and customize the DisplayItems resource message.
Of course your approach could also work (with a slight improvement) - you need to execute this logic when the OnDataBound event occurs (not only when the pages is loaded - as you currently do).
In an asp.net applicaiton I am using Hyperlink which points to an image. On certain condition I am setting its
"filter" property to alpha(opacity=70) for IE
and "opacity" prop to 0.7 for Firefox
so that it is shown dull to depict disable mode. This works fine in FIREFOX ie it shows dull in disabled mode but not in IE.
I see that the filter property is set on anchor tag and not on img tag present inside anchor. If I explicitly put the filter on image it works. But I am not able to do that programatically.
Any idea?
If you're not already, I would create some on/off CSS classes for the filter and then dynamically change the class that gets assigned based on your conditions. Then you may want to try putting each link inside a div and assign the classes to the div tags.