OH4.3.1: oh-image-card has wrong layout when action is set

Setup, Configuration and Use Widgets
1

I used the oh-image-card in my UI for long time, now I wanted to add an action to open popup when image is clicked.

But when I defined action for image card the image got shifted and scaled. Nothing else regarding styling changed, just added action: popup. Here is how it looks like without and with action:

image
image186×182 3.56 KB

image
image182×177 4.73 KB

Is this a bug in MainUI widget or do I have something wrong with my card config? I see this problem in fixed grid layout, but it seems it works properly in another place when I use it in oh-masonry.

Code for card:

component: oh-image-card
config:
  url: =items.OdpadSvozIkona.state
  actionModal: widget:ozo_svozy_list
  action: popup

This is HTML rendered without action:

<div class="vue-grid-item oh-grid-item card no-margin" x="4" y="4" w="2" h="2" i="2" style="top: 358px; left: 369px; width: 177px; height: 172px; position: absolute;">
  <div class="oh-grid-item-content card oh-card" style="overflow: hidden;">
    <div class="card-content card-content-padding oh-image-card no-padding">
	  <img url="/static/images/Popelnice_Sm.png" actionmodal="widget:ozo_svozy_list" class="oh-image" src="/static/images/Popelnice_Sm.png">
	</div>
  </div>
</div>

and this when action is defined:

<div class="vue-grid-item oh-grid-item card no-margin" x="4" y="4" w="2" h="2" i="2" style="top: 358px; left: 369px; width: 177px; height: 172px; position: absolute;">
  <div class="oh-grid-item-content card oh-card" style="overflow: hidden;">
    <div class="card-content card-content-padding oh-image-card">
	  <div class="image-link list">
	    <ul>
		  <li class="oh-image-clickable no-chevron">
		    <a href="#" class="item-link">
			  <div class="item-content">
			    <img url="/static/images/Popelnice_Sm.png" actionmodal="widget:ozo_svozy_list" action="popup" class="oh-image" src="/static/images/Popelnice_Sm.png">
			    <div class="item-inner"></div>
			  </div>
			</a>
		  </li>
		</ul>
	  </div>
	</div> 
  </div>
</div>

Do you see it as a bug? Should I file an issue on github for webui project?

2

This was fixed back in November:

https://github.com/openhab/openhab-webui/pull/2869

an update should fix the problem for you.

3

Shouldn’t be this fix already in 4.3.1?
And my problem seems to be the opposite. I have too much padding when I define action.

4

Somehow I missed the big version right in the title…:roll_eyes: Yeah, this should be fixed in 4.3.1.

You said the images are “without and with action” and the first image of the two images has way more padding, so I assumed that the padding is there when the widget is without the action. But either, way there does seem to still be an issue even after that PR, so yes, I think you should file an issue on this one.

5

Ah, I’m sorry, you are right :man_facepalming:

I switched those two images in the post.

I’ve tried it right now on clean page with fixed grid layout to avoid influence of styling from other cards, but the result is the same.

Here side to side comparison:

image
image446×244 14 KB

For completeness here is whole page code:

config:
  layoutType: fixed
  fixedType: grid
  label: test image card
blocks: []
masonry: []
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-image-card
          config:
            url: =items.OdpadSvozIkona.state
            actionModal: widget:ozo_svozy_list
            action: popup
  - component: oh-grid-item
    config:
      x: 2
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-image-card
          config:
            url: =items.OdpadSvozIkona.state
6

Issue created oh-image-card changes image size when action is defined · Issue #3002 · openhab/openhab-webui · GitHub