Title: Responsive Ext – Collapse Button Last modified: April 8, 2018 --- # Responsive Ext – Collapse Button * Resolved [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/) * Hi Tobias, * I’m trying the Responsive ext. * This may seem like a nit, but is the collapse icon / button color configurable? I don’t use bright green anywhere on my site… * Thanks! Viewing 8 replies - 1 through 8 (of 8 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10158353) * Hi, * thanks for your post, and sorry for the trouble. * For this, you can use CSS code. Please see [https://wordpress.org/support/topic/change-color-of-the-button-in-responsive-tables/](https://wordpress.org/support/topic/change-color-of-the-button-in-responsive-tables/) for examples. * Regards, Tobias * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159133) * Tobias, * First of all, you provide awesome support – I just donated. * The color changes work perfect. One additional question – trying to get vertical alignment consistent with the row data. I added “vertical-align…” to each section of the CSS you provided, but the expand / collapse button still looks like it’s top-aligned in each row: * .tablepress.dataTable.dtr-inline.collapsed > tbody > tr[role=”row”] … .tablepress. dataTable.dtr-inline.collapsed > tbody > tr[role=”row”] … background-color: # b3b3b3; **vertical-align: middle !Important;** * Any way to implement vertical align for the button? * Again, thanks for the great support! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159182) * Hi, * good to hear that this helped! 🙂 And thanks again for the donation! * Aligning these centered is tricky, and I can’t see an immediate solution. The reason for this is that the button element is added with CSS itself, and it needs to use absolute positioning. That’s why the `vertical-align` property doesn’t apply here :-/ I can only suggest that you try finding a different CSS approach using e.g. the Developer Tools of your browser (I recommend those from Chrome). * Regards, Tobias * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159203) * **UPDTATE** * I also installed [http://tablepress.org/extensions/datatables-row-details/](http://tablepress.org/extensions/datatables-row-details/), but it seems to have overlapping / conflicting behaviors with respect to the responsive extension. My feedback: * **RESPONSIVE EXTENSION BEHAVIOR** – expand/collapse button column width is narrow( good – doesn’t waste horizontal real estate) – icon is crisp (see below) and colors can be configured per notes above. – icon (at present) cannot be vertically aligned. – expand function intelligently chooses the columns that can’t be displayed in collapse mode…and right-aligns label and left-aligns values (which looks good) * **DETAILS EXTENSION BEHAVIOR** – expand/collapse button column width is wider than responsive column – expand/collapse button does not pick up CSS color changes– expand/collapse button is fuzzy – clicking on button adds an orange border (for just the button cell) (distracting) – expand function left-aligns label and right- aligns value (looks weird) * **VERDICT** – I deleted the details extension. – The only advantage to the details extension is the ability to override the columns displayed in detail mode – but the responsive extension already intelligently selects and correctly formats columns to display in detail mode. * –> If you could provide the vertical-align CSS for the responsive extension, that would make it a really good and complete solution…it’s clearly the better extension. - This reply was modified 8 years, 2 months ago by [IMTanuki](https://wordpress.org/support/users/imtanuki/). - This reply was modified 8 years, 2 months ago by [IMTanuki](https://wordpress.org/support/users/imtanuki/). * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159239) * Tobias * As always, thanks for the quick reply. * Actually, if you could look at the details extension, you’ll see that it does vertically-align. The problem is that it’s other not-so-good behaviors. * So, I think it should be possible to tweak the responsive extension to vertically- align in the same manner that the details extension does. * Could I trouble you to take another look at this issue? * Thanks! * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159443) * Reference: [https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css](https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css) * top: 15px; (or some # based on row height) does the trick… * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10159515) * For anyone else who wants to tweak the collapse buttton, the following css vertically“ centers” and mutes the colors a bit: * /* TABLEPRESS – COMMON – COLLAPSE FUNCTION – MOBILE */ .tablepress.dataTable. dtr-inline.collapsed > tbody > tr[role=”row”] > td:first-child:before, .tablepress. dataTable.dtr-inline.collapsed > tbody > tr[role=”row”] > th:first-child:before{ background-color: #b3b3b3; top: 15px; font-family: Impact; font-weight: bold ! Important; * } .tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first- child:before, .tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before { background-color: #7B68EE; top: 15px; font-family: Impact; font-weight: bold !Important; * } * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10164245) * Hi, * the Row Details Extension uses a different implementation of the +/- buttons ( they are actually images there). That’s why, styling, etc. is different. * Your solution with the `top` property will of course work (but only if the row height is always the same). Nice find! * Best wishes, Tobias Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Responsive Ext – Collapse Button’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 8 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/responsive-ext-collapse-button/#post-10164245) * Status: resolved