Table in an Akkordeon - Support | Kriesi.at

Addition:

My code should only remove the frame. But it would be even better if only the outer table frame would be removed.
And the table would be expanded to the entire width of the accordion / Akkordeon.

August 15, 2015 at 5:10 am #488105

Rikard

Keymaster

Hi,

Could you provide us with a link to the site in question so that we can take a closer look please? We need to inspect the element in question in order to give you the correct CSS.

Best regards,
Rikard

August 15, 2015 at 9:25 am #488175

Hi Rikard,

the website is in maintenace mode. But you can sign in using the following credentials.
It’s about the page in the link below (Avia table in accordion).

Best Regards,
Daniel

August 16, 2015 at 5:37 pm #488402

Hey!

Please add the below css to your custom css section:

tr th:first-child {
    border-left-style: none !important;
    border-top-style: none !important;
}

td {
    border-left-style: solid !important;
    border-right-style: none !important;
}

Cheers!
Dake

August 16, 2015 at 7:33 pm #488423

Hi Dake,

first that’s a start, but it still looks not good enough. Now the middel borders of the table are very thick.
Second: I want the table to fill the accordion. Means that there should be no space between the table and the boarder of the accodion.
Is that possible?

Best Regards,
Daniel

August 16, 2015 at 11:02 pm #488450

Hi!

Sorry about that, please update the td css and add the .toggle_content css as shown below:

td {
    border-left-style: solid !important;
    border-right-style: none !important;
	border-left-width: 1px; !important
}

.toggle_content {
	padding: 0px !important;
}

Cheers!
Dake

August 17, 2015 at 6:41 am #488579

Hello Drake,

thanks for the extendet code. The middel (inner) borders now lock good.
But the second change does not work. (The table should fill the accordion, no space between)

Best regards,
Daniel

August 17, 2015 at 1:22 pm #488879

Andy

Hi!

get rid of the space with this code:

.pricing-table {
margin: 0px;
}

and adjust as needed.

Cheers!
Andy

August 17, 2015 at 2:13 pm #488919

Hey Andy,

thanks for your adjustment hint. But when I do this it affects my pricing table on the top of the page.
And nothing changes with the table in the accordion.

Du you know what I want to do?
It should something look like the screenshot (priv Content). You can expand/toggle the blue bar on on top.

Best regards,
Daniel

August 17, 2015 at 3:15 pm #488947

Hi!

Please add an exclamation point in front of the word important on the .toggle_content class:

Without !

.toggle_content {
	padding: 0px important;
}

With !

.toggle_content {
	padding: 0px !important;
}

Once the exclamation point has been added the 0px padding will work.

Cheers!
Dake

August 17, 2015 at 3:27 pm #488956

Hey Dake,

thank you, you solved my problem. Now I looks almost perfect.
One little think to do. The bottom border is now to strong.

Best regards,
Daniel

August 17, 2015 at 4:19 pm #488975

Hey!

The below css will remove the bottom border for the last table row:

tr:last-child {
    border-bottom-style: none !important;
}

Best regards,
Dake

August 17, 2015 at 4:46 pm #488998

Hi Dake,

sry this dooesn’t work for me. Nothing happens when I use this code.

I still noticed something. At the lower accordion, in every row I use as heading-row,
the right border is to strong.
First I thought it’s because the use of the class=”avia-heading-row” for the rows. But now I think
it is because of the class=”avia-highlight-col”. When you look at the blue heading closely you’ll see
a shadow on the right.

Best regards,
Daniel

August 17, 2015 at 10:24 pm #489172

Hey!

What level of temporary account did you create for us?

I’d like to take a closer look at your quick css section to see if there are any conflicts and possibly make my code a little neater and all in one.

I’m seeing this screen when attempting to access the backend: http://i.imgur.com/d5Swp0z.png

Cheers!
Dake

August 17, 2015 at 10:31 pm #489180

Hi Drake,
I created a Subscriber account. To see the quick css section you need an administration account, am I right?
I build an online shop. I think on your screenshot is a part of the backend.

You can use the link to get to the right site.
http://new.justit.eu/index.php/webhosting/

Regards,
Daniel

August 17, 2015 at 10:56 pm #489194

Hi!

Thank you, I’m going to directly edit your quick css section now.

Cheers!
Dake

August 18, 2015 at 12:17 am #489213

Hi!

