jquery ui autocomplete layout / css

Question

I have a css problem with jquery / jquery ui / auto complete

<script type="text/javascript">
  $(function() {
  $("#search").autocomplete({
    source: "autocomplete.php",
    minLength: 2,
    select: function(event, ui) {
      window.location.href = "http://site.com/" + ui.item.id + ".html";
      $("#search").val(ui.item.label);
    }
    })

    .data("autocomplete")._renderItem = function (ul, item) {
       return $('<li class="ui-menu-item-with-icon"></li>')
        .data("item.autocomplete", item)
        .append('<a style="height: 50px;" class="ui-corner-all"><img src="thumb.php?img=' + item.img + '" class="ajaxsearchimage">' + item.label + '</a>')
        .appendTo(ul);
    };
    });
    </script>
    <style>
    span.searchicon
    {
      display: inline-block;
      height: 50px;
      width: 50px;
    }

    .ajaxsearchtext
    {
      padding-left: 60px;
      display: inline-block;
    }
    </style>

I would like to align the text on the top I tryed to put vertical-align:top in the class but it doesn' work.

http://imageshack.us/photo/my-images/4/sansrer.png/

Does someone has a solution ?

Regards

matchew · Accepted Answer · 2011-05-17 18:44:27Z

1

~~you need to apply the property to the image~~

~~img {vertical-align:text-top;}~~

~~an example http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align~~

UPDATE

upon comments I suggest floating the image to the left would be the solution.

img.SelectedClass { float: left; }

edited May 17, 2011 at 18:44

answered May 16, 2011 at 22:17

matchew

19.8k5 gold badges46 silver badges48 bronze badges

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

2 Comments

matchew Over a year ago

if I am looking at the right thing, when I hover over the content the font-weight changes to normal and the string fits on the line. Give me a minute to think about this problem. An immediate solution is to turn to the font-size down a tad, or change font-weight to normal, but that wont fix the problem if the description is longer else where.

matchew Over a year ago

okay, on the image instead of vertical-align: text-top, change it to float: left

Collectives™ on Stack Overflow

jquery ui autocomplete layout / css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related