Word wrap not working on tablet

Configuration Frontend
1

I’m using a custom button card and running into issues with word wrap not working on tablet display. Works fine on desktop:

image
image753×477 71.5 KB

but on tablet I get the ‘…’ instead of the wrap I’m expecting:

image
image726×477 22.3 KB

Here’s the code:

type: custom:button-card
entity: input_boolean.lr_tablet_mic
show_state: false
show_icon: false
show_name: false
triggers_update: all
tap_action: none
hold_action: none
double_tap_action: none
aspect_ratio: 2/1
styles:
  grid:
    - grid-template-areas: |
        "announcement announcement"
        "image message"
        "image message"
        "assist assist"        
    - grid-template-rows: min-content 4fr min-content
    - grid-template-columns: 1fr 2fr
    - row-gap: .5rem
  card:
    - min-height: 100vh
    - background-color: '#059bf1'
    - background-size: cover
    - border-radius: 0px
    - overflow: hidden
    - color: white
    - font-family: '"Roboto", sans-serif'
    - font-weight: 300
    - padding: 2%
    - background: center / cover no-repeat  url("/local/alexaclone/announcebird.png")
    - background-size: cover
  custom_fields:
    announcement:
      - justify-self: start
      - align-self: start
      - z-index: 2
      - font-size: 200%
      - width: max-content
    image:
      - align-self: center
      - justify-self: center
      - object-fit: contain
      - width: 75%
    message:
      - padding: 10px
      - font-size: 2vw
      - text-align: start
      - text-wrap: wrap
      - justify-content: start
      - align-self: center
      - width: 100%
    assist:
      - justify-self: end
      - height: 10px
      - position: absolute
      - width: 100%
      - z-index: 2
      - top: 95%
state:
  - value: 'on'
    styles:
      custom_fields:
        assist:
          - animation: pulse 2s infinite
          - height: 10px
extra_styles: |
  @keyframes pulse {
    0%, 100% {
      background-color: #f56a3f;
    }
    50% {
      background-color: #9e42b0;
    }
  }      
custom_fields:
  assist: .
  announcement: |
    [[[
          
          return `<b style="font-weight:400;">Wikipedia Search</b>`
          
    ]]]
  image:
    card:
      type: picture
      image: '[[[ return states["sensor.assistsat_viewlr"].attributes.image; ]]]'
  message: |
    [[[
      var message = states["sensor.assistsat_viewlr"].attributes.message;
      return `${message}`
    ]]]

Does anyone have any idea what is going on or an alternative to get this working?

Thanks

2

It could the browser used on the tablet.
If it is an Android, then make sure it is updated, especially the Google Webview comoonent.

3

Thanks for this. It’s running on a REALLY old FireHD 7 tablet. I’ll look to see if I can manually update it. The browser is Fully Kiosk but I guess this component you’re referring to is a layer under that?

4

It is a basic layer on Android used by many apps and browsers, which include the Home Assistant Companion App.

1 Like
5

Can these be manually updated? I’m pretty sure it’s out of date. Don’t see any updates in Google Play or in system.

6

I normally get it over the automatic updates, but I did a search on the Play store and found “Android System Webview Canary” from Google LCC, which looks like the component.

7

I just checked and this OLD tablet is running Android 5!! I’m doubting I’ll have any chance at updating

8

Maybe you can use it with a browser, like Firefox, which is not based on the Webview component.

9

I did try Firefox and it showed the same issue with not wrapping.

10

This is where you have to try anything and everything to get wordwrap to work. All browsers implement CSS rules differently. Older browsers also have older issues. iOS interprets CSS differently than android. I’m not saying you’re on your own here, but googling the css properties is probably your best bet. I wouldn’t even include home assistant in my google searches if I were in your shoes. I’d google css wordwrap <browser>

11

Additionally, I would start achieving a proper word-wrapping in a MINIMAL config.
100 lines …

12

Not sure if I’m following. Not sure what length of code has to do with the element not wrapping. It wraps fine on desktop just not on tablet.

13

It may help other people (and YOU btw) to reproduce the issue & find out a possible culprit. If you have some programming experience - you should know what a debugging is.