Feature request
Description, Features, Video, Specifications, Reviews etc. are currently displayed as Tabs. On mobile phones it doesn't look nice when you have more Tabs. There is no space to display it in one row.
I think that would be much prettier if those options could be displayed as accordion list.
Is it possible to include this as feature request to have option to display that part of Item as Tabs or as Accordion?
Thanks!
Accordion
- Jan
- Phoca Hero
- Posts: 48416
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Accordion
Hi, thank you for the idea, I will take a look at it but not sure if there is such feature in bootstrap or uikit which are used for stylizing the output
Jan
Jan
If you find Phoca extensions useful, please support the project
- Nidzo
- Phoca Professional
- Posts: 397
- Joined: 07 Nov 2018, 14:55
Re: Accordion
Screenshot was made according to Bootstrap 5.X manual.
https://getbootstrap.com/docs/5.0/components/accordion/
Thanks!
https://getbootstrap.com/docs/5.0/components/accordion/
Thanks!
- Jan
- Phoca Hero
- Posts: 48416
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Accordion
Hi, yes, there is accordion in BS, but the question is, if there is some way in BS to transform tabs to accordion only with CSS for small screens. Because you can have only one Bootstrap code, the server side which renders the HTML does not have any information about which screen is used, so it only produces one HTML for Bootstrap. So when this should work, there needs to be a way in Boostrap which can with help of CSS only change the tabs to accordion
Jan
Jan
If you find Phoca extensions useful, please support the project
- Nidzo
- Phoca Professional
- Posts: 397
- Joined: 07 Nov 2018, 14:55
Re: Accordion
I understand! What about to make it as option to choose one or another only for all devices?
- Jan
- Phoca Hero
- Posts: 48416
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Accordion
Hi, I will take a look at this but generally because of limit for parameters, all design changes should be rather done in overrides than per parameters
Jan
Jan
If you find Phoca extensions useful, please support the project
- Nidzo
- Phoca Professional
- Posts: 397
- Joined: 07 Nov 2018, 14:55
- Jan
- Phoca Hero
- Posts: 48416
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: Accordion
Hi, great to hear it, thank you for this guide.
Jan
Jan
If you find Phoca extensions useful, please support the project
- dmlwebal
- Phoca Professional
- Posts: 238
- Joined: 18 Sep 2019, 12:49
Re: Accordion
Hi
Great solution Nidzo
I include it here for simply copy and paste
I prefer margin-left: -1rem and padding-right: 1rem but this is a great solution
I could only suggest further expansion via use of display: content; on parent container classes and some javascript to create accordion effect, but some CSS animation may also work.
David
Great solution Nidzo
I include it here for simply copy and paste
Code: Select all
ul#PcItemTab {
display: flex;
flex-direction:column;
flex-wrap: nowrap;
margin-left: -15px;
}
.nav-tabs .nav-link:before {
content: "\f103";
font-family:'Font Awesome 5 Free';
padding-right: 15px;
}
I could only suggest further expansion via use of display: content; on parent container classes and some javascript to create accordion effect, but some CSS animation may also work.
David
- Nidzo
- Phoca Professional
- Posts: 397
- Joined: 07 Nov 2018, 14:55
Re: Accordion
Thanks @dmlwebal. There is space for fine tuning of code according to needs.