Position absolute DOESN'T work
Hey, I'm trying to put the icons side by side with the text that I write from the modal. But the position absolute in the CSS it is not working. How can I solve it?
I want the icons to be in this position loke in the image below:
https://codepen.io/ssstephanyyy/pen/poOmdZY
13 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yes @HuNTeR
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@monimolimnion don't work
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Not
You didn't understand @monimolimnion
I want to make this using JavaScript
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
That's a pretty simple layout, why would you use javascript for it?
Sorry for that. I thought that you seeing the code, would understand my question. My mistake, sorry again. So my code in the JavaScript part is getting the value from the input text (modal), and then, create an unordered list. In this list, I want to add this icons everytime we get this value from the input text, to later on, add the functionality to edit and delete the tasks. But as you see in my updated code, the icons are not in the white square together with the task and I can't put it the place the I want like in the first image that I sent with my question @monimolimnion
To make the functionality of the code. And practice and learn more JavaScript
That's still the job of css. You can make a class that styles it the way you want and then make an element in JavaScript when you add a new task that adds the class
Css = styling, JavaScript = dynamic functionality.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
This isn't true, FYI. Absolute positing works just fine with no relative parent.
position: relative only changes the "root <0,0>" of where the absolute element goes to. If no relative parent exists it defaults to the body tag.If want to mess with JS for that use it to get the element and add attributes and datasets to store the state(s) of the elements you're interested in and use CSS to do the styling parts.
I would actually use background images for that.
They're much easier to "position" within the bounds of an input element, and you can have as many as you want.
No need for any positioning business here.
You can also add CSS properties inside your JS to represent the required icons or their offsets.