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
image

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:

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

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

1 Like