I've noticed in V9 of drei there is a bug when combing the <Html> elment with <ScrollControls>.
I just want bind text to a 3D element but the ScrollControll makes the text scroll out of the view: CodeSandBox Example
It works fine in v8: CodeSandBox Example
I fixed this in this PR https://github.com/pmndrs/drei/pull/1126 we just have to wait until they approve it. But you can just patch the library yourself using https://www.npmjs.com/package/patch-package, it should be easy as it is just one line change.
Edit: Now that I think about it, you could probably fix it also by sending gl.domElement.parentNode as the portal prop.
Related
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
When switching from one point to another I would like there to be a 2000 millisecond delay so the user can click on a link in the tooltip. I have added the property 'delayForDisplay' which is supposed to address this but it does not work. Although the 'hideDelay' works when you move mouse out of view. Live example:
delayForDisplay: 2000
https://jsfiddle.net/re0r54cv/3/
Use secure urls in your project:
<script src="https://rudovjan.github.io/highcharts-tooltip-delay/tooltip-delay.js"></script>
Demo:
https://jsfiddle.net/BlackLabel/fwL9byht/
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
I am trying to make the Bootstrap dropdown keyboard accessible in my page. But I don't know why keydown/up doesn't work. Please see the my jsfiddle demo
And I also have some questions on Bootstrap accessibility. Please help to review it.
According the Issue 931. It seems the keyboard accessibility wasn't added until v3.0.0-rc1. Right?
Why missing href in the anchor element would disable keyup/down accessibility for dropdown?
The problem lies in the following source code of bootstrap's dropdown.js that is using to find index of focused element:
var index = $items.index($items.filter(':focus'))
the problem is that the $items.filter(':focus') don't returns correct element and in this case index will be -1 each time.
I don't know how jQuery's :focus exactly works but this problem can be solved with the following code: var index = $items.index($(document.activeElement)). But anywhere it's not good thing to change something in source code of 3rd-party library.