SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
STL Volleyball Tony

Junior Member
Registered:
Posts: 4
Reply with quote  #1 
Would like to be able to set column alignment using table builder page element.  The first column defaults to a left alignment, whereas the other columns default to center alignment.  
If not able to allow alignment for each column to be set, can all columns be defaulted to center alignment?
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #2 
You can center that first column by dropping this code on the page, either by placing it in the head code (single page or cascading throughout that section of the site) or by using the Code page element.

<style>.dataTable td:first-child {
text-align: center;
}</style>



If you want everything to be aligned left, drop in this code:

<style>.dataTable td {text-align: left;}

.dataTable thead {
text-align: left;
}
</style>




If you want that left alignment to apply only to specific tables, you can make that code a specific CSS class by typing in .tableLeft (as an example) and then adding this code to the cascading head code on all sections on your site. Now, when you create a table, you can add tableLeft in the Custom CSS Class field when building the table.

Here's the code for that scenario:

<style>.tableLeft .dataTable td {text-align: left;}

.dataTable thead {
text-align: left;
}
</style>

STL Volleyball Tony

Junior Member
Registered:
Posts: 4
Reply with quote  #3 
That works, however, the top row (header) is still left aligned.  Please advise if I'm missing something.  Thanks again!
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #4 
Make sure you are out of Edit mode and in User mode when you test the style changes, as they will only appear in User mode.

If that's not the issue, send me a screen shot of the table you are working on and the code you are using. Also, let me know where you are placing the code (you are using Code page element or Edit Head Code option).

- Loren
STL Volleyball Tony

Junior Member
Registered:
Posts: 4
Reply with quote  #5 
Currently - code is placed in the Head Code option.  I also tried it in the code page element with the same result.  Viewed in user mode.  I also viewed in entirely different browser as a user as well.  Thanks again!

screen shot.jpg 

loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #6 
The code is a bit different with each SportsEngine theme, so I think this slightly tweaked code should get that first column header centered for you:

<style>.dataTable th:first-child {
text-align: center;
}

</style>

STL Volleyball Tony

Junior Member
Registered:
Posts: 4
Reply with quote  #7 
That worked!  Thank you!
Previous Topic | Next Topic
Print
Reply

Quick Navigation: