Change File Download Link to a Button

App Development
1

Hey Tada Community-

I’m having a brain gap…I am attempting to assign some CSS to a File Download link to make it appear as a button. By default the link is textual.

Is there a current CSS class or custom CSS that can be established so it applies to all in a column vs. individual table cells?

FileDownload-Button
FileDownload-Button2382×1294 405 KB

Thanks in advance,
~Adam

2

Hey @SafetyUniversity

You can add this CSS to the page to make the link look like a button.

af-data-table-field a {
    background-color: lightblue;
    padding: 5px 10px;
    border-radius: 5px;
}
3

Howdy Tim-

That worked for establishing a button; however it applies to all columns. If possible, i’d like to segregate out the columns so I can apply different colors to the buttons in different columns.

Is it possible to identify the specific table column to apply the CSS to?

Thanks!
~Adam

4

SOLUTION!

I found the correct CSS string to work. To segregate out the columns you will have to:

  1. Right click link
  2. Select “Inspect”
  3. Right click the link; select “Copy”; select “Copy Selector”
  4. Paste the selector in a notepad/word document…it should look something like this: #x_element_page_113_11 > div.table-responsive > tb-table-group > div > div > tb-table > div > table > tbody > tr:nth-child(1) > td:nth-child(2) > af-data-table-field > span > a
  5. The column is the td:nth-child(2)
  6. Go to your CSS tab of the page (in Page Builder) you want to apply the custom CSS to
  7. Copy the following syntax from your “Copy Selector” selection: td:nth-child(2) af-data-table-field a
  8. If you want a different hover CSS then just add :hover to the end of the sytnax. For example: td:nth-child(2) af-data-table-field a:hover

After that I just applied some CSS to format it to a button (I copied the Tada button CSS and changed the colors):

td:nth-child(2) af-data-table-field a {    
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 8px;
text-decoration: none;
color: #fff;
background-color: #F40F02;
border-color: #F40F02;
}
td:nth-child(2) af-data-table-field a:hover {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 8px;
color: #fff;
text-decoration: none;
background-color: #f63e34;
border-color: #f63e34;
}

Thanks for getting me on the right track @tim.young

The results:

File Link Button Results
File Link Button Results2382×1420 605 KB

Hope this helps,
~Adam

1 Like
5

Nice @SafetyUniversity!

You could also give the column a custom class and target that column specifically :grin:

1 Like
6

Agreed, @tim.young…I will clean it up with a custom class in a bit. Just wanted to get it “working” for now. :smiley: :+1:

1 Like
7

@SafetyUniversity That’s great thank you for sharing - exactly what I need too ! :facepunch: