Hello everyone,
After 2 days of trying I have finally created some HTML code that created four diagonal lines in the corners of a square. The code is functioning properly when tested on W3Schools.com.
However, I am encountering issues when attempting to implement it on my Bubble site. I have a group with an ID attribute of ‘LINES’, and I have an HTML element called ‘LINES’ which it refers to.
Group with an ID attribute of ‘LINES’
HTML element called ‘LINES’
The result is that I see nothing so obviously I am not referencing the HTML correctly?
For reference, here is the full code I am using:
<style>
#LINES {
}
#LINES div {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
}
#LINES div p {
width: 25px;
height: 1px;
position: absolute;
margin: 0;
}
/* Rotate left squares 45 degrees clockwise */
#LINES div p.top-left {
top: 10;
left: 0;
transform: rotate(45deg);
background-color: gray;
}
#LINES div p.bottom-left {
bottom: 10;
left: 0;
transform: rotate(-45deg);
background-color: gray;
}
/* Rotate right squares 45 degrees counterclockwise */
#LINES div p.top-right {
top: 10;
right: 0;
transform: rotate(-45deg);
background-color: gray;
}
#LINES div p.bottom-right {
bottom: 10;
right: 0;
transform: rotate(45deg);
background-color: gray;
}
</style>
<div id="LINES">
<div>
<p class="top-left"></p>
<p class="top-right"></p>
<p class="bottom-right"></p>
<p class="bottom-left"></p>
</div>
</div>
Failing that, if anyone has al alternative way to create 45 degree lines then please let me know!
OK so that was kinda funny trying to fix this. I am fairly basic with CSS, but it’s easy enough to create a dynamic editor with a multi-line input and then reference that into an HTML element so you can dynamically test CSS… I can’t imagine why you need this, but ENJOY!
ANYWAY. You need the px on ALL of the dimensions, not just the width and height.
And you don’t need to add an element ID, since you reference it in the DIV already
<style>
#LINES {
}
#LINES div {
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
top: 0;
}
#LINES div p {
width: 25px;
height: 1px;
position: absolute;
margin: 0;
}
/* Rotate left squares 45 degrees clockwise */
#LINES div p.top-left {
top: 10px;
left: 0px;
transform: rotate(45deg);
background-color: gray;
}
#LINES div p.bottom-left {
bottom: 10px;
left: 0px;
transform: rotate(-45deg);
background-color: gray;
}
/* Rotate right squares 45 degrees counterclockwise */
#LINES div p.top-right {
top: 10px;
right: 0px;
transform: rotate(-45deg);
background-color: gray;
}
#LINES div p.bottom-right {
bottom: 10px;
right: 0px;
transform: rotate(45deg);
background-color: gray;
}
</style>
<div id="LINES">
<div>
<p class="top-left"></p>
<p class="top-right"></p>
<p class="bottom-right"></p>
<p class="bottom-left"></p>
</div>
</div>
Thank you, but I do have to add an element ID because I see no way to add HTML/CSS to a group, it must reference an HTML element. I have now figured out how to create the desired image out of CSS/HTML but still can’t display it for some reason.
For clarity, this HTML displays perfectly in a group;
<style>
#open {
background-color: red;
!important;
}
</style>
However, if I have something more complex I can’t get it to work. The following code displays fine on W3Schools but not on my site, I am not referencing the #open correctly I don’t think.
<div id="open">
<div class="container">
<!-- Top left diagonal line -->
<div class="diagonal diagonal-top-left"></div>
<!-- Top right diagonal line -->
<div class="diagonal diagonal-top-right"></div>
<!-- Bottom left diagonal line -->
<div class="diagonal diagonal-bottom-left"></div>
<!-- Bottom right diagonal line -->
<div class="diagonal diagonal-bottom-right"></div>
<!-- Gray area with white inset border -->
<div class="gray-area">
<div class="inner-border"></div>
</div>
</div>
</div>
<style>
#open .container {
height: 200px;
width: 500px;
background-color: #f7f7f7;
position: relative;
border: 4px outset white;
box-shadow: 0px 0px 2px 1px #A9A9A9;
position: relative;
!important;
}
#open .diagonal {
height: 1px;
width: 25px;
background-color: #A9A9A9;
!important;
}
#open .diagonal-top-left {
position: absolute;
top: 12px;
left: 0px;
transform: rotate(45deg);
!important;
}
#open .diagonal-top-right {
position: absolute;
top: 10px;
right: 0px;
transform: rotate(-45deg);
!important;
}
#open .diagonal-bottom-left {
position: absolute;
bottom: 13px;
left: 0px;
transform: rotate(-45deg);
!important;
}
#open .diagonal-bottom-right {
position: absolute;
bottom: 10px;
right: 0px;
transform: rotate(45deg);
!important;
}
#open .gray-area {
position: absolute;
top: 20px;
left: 20px;
height: calc(100% - 40px);
width: calc(100% - 40px);
background-color: gray;
!important;
}
#open .inner-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 4px inset white;
!important;
}
</style>
The code producing this ‘OPEN’ window, I will have another image for ‘CLOSED’ windows. I need to reference the HTML element to display these.
I am not sure what you are doing wrong, but this works perfectly. I literally just created a fresh app and plopped an HTML on the page and put your code in, and it even shows up in the editor perfectly also. No plugings, no elementID, nothing. Just your straight code.
OH I just noticed what your issue is… You keep referencing a group, and I didn’t put the pieces together… No. You need an HTML Element to show this CSS, NOT a group. That will solve your issues.
Hope this helps.
Ah! Ok, so I need an HTML Element to show this CSS, NOT a group. Thank you for helping with that!
I just tested it and you’re right, the HTML displays it but it won’t resize. The way my app works is that I have lots of dynamic groups which a user can change the size of, these groups need to look like windows (hence the CSS design).
Initially I wanted to make the groups simply reference an ID, however, in light of what you have said about needing to use an HTML element I suppose I could put the HTML element inside a group and set the HTML element to be 100% width/height … but it seems the code image itself doesn’t rescale?
How are you adjusting the dimensions right now?
If you had something like a slider or number input, you can tie those values into the CSS dynamically.
Currently the window panes (which are group elements) are all resized via inputs, see below two window panes A1 and A2.
The groups which are resized need to display the window image CSS and resize accordingly. So, I could place the HTML element inside the resizable group and apply the same dynamic sizing code? hmm, I need to think about where to add that code, this is a little over my head!
Send me a DM, with more info. I’ll help you out a bit. Send screenshots and simply more details on how you want things done.
1 Like
That’s very kind, I will DM you now.
@troy.roberge I did DM you but then I actually figured it out! I had overloooked the fact I can insert dynamic links into the HTML element itself, so I just made the windows width values Input width valueand the same for the height. The result is the HTML (which hold the CSS layout) scale dynamically and proportionately.
Thanks again for pointing me in the right direction!
Yup that’s what I was going to show you!
Perfect!
I do have another question which relates to something you said earlier.
Below I am showing one window with the CSS. In my app I might have 100 windows and I frequently like to update the look and feel, which means a lot of editing! Is there a way for me to reference the CSS from the window(s) HTML element so updating it once (in one location) will change all the windows?
No worries if you are busy, but I have created a page called ‘example_for_troy’ which you can look at. The strange thing is the HTML element (on page) references another element called ‘HTML-Window’. If I change anything in either of them the window doesn’t work, but I feel I shouldn’t need both things!
https://dtestcustomstates121022.bubbleapps.io/version-test/test4?debug_mode=true
Hey, I am not really sure I understood your question, but check out the link to the editor I gave you before. It might help you.
All of the CSS is going to a multiline input (for instructive purposes so you can see the change, and so you can dynamically write new code if you want), then that output is going into a source HTML element which could be 1px x 1px if required. Then the other ones on the page are just the DIVS you created, but are dynamically resized by the sliders at the top.
This should get you going.
Thank you @troy.roberge for your help. I just created a new post as I feel the current question I have is different from this thread. This thread related to how to display CSS in an on page HTML element which you helped me solve. The new question relates specifically to making one HTML element reference another HTML element.
