CODEWITHSUNDEEP
jqueryasp.netcssjquery-uicss-float
Deeptechtons
Deeptechtons

Reputation: 11125

Is there a CSS bug in jQueryUI icons

i used the markup used this page jQueryUI Theme Roller the one with ui-state-error css class at the bottom right sidebar. the markup goes like below

<div class="ui-state-error ui-corner-all"> 
<p><span class="ui-icon ui-icon-alert"></span> 
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>

but to my surprise it doesn't look the same , the icon falls on it's own line [possibly because it's display is blocked]. Now is this a known css bug or Intended. If so what would my possible solution be, float these ui-icon elements left all the time ??

I couldn't put that on jsfiddle but JsBin did work here is the link Edit the Example on JsBin

Upvotes: 1

Views: 199

Answers (3)

max4ever
max4ever

Reputation: 12142

to make the icon stay in the middle of text try adding

.ui-icon-fix-by-max
{
    display: inline-block;
    vertical-align: text-bottom;
}

Upvotes: 0

Joakim
Joakim

Reputation: 2217

This is not a bug from what I know, the way I have done it is like this: http://jsbin.com/agagep/5/ (did the css with jquery but actually have something like that in a css file), even if we want this to be like this it doesn't mean that everyone wants it, it lets the designer have more control over what is happening.

Upvotes: 1

yokoloko
yokoloko

Reputation: 2860

I don't know if there is a bug in the jquery ui theme. But I know they don't really look great like if they were not finished. You can have a look at this awesome theme for jquery ui theme : http://www.warfuric.com/taitems/demo.html and download here https://github.com/taitems/Aristo-jQuery-UI-Theme

Don't really answer the question but maybe can be useful to you.

Upvotes: 0

Related Questions