watching this has been a complete waste of time .... Yall might as well make videos for yourself because yall are the only ones that can understand it. Thats why your view count is low
Hi Donte, Thank you for the comment. If you let me know your learning style and whether you have no, some, or a lot of experience with Bubble. It would also be helpful to know what you are trying to get out of or achieve from the video, that would be helpful to me to then update or make another version of the video. Thank you.
Hi Bruno, You could do it that way or have the label and input in a group, that has a minimum width of 256, inside a group set to row. For instance first and last name as separate inputs. In desktop they are in a row and when it gets smaller that 256 they naturally appear in a column. Does that help?
Thanks for sharing this video, but I'm still having trouble getting mine to work. Could you please provide information on where to obtain the ID and where to input it? I'm currently using the free version of Bubble, and it seems like there might be limited functionality.
You're welcome! In the left side Settings menu, did you go to the General tab and scroll to the bottom to check the box for Expose the option to add an ID attribute to HTML elements? If so then on the element settings box under the Appearance tab at the bottom is the field for the ID attribute. I've also made an updated video here -> ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DEqRksmFTdg.htmlsi=f4WDXF0MLm07CeQy
Hey Mikreative, thanks for your tutorial ! Unfortunately I followed all the steps that you mentionned in the video but the popup is still appearing in the middle of my page... I dl the classify plugin and add my id attribute and my HTML style on my page but still not working :( can you help me please ?
Hi Kevin! I retested it and made some tweaks to the instructions in the description. It possibly be that I didn't specify you need opening and closing <style> tags in the HTML element. The closing one has a forward slash infront of </style>. Then the code goes between the tags. Let me know if that does it.
Hi, sorry for the late response. Did you get it to work? One tip would be to create the group with the data first, then make a copy to then make the haders.
You forgot to close the second statement in your code. } Any one copying this, make sure you copy the code in the final example, not the one he typed out. Thanks for the vid, was really helpful!
Wow! I've always wondered if there might be a better way to pass a class to an element, which this video also covered. Two birds with one stone. Thanks a bunch!
@@mikreative861 Sorry to get back so late to you, both of the solutions that you reccomended to me are paid, I have found wonderful image slider as a free alternative that seems to work just as good.
In the left side menu go to Settings, then General, scroll to the bottom, under Advanced options check the Expose the option to add an ID attribute to the HTML elements.
Thanks for taking the time to document this. I had to go step by step, but it seems it is a repeating group with a column format. Inside this, there is a wrapper with a wide minimum width, that forces the scrolling. The actual content is then stored in another group within the wrapper. Is this a fair summary?
Hi Kenneth! I created an updated video that hopefully is simpler. It also has the steps written out in the description. Essentially, Prep Step would be your overall container, Step 1 is repeating group - you can set the max width on here, Step 2 is the card wrapper where you control the max width, Step 3 is designing the card. Let me know how you make out. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eh76HB9kcgk.html
This is actually nice but not beginner friendly . It would have been a very superb one if you built the page from scratch and not assume we had something we were working on before now... i am talking about the layout . regardless though, it is a good one , you seem to post very unique tutorials but would be better if assume the people you are teaching do not have any idea of how things work
hi mike u build a lovely panel and i want to implant one thing from yours is how u made the image sit between the section profile ? how did u get a line pass through your image ?
Hi Shawn, Thank you. Sorry for the delay. The line in the back of the photo of the popup uses a -50 margin on the image to bring it on top of the line. This is set in the layout tab of the image. Let me know if you have any other questions.
@@cristobalariasbarros4294@cristobalariasbarros4294 So I understand better; do you want it to stick when scrolling vertically? Do you want the whole page to scroll up or just the table? A couple of thoughts without knowing the details would be to look at the Table Beta instead of a Repeating Group. There is a checkbox to make the header row stick.
Using the clip path allows you to use the same image in other locations or quickly change out the photo for others without having to spend time cropping.
Hi, your video help me so much. Im building marketplace too, Right now im stuck with the best database design for two side marketplace.. it is possible to share your ERD ? Thank
Hi, I'm glad it was helpful. I can point you to some resources from people that know more about databses than me. www.vertabelo.com/blog/example_er_diagrams/ bubble.io/blog/build-shopify-clone-no-code/ nocodedatabases.com/database-schemas-preview/1652388180814x232481011290603520
Hi Mike, thanks for putting this up here. Is there any way to make the right panel collapse when the user clicks outside the panel area? I'm trying to build a calendar popup in my bubble app that slides in, similar to your right panel, and hence the question.
Hi JohnPaul, You're welcome. I took a look and I'm thinking no with the way that it is doing it. You might be able to either write some javascript to set focus on the panel then when clicking anywhere outside the panel closes it. Or make the panel full width, 2 column, background transparent in the first column and see if you can set it to close when clicked. Let me know how you make out. Thank you!
Sorry for the late reply. Good question. I don't have a mouse with a scroll wheel so haven't tested. I did come across this post which would be interesting to try - css-tricks.com/pure-css-horizontal-scrolling/
Thank you for sharing your design tutorial, the quality is excellent! If I may share some constructive criticism, the tutorial was very difficult to follow due to the lack of consistent narration. Many of the settings and group selections are not announced which made it very confusing to follow. I had to watch closely step-by-step by going into full screen to see which group was being selected and to make sure I didn't miss a setting. I hope that's helpful, and I look forward to more tutorials from you in the future!
Sorry for the late reply. I imagine you've already found a solution. If not I came a cross this post that might help - medium.com/@tak_m/how-to-refresh-a-repeating-group-in-bubble-io-that-uses-airtable-8cfe9a5347bf
You will need to add the !important to each style in your style sheet to override the Bubble generated styles. For instance .myTextButton:focus-visible { outline-color: #FF934F !important; outline-offset: 0.25rem !important; outline-style: solid !important; outline-width: 0.2rem !important; } Your style sheet is within the HTML element on the page. Does that answer your question? If not please provide more details. Thank you!
For this example, I created an Option Set called Dummy with attributes of Category, Description, Featured (yes/no), Image (image), price, subcategory, and display. Then added the data to it.
I created a video on using a database table to populate the cards and put some resources in the description for courses. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bFCoAqw8umg.html
Hi, I didn't use a plugin for that. I used the Element Actions > Animate in the workflow to slide the panel in. Before the animation I Displayed the data in the group. Does that help?
Is it possible to use this method to create a sticky group within a repeating group? Basically I want the first column of my repeating group to freeze in place while the rest of it scrolls
@@mikreative861 no problem at all I appreciate the response. Yea i've got it working, just not when its like nested within multiple groups. its weird...
You can target some elements with using CSS in the page header or the HTML element. With Bubble being in transition in the way it renders pages they've mentioned not to rely on the class names they've assigned since they may or may not be changing. I use the Classify plugin to give a class name to an element that I need to target. Then I use CSS in the HTML element. Does that make sense?
