nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to remove space (padding) around left, right, and bottom of AttributeTableWidget?

DavidBoiano

Hello,

I am attempting to mirror the look of an AttributeTable component I used in a non-viewer Flex API application. See the screenshot below for the look I am trying to mirror on the left, with current application on the right.

[ATTACH=CONFIG]26863[/ATTACH]

I have done most of my modifications so far using CSS and the AttributeTableSkin, however I cannot locate where to make change to the padding or whatever is causing the space between the edge of the bottom panel/application and the actual DataGrid.

In addition, one other visual element I cannot locate to make change to is the cornerRadius that exists around the entire bottom panel/container. It is most noticeable on top next to the yellow line for collapsing the panel.

Does anyone have an idea where these modifications can be made?

Thanks,

David

flex_apps_comparison.jpg

KADATA-1.png

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

David,

I am not real sure that you are going to achieve what you are after using the AttributeTableWidget. All the issue you are having is with this block of mxml code from the AttributeTableWidget.mxml...

    <viewer:WidgetTemplate id="wTemplate" closed="widgetClosedHandler(event)">         <mx:ViewStack id="viewStack"                       width="100%" height="100%"                       left="5" top="5"                       childAdd="updateTabBar()"                       childRemove="updateTabBar()"/>         <s:TabBar id="tabBar"                   left="5" top="2"                   dataProvider="{viewStack}"/>     </viewer:WidgetTemplate>

The rounded corners comes from the WidgetTemplate as all widgets use the WidgetTemplateSkin.mxml by default and it has a corner radius. Next and the bigest issue for you is the AttributeTableWidget is designed to be able to display MULTIPLE attributetables and thus uses a ViewStack and a TabBar. As it looks like you are only wanting one table then a custom widget implementation using just the API AttributeTable component would work much better.

All comments

AntGiles

David,

I haven't had a good look at this but there is a reference to com.esri.ags.components.AttributeTable which will require you to download the API.

Regards

Anthony

DavidBoiano

Hi Anthony,

As mentioned, I am trying to replicate the look of a Flex API application that I created with the downloaded API. I am just looking for the property to remove the padding around the DataGrid. I can't imagine it being a hard fix but it is certainly hard to locate...

David

RobertScheitlin__GISP

    <viewer:WidgetTemplate id="wTemplate" closed="widgetClosedHandler(event)">         <mx:ViewStack id="viewStack"                       width="100%" height="100%"                       left="5" top="5"                       childAdd="updateTabBar()"                       childRemove="updateTabBar()"/>         <s:TabBar id="tabBar"                   left="5" top="2"                   dataProvider="{viewStack}"/>     </viewer:WidgetTemplate>

DavidBoiano

Robert,

Thank you for this information! You are correct in that I only need to display one table with very little information. I have no need for the TabBar and had actually already commented that part out of the AttributeTableWidget.

Looks like now is the perfect time to attempt my first custom widget, then!

Best regards,

David

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.