Profile cover photo
Profile photo
David Powell
Co-Principal, Jabiru Community College
Co-Principal, Jabiru Community College

Communities and Collections
View all

Post has attachment
Hey Everyone,

I hope someone can help me with some CSS and javascript tweaking of my adaptation of the People Directory.

I'm tweaking the People Directory template to create a student directory. I've got quite a few things I'm trying to pack into the Sidebar (the details for each student) so I thought I'd use CSS tabs to separate the content (like what is done here:

It works great and I can separate content for each student within the sidebar.

However, what I cannot do is get one of the tabs to be selected by default.

I can get the code to work fine in a plain HTML file - for example, see this file here:

But I can't get this to work in my awesome table view if I split the parts of that HTML file into the various columns within my Student Directory template.

After a bit of experimenting, I've learnt that the code to select a tab by default ("document.getElementById("defaultOpen").click();"), must be below the html that sets out the tabs - so in the HTML file above, I had to put it at the end of the body element, rather than the start.

So I'm guessing I have to try to do this in the template file as well.

I've added that part of the code to the bottom of the cell in my template that displays the sidebar, (rather than the <script> cell) and I've put it underneath the HTML code that displays the sidebar content, but still no luck. The tab buttons still work - I can click on them and see content, but I can't seem to select one when the table is loaded.

Hope this all makes sense.

Any advice or tips?

Post has attachment
Hi Everyone,

I find the AwesomeTable app fantastic and it has been really useful in sharing info in a useful way with my teachers.

I have tried to adapt the People Directory template to use as a student list.

I want to include some "Action buttons" for my team to help them quickly access key documents and folders related to each student - but I'm doing something wrong with either the HTML or CSS. Please see attached screenshots of the table view, my data headings, and my template.

Can someone help me figure out how to remove the little coloured buttons that don't have any text? The actual buttons (both the ones with text and without) work perfectly and take users to the correct links. I'm just trying to make it look great and remove those extra little buttons that have appeared.

Any help greatly appreciated :-)
4 Photos - View album
Wait while more posts are being loaded