5

I have the following in my html:

<div id="flash_message" class="ui-state-highlight ui-helper-hidden">
    <p>
        <span id="flash_message_content">Hey, Sailor!</span>
        <span id="flash_message_button" class="ui-icon ui-icon-circle-minus"></span>
    </p>
</div>

The classes are from JQuery UI. My goal is to display the message (in this case, "Hey, Sailor!") and then, immediately next to it, the circle-minus icon. I then bind a handler to the icon; that handler lets the user hide the message.

This all works fine, except that the span flash_message_button is displayed as a block. The icon appears on the next line from the message, not next to it. If I include an inline style command "display: inline" the icon disappears completely (it's still in the DOM, but is rendered 0px by 0px).

What change should I make to force the icon to display right next to the message?

Improve this question

2 Answers 2

Reset to default
9

Have you tried setting it to "display: inline-block;" ?

This will allow you to define both a width and height for your span flash_message_button and also let you display it inline.

I'm not sure whether this is exactly what you are looking for, but it certainly would be something that I would try given the problems that you were describing.

NOTE: display: inline-block; won't work in many versions of IE unless you have a correct DOCTYPE declaration.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, I did try inline-block (testing on Chrome) and it seemed to have the same effect as the inherited block display the button was receiving — in other words, it was forced to the next "line" and not displayed next to the text.
It's difficult to know what's wrong with the css without more information, but I would try to figure out whether the css rule allowing the span to display properly is being overwritten somewhere else in the javascript. Obviously, Chrome's debugger (right clicking and using 'Inspect Element') can be hugely helpful with this.
After adding "display: inline-block;" I would also try adding "white-space: nowrap;" along with "overflow:visible;" to see if that span is wrapping to the next line. If it is wrapping, you should adjust the width of the parent element (in the case of your example, the <p> tag).
1

I had this same issue and I just figured it out with the help of - jQuery UI - icon alignment

They key was to add float: left; (or right) to the element that you have given the class ui-icon.

Here's a JSFiddle with a Print button, and your example code with the float- http://jsfiddle.net/fgpjx5rc/

Example: 

  <button>
    <span class="ui-icon ui-icon-print" style="float: left;"></span>
    Print
  </button>

My original issue -- I was trying to have the jQuery UI icon in a button next to a word of text. If I put the text before the icon, the icon was below the text. If I put the icon before the text, the text was below the icon. None of the other solutions here worked. I inspected with Firefox and disabled all the CSS and that didn't help. I also tried adding things there (everything suggested above). Even when I tested the same code with buttons from jQuery UI's website here, http://jqueryui.com/button/#icons, they didn't work. I Google searched for variations of text next to jquery ui icon and this was the first result. I also found this https://forum.jquery.com/topic/how-to-make-jquery-ui-icons-align-with-text, which referred to this How to use jQuery UI icons without buttons? and there the original asker gave up and just ended up referring directly to the image files.

Then I kept at it and found that first entry thankfully.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.