Main UI - set margin from rigth?

1

Hi,

excuse me the silly question, but is there a way to increase the space between margin and the controls in the ui?

image
image1026×222 11.3 KB
s

You can see that there is too much space from description and too low between the end of the page on the right.

I need to edit the css atttribute in /css/app.a167c022117a58e90242.css


.list .item-after {
    padding-left: 100px;
    padding-right: 50px;
}

This is a compilated file? Where can I find it?
Thanks,BR

2

Direct editing of the application css, is not going to be a long term viable strategy. The file is contained in the compiled main ui jar archive, so while you can technically extract it and edit it and re-add it, your edits will be undone with every upgrade or other event that clears the cached bundles and re downloads them. If you want to see the jar you’ll need to start in the runtime/system directory then knowing that the bundle id is org.openhab.ui drill down through those sequential directories. Furthermore, because the ui is packed and minified as well, the hashed string on the file has the potential to change with each update just adding to the hassle. It can be done, but there are almost certainly better solutions.

Can you give a little more information about what you are looking at? Are these your own custom widgets? Are these default widgets? What page are you seeing this on?

3

Thanks for the reply, please look at the image at the start, these are the auto created widget form Models.

Yes these are the default widgets. No customized object are involved.

The problem is just that if the screen of the device (i.e. e-ink readers) got overlaps with other controls not seen in screenshot but on the real screen on the right margin area, so need to move a little to the left to avoid that overlap.

The direct editing would not be the right way, any chance to add a user_custom_override.css somewhere?

4

This is something that I know has been mentioned before, but I don’t believe that it’s ever been filed as a formal feature request in the UI repository. In my opinion, the UI is now at a mature enough point where this makes a good deal of sense. However, it is not available yet, to my knowledge.

Unfortunately, in that case there are not a lot of good options. The model cards do accept the stylesheet property for direct css injection. For example:

        - component: oh-location-card
          config:
            backgroundColor: teal
            backgroundImage: /static/model/behrend_cchr.png
            stylesheet: |
              .button-active {
                background: rgb(9,82,86);
              }
              .button-large {
                background: rgb(9,82,86);
              }
              .button {
                border-color: rgb(9,82,86);
              }

Custom pages can also use this in the page config. The model pages, however, are not standard pages and do not use the stylesheet property, so you’ll have to add it to each card manually. Adding the stylesheet to each of your model cards is a bit of a chore, but it can be cut and paste quickly in the code tab and you should only have to do it once.

5

Thank you @JustinG,
but I’ve heard about Don’t Repeat Yourself (DRY) philosophy, and adding to each card the css would be too much.

Maybe in next releases there would be a way to add simple custom class that could be added to card. I.e.:


- component: oh-location-card
  config:
    backgroundColor: teal
    backgroundImage: /static/model/behrend_cchr.png
    stylesheet: |
      .custom-button {
        background: rgb(9,82,86);
        border-color: rgb(9,82,86);
      }
    class:
      button: custom-button
      button-large: custom-button
      button-active: custom-button
6

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.