I have a section with silverlight component that is visible depending on the status of records.
If I set that section's Visible By Default = true and hide it in some cases => it works.
But I could not set it Visible by default = true because the screen loading is NOT smooth (the silverlight component appears and disapears)
Alternately, I hide it by default (Visible by default = false) and only show it if needed (jscript - onload)
=> it does NOT work!! The silverlight component is empty! I've already tried a very simple silverlight component with just a simple label, but it's still the same issue.
I guess it's a problem of loading siverlight webresource on MSCRM 2011...
Please help. Thanks.
I found out the problem, I think it's a bug in CRM. In my onload, I add it
var s = document.getElementById("WebResource_silverlight");
s.style.height = "100%"
and then it's visible again :)
Related
Background
For React Leaflet v2, there was an NPM plugin, react-leaflet-control, that allowed you to create any kind of control and place it into the react-leaflet control container. Obviously with the introduction of RL-v3, this no longer works in v3 with the API changes. I want to create a custom control wrapper to allow me to place in it any type of React Node.
Current status
The code that I have currently works...but doesn't. I pulled from the example in this Stack Overflow post: React Leaflet V3 Custom Control that gets me to the 99% solution of creating a custom control. However, my use case is a toolbar on the map with buttons that are interactable (colors to designate active tool). With this code, however, I have that functionality, but because every render causes a new control to be created, the Tooltip flickers as it is losing its anchor element.
Desired behavior
I want a toolbar that allows users to select tools to perform actions on the map (think old-school leaflet-draw. And to provide feedback, I want the button to change color when the tool is active and for UX, I want tooltips to describe the action of the button.
Actual behavior
The toolbar exists, users can select tools and there is UI feedback, however, the tooltips lose their anchor element as the control is removed and re-added on every render when selecting a tool.
Code Sandbox
https://codesandbox.io/s/react-leaflet-custom-control-n1xpv
I ended up with an answer that kind of takes in what #teddybeard was saying. If I just created my new div with the class as suggested, it would be placed on top of any default controls such as ZoomControl or ScaleControl. Instead, what I did was grab the actual position div container from the DOM, and then created a ReactDOM portal into that container and added my control in that way.
It works, doesn't have the issues with visual flashing due to the React Effect removing and re-adding the control on every render and I still get the same positioning.
It's live on npm and github at https://github.com/chris-m92/react-leaflet-custom-control and https://npmjs.com/package/react-leaflet-custom-control
const POSITION_CLASSES = {
bottomleft: 'leaflet-bottom leaflet-left',
bottomright: 'leaflet-bottom leaflet-right',
topleft: 'leaflet-top leaflet-left',
topright: 'leaflet-top leaflet-right',
}
const Control = (props: Props): JSX.Element => {
const [container, setContainer] = React.useState<any>(document.createElement('div'))
const positionClass = (props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright)
React.useEffect(() => {
const targetDiv = document.getElementsByClassName(positionClass)
setContainer(targetDiv[0])
}, [])
const controlContainer = (
<div className='leaflet-control leaflet-bar'>{props.children}</div>
)
L.DomEvent.disableClickPropagation(container)
return ReactDOM.createPortal(
controlContainer,
container
)
}
export default Control
For a project I am using Microsoft webchat smart display sample.
Smart Display github link
Now I want to add a Text box on the screen so that user can use voice as well as text as input. As the code is using directlinespeech adaptor how can I add textbox in this code.
You can achieve this by simply including the SendTextBox component within the Composer API container. There is nothing pretty about how the below code renders as it is lacking any styling. You will need to play with the CSS to get it to look how you wish. As you can see in the included image, the send box is rendered at the top of the page. I did change the background color to make it more visible within the image.
import { Components } from 'botframework-webchat';
const { SendTextBox, Composer } = Components;
[...]
return (
!!directLineSpeechAdapters && (
<Composer {...directLineSpeechAdapters}>
<SmartDisplay />
<SendTextBox />
</Composer>
)
);
Hope of help!
New to React, and I'm trying to add a loading indicator based on a state change. I see the loading indicator being added and removed in the Chrome inspector, but it isn't visible in the browser. To make sure it wasn't a CSS issue I reversed the logic - showing the indicator by default and hiding it when loading is occurring - and this causes it to always be visible. Again, I see it appearing and disappearing from the Chrome inspector, just not in the browser. This same method seems to work elsewhere, so I must be missing something.
I also tried adding and removing a CSS class to toggle visibility and I see the same effect - the class is added and removed in the inspector but no change is happening in the browser. Could something be preventing re-render?
I inherited this project so am not completely familiar with the code. Any hints for what I could look for would be much appreciated!
I'm seeing the same behavior in both Chrome and Firefox.
render(){
return (
{this.state.filtering ? <div className='filter-loading-indicator'><img src={loadingGif} /></div>: null}
)
}
I am using Angular js. The issue is when bootstrap model open by default .modal-backdrop class is applying and because of this whole screen get dim and not enable. please suggest me something.
$(".modal-backdrop").fadeOut()
$("#formId").removeClass('.modal-backdrop')
By design a modal is supposed to overtake control of the screen, hence the backdrop.
That being said, you can display the modal without the backdrop.
$("#myModal2").modal({backdrop: false});
https://getbootstrap.com/docs/4.2/components/modal/#options
Angular has configuration as well
config.backdrop = false;
https://ng-bootstrap.github.io/#/components/modal/examples#config
Here is a stackblitz example with backdrop disabled
https://stackblitz.com/angular/aqvnlngdjon
I have a extjs panel rendered inside a div like this:
panel = new Ext.Panel({
layout : 'fit',
renderTo: 'my_div',
monitorResize: true, // relay on browser resize
height: 500,
autoWidth: true,
items : [
centerPanel
],
plain : true
});
After the page has loaded the panel is empty, but when I resize the browser the contents appears by magic!
I think the data has not finished loading when the panel is rendered the first time.
How can I get the contents to show without resizing the browser?
I suspect the issue is that you need to explicitly cause the panel to be rendered. After creating the panel, make the following call:
panel.doLayout();
Sencha documentation says "A call to this function is required after adding a new component to an already rendered container, or possibly after changing sizing/position properties of child components."
Any reason why you're nesting a panel within a panel? Seems like centerPanel could be directly rendered to your containing div. Also, the issue is most likely how you have centerPanel configured, or how you're loading it, neither of which you're showing here. You should not need to call doLayout() manually in this case, it's probably an issue with how your components are configured.
bmoeskau is right, also my guess is you have an async server request that loads your data (store.load, ajax, etc) -you could call the layout after that store loads by regestering a callback function (see sencha docs)
tedder suggestion helped me, but in itself did not solve a similar problem I had: adding one Ext.draw.Component I got a blank panel.
The curious part is, the panel looked white, but the DOM components were all there and I could inspect them using e.g. Chrome developer tools.
I got it working by using a workaround. I added those 2 instructions after the call to this.add(component):
this.setVisible(false);
this.setVisible(true);
Hiding the panel and then making it visible again, in some obscure way, does the job.