Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Having trouble with icon valign in selectitem

    Hi. We have a selectitem that looks like this right now:
    Click image for larger version  Name:	Screen Shot 2021-05-10 at 09.49.47.png Views:	0 Size:	8.3 KB ID:	265372
    As you can see, we're having a bit of trouble aligning the icon. We've tried most stuff, but what it boils down to, we think, is that the icon, which is rendered as a background-image in the cell, has align "text-top", and since the numbers are much lower than for example "Ä", it looks weird.

    Code:
    <div id="isc_2Q" $89="isc_CountrySelectItem_1" $9a="$9d" class="" style="width:60px;height:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:34px;text-align:center;" tabindex="2586" role="option"><span style="display:inline-block;background-size:100% 100%;background-image:url(&quot;http://127.0.0.1:8888/images/flags/se.png&quot;);width:16px;height:12px;!![B]vertical-align:text-top!![/B];margin-left:0px;margin-right:3px" id="isc_2R" eventpart="valueicon"></span>(+46)</div>
    We've tried, and changing the vertical-align to "center" in the html image text makes it at least look passable.

    I can't figure out how to change it through smartGWT though. There is a "setIconVAlign", but we can't se it doesn't do anything at all.

    Any pointers? Thanks in advance.
    Last edited by mathias; 10 May 2021, 02:24.

    #2
    To help, we would need to see all the CSS being applied here, as a standalone text case, so we can see how this misalignment was created in the first place.

    Otherwise, you could use a hack of changing that alignment property, but it's a likely a "two wrongs made a right" kind of solution - the real problem is probably elsewhere.

    Comment


      #3
      ok, we're using Tahoe. We ended up just doing manual padding and changing the size of the icon so nevermind i guess.

      Comment

      Working...
      X