RSA Archer Notification content

Question

I am trying to edit the content on standard notification. I want to split the body into two equal columns. When I try doing that in the HTML it always mess the CSS and automatically re-write it.

I am adding the following:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}


.column-left {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; 
}
.column-right {
  float: right;
  width: 50%;
  padding: 10px;
  height: 300px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column-left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>text</p>
  </div>
  <div class="column-right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>text</p>
  </div>
</div>

</body>

But as soon I hit "ok" it re-write it to this:

<html>
  <head>
    <style type="text/css">.c0 { font-family: 'Arial' } .c1 { margin: 0px 0px 14px; font-size: 18px; font-weight: bold } .c2 { padding: 10px; background-color: #aaaaaa } .c3 { margin: 0px 0px 13px } .c4 { padding: 10px; background-color: #bbbbbb } </style>
  </head>
  <body class="c0">
    <div class="c1">Two Equal Columns</div>
    <div>
      <div class="c2">
        <div class="c1">Column 1</div>
        <p class="c3">text</p>
      </div>
      <div class="c4">
        <div class="c1">Column 2</div>
        <p class="c3">text </p>
      </div>
    </div>
  </body>
</html>

score 0 · Answer 1 · answered Jun 22 '20 at 12:44

0

Unfortunately, Archer pretty much "dumbs" down the HTML formatting permitted in notifications. The best you can get away with is using tables instead of CSS to do columns.

answered Jun 22 '20 at 12:44

DjP

308
1
6

score 0 · Answer 2 · answered Sep 02 '20 at 15:42

0

Since you want equal columns with any content, you can Choose the 'Body Layout' in the Notification as 'Two Column 50-50'.

That way, you can add any dynamic content within the two columns.

answered Sep 02 '20 at 15:42

Jai

1

score 0 · Answer 3 · answered Sep 03 '20 at 15:24

You can use css grid

Css Grid is good documentation

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

<div class="row">
  <div class="column-left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>text</p>
  </div>
  <div class="column-right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>text</p>
  </div>
</div>

RSA Archer Notification content

3 Answers3