I made the below changes to your custom css:

tr:last-child td{
    border-bottom-style: none !important;
}

.avia-data-table .avia-desc-col {
    border-bottom-style: none !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
}

Regards,
Dake

August 18, 2015 at 9:21 am #489303

Hi Dake,

thank you very much for your work.

One think remains to be done. Perhaps you have missed that?
If you look at the bottom accordion you can see that there ist a top-border. I can change this if I remove
the “avia-heading-row” from the table. It’s is ok, because this headings only have an bold text. But why
is there an top-border now?
On every row which is a “avia-heading-row” you can also see that there is a little fault with the table on the right site.
http://new.justit.eu/index.php/webhosting/#toggle-id-6

Thanks in advance for your help

Best regards,
Daniel

August 18, 2015 at 12:02 pm #489414

Hi Dake,
no working on the website I see that the modifications you/we do take effect on other tables.
Not necessarily desirable. Is it possible to make changes on the table in the accordion (.avia) that
do not take effect on the other “normal” tables? Currently we violate tables on other places (sites).

View post on imgur.com

Best regards,
Daniel

August 18, 2015 at 5:51 pm #489640

http://i.imgur.com/rUz3M9k.png

Hey!

I have added a page-id to all of the table css we inserted so it is only applied on the web-hosting page.

I’ll working on a fix for the “fault”.

However some regular table cells in the last accordion are set to th instead of td causing right borders to appear:

Please recreate the last accordion table (using the previous tables as a template) so the only remaining issue will be the “fault”.

Best regards,
Dake

August 19, 2015 at 1:19 pm #490017

Hi Dake,

now I have tried to re-create the table. But the bugs remain.
As you can see in third table row that I tried to use explicit spaces. But that does not help.
Here is the full source code of the Appwizzard table.

<table class="avia-table avia-data-table avia-table-2 avia-builder-el-148 el_before_av_toggle_container avia-builder-el-first">
<tbody>
<tr class="avia-heading-row">
<th class="avia-desc-col"></th>
<th class="">MailWeb</th>
<th class="">BasicWeb</th>
<th class="avia-highlight-col">EnhancedWeb</th>
</tr>
<tr class="">
<th class="avia-desc-col"><b>Anzahl der Installationen</b></th>
<td class="">–</td>
<td class="">1</td>
<td class="avia-highlight-col">10</td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Blogs/CMS</b></th>
<th class="">&nbsp;</th>
<th class="">&nbsp;</th>
<th class="">&nbsp;</th>
</tr>
<tr class="">
<th class="avia-desc-col">WordPress</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Drupal</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Joomla</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Typo3</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Mambo</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Foren</b></th>
<th class="">–</th>
<th class=""><i class="fa fa-check"></i></th>
<th class=""><i class="fa fa-check"></i></th>
</tr>
<tr class="">
<th class="avia-desc-col">phpBB</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">bbPress</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">SMF</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Gallery</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Piwigo</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">TinyWebGallery</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Wikis</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">DokuWiki</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">MediaWiki</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Kalender</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">WebCalendar</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Umfragen</b></th>
<th class="">–</th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">LimeSurvey</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Projekt Management</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Mantis Bug Tracker</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Feng Office</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Collabtive</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>ERP</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Tine 2.0</th>
<td class="">–</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Gästebücher</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Advanced Guestbook</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Lazarus</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>Bildung</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Moodle 2.8</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Chamilo</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="avia-heading-row">
<th class="avia-desc-col"><b>RSS</b></th>
<th class=""></th>
<th class=""></th>
<th class=""></th>
</tr>
<tr class="">
<th class="avia-desc-col">Tiny Tiny RSS</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
<tr class="">
<th class="avia-desc-col">Gregarius</th>
<td class="">-</td>
<td class=""><i class="fa fa-check"></i></td>
<td class=""><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>

Cheers,
Daniel

August 19, 2015 at 3:42 pm #490150

Hi!

The rows that end with th’s instead of td’s are causing the right border to appear but you can use the below css to remove them:

.page-id-324 th {
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-right-style: none !important;
}

Once that has been inserted all that should be left is the bottom gutter and the right “fault”.

Best regards,
Dake

August 19, 2015 at 4:31 pm #490206

Hi Dake,

thank’s for your help. I think it’s ok, as it is now.

Best Regards,
Daniel

August 19, 2015 at 5:05 pm #490234