If the throbber sprite is supposed to be used not only by Drupal core, but also by contrib modules and work with contrib themes, then I believe the height of the image needs to be increased.

The tiny difference of just a few pixels between the active and inactive areas of the sprite makes both states visible at the same time in many cases, for example when used as a background image on textfield that are a little taller than normal . Can the difference be increased to something like a 100px without compromising too much filesize?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

anon’s picture

subscribing

rfay’s picture

I don't see anything here but your opinion that the size should be increased. Is this just a matter of your aesthetic opinion, or is there some other reason for the increased size?

bryancasler’s picture

rfay’s picture

:-)

betamos’s picture

@rfay If you read carefully, what I mean is that the current throbber icon sometimes introduces a design bug which can't be worked around without replacing the throbber icon with a custom one, since CSS background images can't be cropped in CSS 2.1. I proposed a 100px height delta since it seems enough to me, but that's just an arbitrary number. It would eliminate the design bug in most cases, I think.

rfay’s picture

Issue tags: +Needs backport to D7
seandunaway’s picture

FileSize
9.55 KB

I run into this as well and always have to override the throbber. See attached image.

A better solution might be having two separate images that are replaced instead of having the height adjusted.

But, that's just, like, my opinion, man. :)

doublejosh’s picture

Here's the bigger one I use: throbber.gif

Posted about it here: http://forrst.com/posts/7_AJAX_Loading_Icon_Generators_Plus_a_new_Drup-Y3K

fehin’s picture

Having the same issue as #7 too.

fehin’s picture

Hi doublejosh, I tried your image but it doesn't change when throbbing.

doublejosh’s picture

The image is extra tall so that you can have bigger inputs, you'll need to adjust your CSS to fit your site.
I put this throbber up so folks wouldn't have to create the image too.

droplet’s picture

Status: Active » Closed (duplicate)
fehin’s picture

Status: Closed (duplicate) » Active
FileSize
541 bytes
757 bytes

I changed the default bg image position with css and it looks fine (see images below) but for some reason this change made it stop switching to the throbber part when a user is entering data. I tested the positioning first with firebug and the throbber worked but once I made the change in my local.css the throbber stoped switching. I'm using corporate clean theme.
The css I used is:

html.js input.form-autocomplete {
    background-position: 100% 8px;
}

Before:
throbber before

After:
throbber after

droplet’s picture

Status: Active » Closed (duplicate)
doublejosh’s picture

Did you make the .throbbing class never fire? Need to create a rule for that to keep the behavior?
I'm guessing the class is still getting attached when it's suppose to.

gmclelland’s picture

+1 - Just ran into this today, this is needed for designs with large input fields.

relaxpor’s picture

override the css file with these value

For an idea, in the corolla subtheme.
This is an example to display no throbber when no load
and display a mythrobber.gif when there is load

html.js input.form-autocomplete {
background-image: none;
}

html.js input.throbbing {
background-image: url(../../../../misc/mythrobber.gif);
background-position: 98% 10px;
}

eigentor’s picture

I filed a competing issue to this one, sorry https://drupal.org/node/2046869
Wouldn't it make more sense to use two images instead of increasing the throbbers height?
This is easier to manage because you just center the images vertically.

Using a sprite in this scenario won't improve Drupals performance footprint to any perceivable amount I would claim.

eigentor’s picture

two images attached

eigentor’s picture

Finally I see I was linking to the wrong issue.
Corrected now: https://drupal.org/node/2046869
Any opinions on if two images could resolve the discussions as to how high the one image should be?
Is there anything I am missing why this has to be a sprite? the passive part of the gif is not even moving, so filesize-wise, it should be even smaller. Is it two http requests, one for each image?

sphism’s picture

This is great, i always use taller field items, and the standard throbber always looks broken, i think 2 images is good solution

YesCT’s picture

this issue is marked a duplicate in #14. Please discuss there, or reopen this and explain the difference.