sort icon is not working well - kendo-ui

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.

Related

KendoUI Combobox responsivenes

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.

Kendo grid resize shrinks all the columns in IE

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.

Jquery Image Gallery with Vertical thumbnail Navigation?

I am looking for a Jquery image gallery which have vertical thumbnail like at the following page.
http://realtyexecutivesofnewyork.com/product_detail.php?ml_num=2275875.
Can anybody point out me to something similar jquery solution.
In my opinion, jCarousel is by far the best plugin for this sort of thing, this is what you want
If you need a hand setting it up, just shout.
The site you are referring uses, a vertical menu scroll plugin
perhaps this one.
and the code is somewhat like this
$('.myMenu').scrollIt({
scrollDuration : 250,
scrollItwrapper : 'myMenuScroll'
});
});
And on clicking that link, it just changes the src attribute of img element, and loads the image (No wonder if your internet connection is slow, you will see that image take a lot to load).
You will find more better at here.

Grow Images on Hover like Google Images

Hey everyone, I am trying to accomplish something with images growing on hover like the fancy grow mouseover effect on google images.
Here is what I have:
http://www.1stbusinessneeds.com/tooltip/tooltip.html
The tooltip is offset and is based on the walter zorn tooltip. What's the best way to have the mouseover popup grow out just like google images (with the text), instead of following the mouse?
(I still need it done with the same tooltip - maybe overwrite it, but it must be present to pass the text and image, it's just the positioning and display method of it that I need help creating, any samples would be appreciated)
You might want to look at JQuery.
this might be a good start http://jsfiddle.net/ZwhEu/

Disabling interstitial graphic when using cfdiv binding

Is there a way to keep the "Loading..." graphic from appearing when cfdiv refreshes? I'd like to prevent the flicker of loading the graphic then loading the new html.
By adding these lines at the bottom of the header, it overwrites the "Loading..." html and seems to prevent the flickering effect in both IE and FireFox:
<script language="JavaScript">
_cf_loadingtexthtml="";
</script>
While this seems to do the trick, it would be nice if there was an officially supported way to customize the loading animation on a per page or per control basis. Hopefully they add support for that in ColdFusion9.
I don't think there is currently a way to do this programmatically within the cfdiv tag. If you really want to get rid of that "Loading..." message and the image, there are a couple places you can look.
You can rename or delete the image, which is located at: CFIDE\scripts\ajax\resources\cf\images\loading.gif
That only gets rid of the animation. The "Loading..." text can be blanked out to an empty string, and is defined in: CFIDE\scripts\ajax\messages\cfmessage.js
Making these changes will obviously have an impact on tags other than cfdiv, but if you are looking to eliminate this behavior in one place, I'm sure you won't mind killing it everywhere else too. :)
I'd love to see a cleaner way to do this if anybody else has any ideas.
This is by no means a comprehensive or an elegant solution, but I found using negative margins on adjacent elements can "cover" the animation. I don't know if this method works in all cases, but for my particular case it worked. The animation appeared next to a binded text field, to the right of which was a submit button. The layer was floated to the right. I used negative margin on the submit button and it covered the animation without affecting the layer alignment.
Another measure I did was to check the layer structure, and added the following code to my css be sure:
#TitleNameloadingicon {visibility:hidden;}
#TitleName_cf_button {visibility:hidden;}
#TitleNameautosuggest {background-color:#ffffff;}
You can create functions to change the message prior calling the ajax load that can set the message and image to a new value.
function loadingOrder(){
_cf_loadingtexthtml="Loading Order Form <image src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'>";
}
function loadingNavigation(){
_cf_loadingtexthtml="Loading Menu <image src='/CFIDE/scripts/ajax/resources/cf/images/loading_nav.gif'>";
}
(these will eventually be rolled into a single function that will take both a text_value and an image_path parameter)
In some of my processes that load both a main and left nav cfdiv I use a function like this:
function locateCreateOrder(){
loadingOrder();
ColdFusion.navigate('/functional_areas/orders/orders_actions/cf9_act_orders_index.cfm','main_content');
loadingNavigation();
ColdFusion.navigate('/functional_areas/products/products_actions/cf9_products_menu.cfm','left_menu');
}

Resources