I have created a block and added a popup to it. I tried placing the "X" icon at the top of popup it's been displayed outside the popup widget . I need that to be displayed at the corner of popup box.
I will attach the snapshots of my result and the expected one. Can someone help out how to achieve that result.
My output:
My expected output:
I understand what you meant, but your solution is not a solution...
I gave a solution... And the owner of the question can adapt the styling as he wants.
I am not interested in the positioning, I am interested in the responsiveness... you want this to work on every screen and not just yours. You understand?
Now you have everything!
PS: I had -8px to the top and right attributes because it is half of the size of the icon :)
Another thing is the icon for closing needs to have in its creation a background if its own, because if doesn't have you will need to do it yourself and it's not going to look pretty...
I did it myself, I had to add a background colour and a border-radius! If the owner already has his own icon, you just need to remove those styles.
Note: the solution you shared is not a solution because we don't use static values or margins to position an element in the way we want atm. If you want responsiveness, you need to adapt and be creative in your solution.
Hi Priya , Pls try below css for expected result and pls mark as solved once you got the solution.
Image Caption
Hello @Priya Mv,
create a pattern/element/div for the close icon with:
position: absolute;
right:0;
top:0;
(you will define a class which will have this style and that class will be assigned to the style classes of the element which has the close icon)
and the popup class has to have a position: relative
why?
because the close icon will be absolutely relatively to the popup :D
PS: then you need to adapt the styling to your liking. Also, try to do you first, I could do all the job for you as lots of people will do, but I believe in you, tell us if you need help :)
Kind Regards,
Márcio
Thank you , will try this.
Hi @Priya Mv
You can use another container for the close popup icon and align it to the right.
Hope this will help you.
Thank You.
Hi
You can try this CSS as reference, it is still needed to adjust for your requirements. But I hope it will help you to simplify your issue.
Regards
I need this exact output in my case...Is this CSS been used over an icon on a popup? I tried using this CSS if its top or right value is reached maximum I can't able to proceed further . The icon is been moved out of the popup box and it's getting disabled. I will share my output for your reference.
Expected output:
Hi Priya , Are you expecting like this. I shared my OML ,hope it will helpful for you.
Thank you!
@Venkatesaiya can you explain to me what is this solution?
And @Priya Mv can you explain me how can you accept this solution? it will not work... is not responsive...
What I told you precisely to do was this... In my first comment :(
And its responsive
Hi marcio, hope You can find the difference between Your output and expected Output.
I understand Márcio Carvalho , Thank you. The Owner expect position so I do that.