Kendo ComboBox is showing four loading gears when fetching the data from the server instead of one. Is it a design or bug? How can we fix it?
Steps to reproduce:
Visit http://demos.telerik.com/kendo-ui/combobox/serverfiltering
In chrome Open developer tools -> Network -> check Offline
Now type any three characters.
This is a bug, the background-repeat and background-position styles seem to be missing in the latest Kendo UI version. You can add them manually until the fix is applied out-of-the-box:
.k-i-loading,
.k-loading,
.k-loading-image {
background-repeat: no-repeat;
background-position: center center;
}
Related
I am making an internal website for a company.
We have to use Internet explorer.
I am using SCSS to make this work.
This works well in most cases except when I want to use flexbox
SCSS changes
.container{
display: flex;
}
to
.container{
display: grid;
}
How can I tell it to stop that?
Which version of internet explorer are you using?
Internet Explorer 6-9 do not support flexbox at all.
Internet Explorer 10 supports 2012 syntax for flexbox. So to get this to work cross browser for IE11 and other browsers you could do something like:
.container {
display: flex;
display: flexbox;
}
Browsers that do not support the 2012 syntax should ignore the 'flexbox' value however if IE10 encounters it, it should use that.
Internet Explorer 11 supports the current way of using flexbox. So if you are using IE11 and encountering this issue I would double check that your CSS isn't getting overridden unexpectedly.
EDIT
Just saw that you had tagged this as IE11 - I would double check that your values aren't being overriden somewhere. Flex is known to be buggy with IE11 but I can't imagine it would choose to switch to grid unless it was getting that value from a CSS file.
I've found some problems similar to mine, but nothing close enough for me
I've built a blog-site using NuxtJs with Vuetify and have deployed it on Netlify. The site looks and works great for the most part. My site has a navigation drawer that is supposed to have a background-color of #659dbd. This color shows up in development. However, on the deployed site, the background-color is white. When I inspect the site in my dev tools, this color does show up in the styles, but it has a line through it, like this:
Does anyone have any idea what could be causing this?
I've looked at the Netlify gotchas, but couldn't anything regarding anything like this.
It's strange because all of my other stylings render fine.
If I've left anything out or if you need to see any code, let me know.
This happens because you probably using nuxt/vuetify module, and for development it use builded vuetify bundle, but for production it use treeshake version. And with treeshaken version of vuetify it do load css dynamically on page. So first loaded your page style, adn then vuetify load its own component styles and it overrides your own styles
There's probably some other more specific rule.
<div class="list">
<div class="drawer"> Item </div>
</div>
<style>
.list {
background-color: #4589e0;
}
.drawer {
background-color: #1707a3;
}
.list .drawer {
background-color: #a3073b;
}
</style>
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
We have a page with a rich text editor. If the content being edited contains an image and the user is using Firefox and they have the Pinterest browser button installed, then the following HTML gets added to the end of the rich text content in the editor. You can see it in there using the Source button in the editor's toolbar and when the form is submitted, the added HTML gets included with it and sent to the server.
<p><span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; color: rgb(255, 255, 255); background: rgb(189, 8, 28) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjYmQwODFjIj48L3BhdGg+PC9nPjwvc3ZnPg==") no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; border: medium none; top: 520px; left: 1368px;">Save</span></p>
The embedded background image is the pinterest icon. This happens on both Windows and Mac, but only in Firefox. Does not happen in Chrome or Safari. I was unable to test IE11 because the button failed to install.
Is there a way to prevent plugins from modifying rich text editor content? Or, is there a way to tell the pinterest plugin specifically to stay out of the editor or even just the page?
The short answer is that you can't prevent a Firefox add-on from modifying your webpage, if the extension desires to do so. Firefox add-ons run with the privileges of the browser. Thus, they can have complete control over what is displayed, how it is displayed, or even if your page is displayed at all. Your question is, at its essence, the same as "Can I prevent the Firefox browser from displaying my page the way that Firefox wants to display it?"
You have to work with the fact that it is going to do whatever it is choosing to do. If you desire your website to work with the Firefox browser with this extension installed you must work around whatever it is that the extension is doing to your website.
There are a variety of possible strategies (not an all-inclusive list):
Contact Pinerest and inform them of the problem. It sounds like the add-on is causing harm to your website. This is probably not intentional. Have them file a bug. If it is affecting your site, it is probably
affecting others.
Have your server detect the additional HTML code in the input and just automatically remove it.
Experiment with different HTML structures for your webpage to try to find one that results in the extension putting the code somewhere it does not get included in the data sent to your server.
If it was me, I would take a good look at the source code for the Pinterest add-on. Like most Firefox add-ons, it is plain JavaScript. You should be able to determine the criteria that it is using to choose where to put the HTML code it is inserting. Once you know that, it should be reasonably easy to design your page such that the add-on does not interfere with something you care about. To save you a bit of searching, the URL for the add-on is, currently, here. You should use "Save Link As" to save that .xpi file to somewhere. Then change the .xpi file extension to .zip. You should then be able to extract all the files for the add-on from the package. It is a normal bootstrapped add-on.
Forgive the lack of direction with this question, however I had a my Joomla 3.4 site running fine, then switched to a new host. All of the site transfer went to plan, however one component, Event Gallery by Sven Bluge, which shows a page of photos stopped working.
The page with the component loads all the framework to host the images, but replaces each image with a blank.gif
<img class="eventgallery-lazyme " data-width="800" data-height="533" longdesc="http://raymondthefox.com/components/com_eventgallery/helpers/image.php?option=com_eventgallery&mode=uncrop&width=50&view=resizeimage&folder=raymondsnapshots&file=IMG_0212.JPG" src="http://raymondthefox.com/media/com_eventgallery/frontend/images/blank.gif" style=" width: 50px; height: 50px; background-position: 50% 50%; background-repeat: no-repeat;" alt="Snapshots">
Having looked up this issue on the Event Gallery support pages they suggested it could be a mod_secure problem, or various PHP permission issues.
I contacted my hosting support with this, they investigated and offered the following information.
Declaration of EventgalleryControllerEvent::postSaveHook() should be compatible
with JControllerForm::postSaveHook(JModelLegacy $model, $validData = Array) in
/home/raymygmo/public_html/administrator/components/com_eventgallery/controllers/event.php
on line 16 So we suspect some incompatibilities between Joomla components.
Is there any substance in their response, and if so could anyone outline what it means.
Please comment if more/less information is required and I will update the question accordingly. Apologies for running in blind with this one.
I guess this is already solved. The answer of your hosting provider is worth nothing. But mentioning the switch to a new hosting provider is a good hint.
Event Gallery uses the script /components/com_eventgallery/helpers/image.php to deliver cached thumbnails. If this script has no execution permission you'll see no images. You can either switch on the slow legacy render mode in the components options or you fix those permissions.
How can I get rid of the little box/arrow next to images in my web browser? What controls when they show up and when they don't? I'm porting a blog from WordPress over to BlogEngine.NET. Those little arrows aren't in the WordPress blog, but they're showing up in the posts in BlogEngine.NET. I'm viewing both in Chrome. They also show up in IE and Firefox, but not in Safari.
UPDATE:
Here are some live links (I'm viewing in Chrome):
WordPress (no arrow): http://www.inrixtraffic.com/blog/2012/neverlate-inrix-traffic-contest/
BlogEngine.NET (arrow): http://www.inrix.com/traffic/blog/post/2012/06/18/NeverLate-INRIX-Traffic-Contest
That is coming from the CSS, specifically this selector:
div.post .text a[href^="http:"] {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
According to my inspector (built into Chrome, right click, inspect element), that is coming from http://www.inrix.com/traffic/blog/themes/Inrix/style.css, line 372. Ditch the "background" line from that file, or override it in a later css file, and you will be golden.