[Free Template] Top Shelf Elements

I can only see the drag and drop table though. I was hoping to use the accordion.

You have to create a new app using the template, the app doesn’t automatically update unfortunately :confused:

I just made the App ‘Public Read Only’ :tada:

So for any future updates you can simply go to this link to copy the elements:

2 Likes

That feeling when a problem came up just today (drag and drop ordering) and you see a forum solution for it. Bubble and its community are amazing. :+1:

2 Likes

Hi @gf_wolfer thank you very much for the template.

I’ve successfully replicate your FAQ accordion (one item at a time) but there is a little error right there: the answer (“Grp Collapsed Info 2” in this case) it does not load properly; only a small part of the text is loaded.

You know why is happening this, because I tried many times and without succes?

@gf_wolfer I’ve discovered the issue.

The option “Animate the collapse operation” it was causing the problem.

I don´t know if this is a Bug for Bubble but is annoying for the UX.

I could not recreate the Text being cut off in the Top Shelf Elements app, it seems to be stretching to the correct height of the Text field.

Do you have a screenshot or GIF of it doing this?

Is the app you copied this functionality into on the most recent Bubble version?
(there was a Text Element bug fix in one of the versions)

Hi, @gf_wolfer I’ve made a Gif so you can see it clearly.

When i recreate the Accordion, I’ve done it in my app without copying (and paste) your elements.

New Element

Responsive Calendar - use a custom designed Calendar that matches your app instead of the Full Calendar plugin for more flexibility in your app

:+1: Shout out to @codurly for the original code and Forum post on this

Check out the free element here, with instructions on how to simply copy it into your app: https://topshelf-elements.bubbleapps.io/calendar

TsT-calendar%20gif

*Original forum post on creating a Custom Calendar: [HOW-TO] Create a custom Calendar using repeating group

5 Likes

Hi @gf_wolfer: it seems that you haven’t deployed the calendar to the app (yet) - I just installed the template and the calendar is missing (both as a page and in the navigation dropdown)…

EDIT: @gf_wolfer: check the just-installed app with the template at: https://nocalendar.bubbleapps.io/

I think this is because it has to go to Bubble for a review before it can be republished with the updates, should be ready soon. If not I believe the Read Only link further up should work.

Ah that makes sense.

I had already ‘constructed’ the read-only editor url ;-).

I tried copying the “COPY Calendar Elements” with “copy with workflows” and paste with workflows.
Weirdly the whole thing is working afterwards EXCEPT for the responsiveness. The calendar doesn’t scale down on narrower windows.
This is probably a Bubble bug. But it should be fixable manually, but I can’t find any difference in settings (especially properties like “fixed witdh” etc.).
Have you tried copy-pasting it yourself and if so: did the pasted calendar stay responsive?

Just tested it again and it is copying no problems for me - do you have a link to the editor page of the app it is being pasted in? Is it being pasted into a Group, Popup, Re-usable element or directly on the page?

The Responsive settings of the Group it is in may cause an issue, and the Page itself cannot be Fixed width

Ah - I didn’t realize that the page-element itself also has a fixed width by default. Unchecking that fixed the problem!

Thanks very much @gf_wolfer! Much appreciated!

1 Like

The last columns in the repeating group get hidden when the size is reduced to mobile level. What to do about it?

For the Table Element, there are Hiding Rules on the last two columns based on the screen size. This is in there so that the table looks good on multiple device sizes, but depending on your table and data you are displaying you might want to show or hide the columns.

You can change the Hiding Rules from the Responsive tab in the editor.

Picture of where to do this:

Amazing, right what I need

1 Like

Added some new Free elements and more information on my paid plugin, TopCal to this template (added them a while ago actually but forgot to update this thread)

Time Only inputs
A copy and paste Dropdown that is time-only and a time range selector that was more just a fun UX thing I was trying in Bubble but could be useful to some


Test it out here

Scheduling and Calendar Elements
Elements for any scheduling app, but optimized specifically to go with the TopCal Plugin

Test it out here

Solid work! @gf_wolfer

1 Like

Template Update

The Responsive Calendar in the Template is now built in Bubble’s new(ish) responsive engine. Instructions have been updated for how to copy and paste the calendar into your own app. More responsive updates coming soon to this template and to the Top Calendar elements!

Add the Template to your account or access the open editor to copy it into your app. Instructions for copying are on the page