remove the table records attributes for accessibility

how to Remove the border=0 and cellpadding=0 from table records control below highlight in bold it is not defined anywhere how to remove it.

<table id="wt186_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_OutSystemsUIWeb

_wt156_block_wtColumn2_OutSystemsUIWeb_wt115_block_wtOpenEvent_wtEditRecord1"

 border="0" class="OSInline" style="display: none;">
</table>

You have to override those properties from the default CSS classes for table, table cells and table lines.

 

Maria da Graça Peixoto wrote:

You have to override those properties from the default CSS classes for table, table cells and table lines.

 

not working


Hi All ,


actual issue is outsystems TableRecords componenet is autogenrating the some attributes which fails the Accessibility rules which i need to achive below is dom genrated code and highlighted code need to remove.

<table class="TableRecords OSFillParent" cellspacing="0" border="0" id="wt186_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_wtDummyEntityTable">

Anyone can help me how to remove this attributes.



Hi Ashi,

The answers provided in this post should help you to achieve what you want.

You need to define a class that removes the border and cellspacing and add it to list of style classes in your custom Theme. This way you can select the newly defined class in the properties of your TableRecords widget.

Regards,

Nordin

Ashi wrote:

how to Remove the border=0 and cellpadding=0 from table records control below highlight in bold it is not defined anywhere how to remove it.

<table id="wt186_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_OutSystemsUIWeb

_wt156_block_wtColumn2_OutSystemsUIWeb_wt115_block_wtOpenEvent_wtEditRecord1"

 border="0" class="OSInline" style="display: none;">
</table>

Hi Ashi,

As i can see the above table is getting generated through in-build Edit record Widget of Outsystems.

generally we use this widget for forms and it automatically adds border=0 attribute to it.it also have some input values like  cell spacing, cell height.

If you want to get rid of this, i would suggest you to use a from widget instead of the edit record to make your life easy in-order to make this thing accessible.



Best Regards,

Pankaj

aaa Pankaj pant wrote:

Ashi wrote:

how to Remove the border=0 and cellpadding=0 from table records control below highlight in bold it is not defined anywhere how to remove it.

<table id="wt186_OutSystemsUIWeb_wt18_block_wtContent_wtMainContent_OutSystemsUIWeb

_wt156_block_wtColumn2_OutSystemsUIWeb_wt115_block_wtOpenEvent_wtEditRecord1"

 border="0" class="OSInline" style="display: none;">
</table>

Hi Ashi,

As i can see the above table is getting generated through in-build Edit record Widget of Outsystems.

generally we use this widget for forms and it automatically adds border=0 attribute to it.it also have some input values like  cell spacing, cell height.

If you want to get rid of this, i would suggest you to use a from widget instead of the edit record to make your life easy in-order to make this thing accessible.



Best Regards,

Pankaj


Thanks for the reply

No we are using Table records  for displaying data only my only concerns is border="0" ,cellpasdding="0",celspacing="0" attribute should not render in DOM which is happing now,please let me know  is there any way in OS we can remove this as it fails the accessibility rules.as per accessibility all this should come through css 

Thanks


Hi Ashi,

Hi Ashi,

The answers provided in this post should help you to achieve what you want.

You need to define a class that removes the border and cellspacing and add it to list of style classes in your custom Theme. This way you can select the newly defined class in the properties of your TableRecords widget.

Regards,

Nordin

Have you tried to proposed solution in the linked post? Let us know if it worked for you.

Regards,

Nordin


Nordin Ahdi wrote:

Hi Ashi,

Hi Ashi,

The answers provided in this post should help you to achieve what you want.

You need to define a class that removes the border and cellspacing and add it to list of style classes in your custom Theme. This way you can select the newly defined class in the properties of your TableRecords widget.

Regards,

Nordin

Have you tried to proposed solution in the linked post? Let us know if it worked for you.

Regards,

Nordin


No It doesn't worked for me i want to remove attribute 

Thanks

Hi Ashi,

I don't think there's a way to do this with just the widget - you'd have to write some Javascript to remove those unwanted attributes from the DOM element.

The removeAttr() function from jQuery should do what you need. You'd have to write something like:

$('.myTableClass').removeAttr('border').removeAttr('cellpadding');

Afonso Carvalho wrote:

Hi Ashi,

I don't think there's a way to do this with just the widget - you'd have to write some Javascript to remove those unwanted attributes from the DOM element.

The removeAttr() function from jQuery should do what you need. You'd have to write something like:

$('.myTableClass').removeAttr('border').removeAttr('cellpadding');


Thanks Afonso for your reply,

I know we can do this with JQuery but it is not allowed to write jquery code .it will fails if javascript is disabled.


Regads

Ashi

If that's the case, then I'm not certain there's a solution. There's two ways that I can see that would allow you to achieve what you need - either prevent those attributes from being added in the first place, or remove them after they're added to the DOM.

But those attributes get added to the element and I'm not aware of any inputs in the TableRecords widget that would allow you to affect them, so all that remains is removing them after the fact.

A lot of OutSystems components and build patterns rely on Javascript in order to function correctly - unless you're building a very simple page, it would already break if a user disabled it. If you disable it with your browser console, is your page still functional? Building a web application without being able to rely on Javascript seems harsh.