Is it possible to control the rendering of an element in polymer? I do have multiple paper-tabs and I want to render only the visible content first and after that render it in the background or render it on visible. I want to optimize that, because I have a lot of elements in every tab and the rendering performance is not so good.
I'm using the latest polymer version 1.7
Edit: The hidden attribute of the web component doesn't effect the rendering.
Here are some ways in which you can achieve this
Include elements of each tab inside a dom-if and make dom-if true only when tab is selected
Move all the elements/UI inside each tab into a new element and lazy load those elements only when tab is selected. You can lazy load elements using importHref
Related
I cannot drop elements onto iframe that is rendering my own components.
I'm trying to implement drag and drop functionality to a child iframe component.
After passing a dropRef, from a pareent, to a component rendering the iframe, dropping works only on components outside the iframe (IFrame is rendering my own components, not a separate website, so there is no CORS policy problem).
However, dropping does not work on the elements inside the iframe, even after passing the dropRef inside.
I checked this, and some other examples, but nothing seems to be working (Examples below seem to show wrong information in the alert).
https://codesandbox.io/examples/package/react-dnd-multi-iframe-backend
Is there any simple way to drop the draggable elements into the iframe?
If a website uses react, how can i grab an element by class?
For example here is a div:
<div class="Blockreact__Block-sc-1xf18x6-0 Flexreact__Flex-sc-1twd32i-0 IgxsY jYqxGr"></div>
How can i grab this div with javascript everytime, if the website gets built again?
If im correct the react classes are always different after every build, or will it stay the same always?
If the classes assigned to the element you want are unpredictable then you need to change your approach to finding the element.
For example, you might look for an element which is the third next sibling of the first h1 in the document.
The specifics depend on the precise nature of the DOM you are dealing with.
I'm working with Apex Version 20.1 and my problem is the following:
I have an interactive grid with a link column which referes to a modal dialog.
After closing this dialog with a "Close Dialog" process, the grid should be refreshed. I've changed to Event Scope dynamic and static container is the static id from my interactive grid. This works fine, but just once ! When the grid is refreshed and i open and close the dialog again, nothing happens !! What's missing here? 😕
Thank you
Anja
According to the documentation there are two types of event scope: Static and Dynamic, the dynamic scope is described as following:
Dynamic - Binds the event handler to the triggering elements for the
lifetime of the current page, including any elements that are updated
by Partial Page Refresh (PPR). Specifying Dynamic causes an additional
field Static Container (jQuery Selector) to be displayed. Specifying a
Static Container can help improve the performance of the way events
are handled with a Dynamic Event Scope. This should be an element on
the page that itself does not get re-created, but contains the
triggering elements that are re-created using Partial Page Refresh
(PPR). This element reference must be defined as a jQuery selector.
For example if you have a dynamic action that does something to the
rows of an interactive report region (which is re-created by PPR),
this would need an Event Scope of Dynamic, in order for the dynamic
action to still work after the report has been refreshed. And here,
the Static Container value could be set to a jQuery selector selecting
the region's Static ID value, for example: '#my_region'.
the static ID must be an element on the page that itself does not get recreated, but contains the triggering elements that are recreated using Partial Page Refresh (PPR). Which means you cant use the static ID of the IG, but you can still use a JQuery selector of an Elements which is parent of the IG (for example body selector)
I want to dynamically add menu items to an mdl menu. However, I have not figured out how to register the new items with mdl so that they work properly.
Here is a codepen showing the different behavior. Notably, the dynamic item does not have a ripple effect, or close the menu on click.
That code pen uses componentHandler.upgradeElement on both the newly created item, and the original menu element to no effect. I've noticed that the properly created menu items also have another class (mdl-js-ripple-effect) in addition to some other attributes, but manually adding that class, or trying to futz with element data resulted in a lot of errors in the mdl javascript. I assume that a few proper calls to componentHandler methods is all I need, but I haven't been able to find any documentation on its proper use with subelements.
This sadly is currently pretty complicated and doing it will in fact have performance issues due to bugs. Not recommended.
The best thing to do would be to destroy the menu and rebuild it on-the-fly.
MDL is meant for more static sites, Polymer is recommended for sites needing more complex controls and dynamic building.
You could also go the route of not using our JS and writing your own component for this need.
I'm having trouble with the drop-down navigation being flattened and completely shown for several seconds while a page is loading. It usually only shows on pages that are more info-heavy, so I'm assuming its loading the navigation really fast.
Is there a way to delay loading the navigation bar until after all of the info is loaded? I tried writing a javascript onLoad function, but that just led me to a bunch of form errors for some reason.
One simple method could be wrapping your navigation in an HTML element with attribute display:none;, then when the DOM is loaded you could remove the attribute. I think that should keep it hidden from the beginning.