Selected Record for Custom Form

[customaware]

I have created a Custom html/css form and it now works fine except that there is nothing to signify which record is selected.

Playing around with it, it seems to me that the <div class = "aw-custom-line"> is what is controlling it.

I would really like, say, a 2 px black border around the current record but cannot work out a way to specify it. I imagine there must be a way to override the style here but cannot work out how.

Here is what I have......



Here is what I want if the user clicks on the second record....



Any ideas would be appreciated.

[Rennur]

Maybe add
<div class="aw-data-item">
above
<div class="aw-custom-line">
and close it off with another
</div>
at the end.

[customaware]

I have tried these combinations Rennur...none of which make any difference and some of which obviously would never make a difference.

Option A:
<div class="aw-data-line">
<div class="aw-data-line">
.
.
code
.
.
..</div>
</div>

Option B:
<div class="aw-data-line">
</div>
<div class="aw-data-line">
.
.
code
.
.
</div>

Option C:
<div class="aw-data-line">
<div class="aw-data-line">
</div>
.
.
code
.
.
</div>

Option D:
<div class="aw-data-line">
</div>
<div class="aw-data-line">
</div>
.
.
code
.
.

[Rennur]

Do you mean you've tried this?
<div class="aw-data-line">
<div class="aw-custom-line">

[Rennur]

<div class="aw-data-line">
<div class="aw-custom-line">

...Content ...

</div>
</div>

[customaware]

Whoops!

My bad.

Yes... course.

<div class="aw-data-line">
<div class="aw-custom-line">

[customaware]

When I say My bad....

I did not mean that that is what I was doing which caused the problem.

I am using both different lines in all options...
<div class="aw-data-line">
<div class="aw-custom-line">


I just typed up the post incorrectly.

[Rennur]

Use this combination

Code: Select all

<div class="aw-data-line"> 
<div class="aw-custom-line"> 

...Content ... 

</div> 
</div>

Add this to your Startup.html just above </head> tag.

Code: Select all

 <style type="text/css">
  .aw-data-item {
	margin: 3px !Important;
	
  }
  .x-item-selected {
	background-color: rgb(2, 21, 99) !important; 
	-webkit-border-radius: 4px !Important;
  }
  .aw-custom-line {
	background-color: white !important;
  }
  </style>

[customaware]

Thanx Rennur,


After tinkering with your suggestion (which partially worked...thank you) have discovered that if I have a background colour on the table then the item-selected background colour does not work regardless of whether it is !important or not.

Once I took the table background colour style off then the highlighting of the row worked.

I moved away from the highlighted border because all the text moves when you select the record.

Tried setting a 2px border around the un-selected record but the item-selected border encapsulates that border as well so the text still moves.

What would be really good is if there was a tag that was the opposite of the item-selected tag such as item-not-selected which could be given a default unselected colour.

Seems that is not possible from what I can see.

Anyway, slowly making progress and will eventually get the hang of this stuff and come up with an acceptable result.

It's just not very RAD.