Align text to the right using markdown

Configuration Frontend
,
1

Hi everyone. Is there any way to align text to the right using markdown?
I currently use “<center>” as a backup option, but I would like the IPv6 addresses to be aligned to the right.

Screenshot 2024-09-21 at 13.45.49
Screenshot 2024-09-21 at 13.45.49982×226 11.6 KB

        - type: conditional
          entity: sensor.andrew_smartphone_ipv6_addresses
          conditions:
          - entity: sensor.andrew_smartphone_ipv6_addresses
            state_not: 0
          row:
            card_mod:
              style: |
                :host {
                  --ha-card-border-width: 0px;
                }
                ha-markdown.no-header {
                  padding-top: 0px !important;
                  padding: 0 0 0 8px;
                }
            type: custom:hui-element
            card_type: markdown
            icon: 'mdi:numeric-6-box'
            entity: sensor.andrew_smartphone_ipv6_addresses
            content: |-
              <ha-icon icon='mdi:numeric-6-box'></ha-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IPv6
              {% for ipv6 in state_attr('sensor.andrew_smartphone_ipv6_addresses','ip6_addresses') %}
                <center>{{ ipv6 }}</center>{{"\n"}}
              {% endfor %}

Adding the following does not seem to work(

            style:
              text-align: right
2

So the question is basically, how to achieve something like this, using markdown or card_mod (or both):

Screenshot 2024-09-21 at 14.04.47
Screenshot 2024-09-21 at 14.04.472566×258 43.8 KB

3

i just use the HTML template card and stole styles from the Atomic Calendar Revive card.

4

Markdown cards allow usage of HTML tags, so you could just put your values in a table and use align in the data fields.
This also allow you to use width on the table and the fields.

5

I thought so, but it seems like I do something wrong. I have tried multiple ways and only <center> tag seems to work:

content: |-
  <ha-icon icon='mdi:numeric-6-box'></ha-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IPv6
  {% for ipv6 in state_attr('sensor.andrew_smartphone_ipv6_addresses','ip6_addresses') %}
    <center>{{ ipv6 }}{{"\n"}}</center>
    <p align="right">{{ ipv6 }}{{"\n"}}</p>
    <td style="text-align: right;">{{ ipv6 }}{{"\n"}}</td>
    <p style="text-align: right;">{{ ipv6 }}{{"\n"}}</p>
    <div style="text-align: right;">{{ ipv6 }}{{"\n"}}</div>
 {% endfor %}

Screenshot 2024-09-22 at 11.35.33
Screenshot 2024-09-22 at 11.35.33968×356 17.6 KB

Console:

Screenshot 2024-09-22 at 11.38.07
Screenshot 2024-09-22 at 11.38.071846×1492 203 KB

I am probably misunderstanding the way markdown works. It seems that it already adds one <p> tag when adding text in content: (see the looong green marker). Therefore, I guess there should be some key-value to privide this style into that default <p> tag in markdown?? (not sure)…

I am not a programmer, so not sure how to do it with HTML tags (or any other way). Or at least let me know what am I doing wrong…

6

No idea with the p-tag, but tables work well.

Here is an example from another thread.

1 Like
7

Great, thank you for that example. Still no idea why other options did not work, but this works:

content: |-
  <ha-icon icon='mdi:numeric-6-box'></ha-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IPv6
  {% for ipv6 in state_attr('sensor.andrew_smartphone_ipv6_addresses','ip6_addresses') %}
  <table width=100%>
  <tr><td align=right>{{ ipv6 }}</td></tr>
  </table>
  {% endfor %}