I am working with the Kendo UI beta (v. 2013.1.226) and I found that there are some glitches when you change the font size of a combobox.
The drpodown arrow doesn't seem right - it is a bit up while it shouold perfectly position itself in the center of the dropdown button.
To illistrate - I am attaching a screenshot.
Anyone know if there's a way to fix this?
I am thinking of somehow change the x and y position of the background to be relative.
Any help will be appreciated.
Update: Not quite sure if it's only me but found another problem changing the font size, the list seems to overlap the input field as shown in the second image:
I am using IE 9. Anyone have those problems or is it just me?
As far as I know Kendo shouldn't be interfering with other styles on the page (the styles start with k- prefix) so I am wondering if the issues only occur for me or are common.
The KendoUI Combobox is made up of multiple components and has its own styling for all the parts including the arrow. The arrow is actually two nested spans in the version I am using (2013.1.514).
I changed my textbox heights and got different alignment problems:
I would not expect the supplied KendoUI CSS to survive a font-size change as they are tweaked to look good at its own default font size. Your best bet is to use Chrome's F12 tools to determine what CSS styles are affected and tweak the Kendo styles (or your overrides) to match your requirements.
Related
I use kendo grid sorting.
but, I think my grid`s sorting image is not cropped.
this occurs some pages not all. I don`t know what is different.
below is my case.
What can I do ?
I found why it occurs.
If span containing kendo icon img is applied css like width:100%, several icon shows.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I'm using Kendo grid in my application. When I try to resize a column in IE, all the other columns in the table disappear.
This does not happen in Firefox or Chrome, just IE 9 and 10.
Can someone please help on this as I'm breaking my head over this issue from a day?
The issue is with mixing percentages and px for your column width.
One solution is to make sure you assign a specific width to EVERY column in your grid (120px).
Do NOT use percentages, unless your parent has a specific width (not 100%, but 800px or something like that).
There is a good chance this is to do with IE not inheriting CSS properties the same way as the other browsers. The Kendo widget will be output in its own div (check the kendo CSS, might be something like k-container or k-widget), so look at its CSS and that of any parent divs and you might have some luck.
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
I am using flot to display a bar graph. Due to the long label of x-axis, I use a js plug-in which named jquery.flot.tickrotor.js.
The label looks fine on most computers. But on some computers, the letters in the label are kind of messed up and the font looks strange.
I really want to post the pic to show the display but I don't have enough reputation to do so.
Does anyone know what may cause this problem?
The labels are probably rotated using CSS transforms. Some browsers - mainly IE 7 & 8 - do a poor job of rendering the rotated labels.
If the plugin supports rendering text to canvas directly, enabling that should fix the problem. Otherwise there's nothing you can do about it. Since those browsers are disappearing from the market due to their age, the problem will eventually just disappear.