Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Round container

izzo
Guest
Quote
2023-04-07 18:52:43

How make round container, or any round responsive shape with some background colour or image for adding text on it, or for graphic purposes


erik
Registered User
Quote
2023-04-07 21:32:30

Just use a container and set its border radius to some value.


izzo
Guest
Quote
2023-04-07 21:53:36

As i wrote i want round shape, really round and responsive, it must remain round in different resolutions and in mobile view. What you advise i tried before this post, it is useless. Just try and than click preview button and show result in browser, also you can resize the browser to see another results. Thanks.


izzo
Guest
Quote
2023-04-07 21:55:52

Round i mean CIRCLE


erik
Registered User
Quote
2023-04-08 05:31:15

Then use a very, very large border radius, like 200.
And if thats not enough, force the shape to be sqare, by setting the size to a fixed value, like 200,200


micaelo
Registered User
Quote
2023-04-08 09:50:34

See here for the basics of creating a responsive circle
https://www.w3docs.com/snippets/...
(Scroll down to the paragraph on responsive circles.)
You can use further CSS to style the circle as to border, fill color, etc.


izzo
Guest
Quote
2023-04-08 11:23:45

it is pity that there is no built in tool to make elementar circle.


izzo
Guest
Quote
2023-04-08 13:33:53

Thanks Erik, but it not works. Just check it yourself in different resolutions in rocketcake with slider.


izzo
Guest
Quote
2023-04-08 13:49:36

Erik, for easy understanding try as you write put it in the center of page or even better put it in the right side of page and move slider and you see the result.


niko
Moderator
Quote
2023-04-10 07:28:05

Be sure that you set absolute values for both widht and height, and set them to the same value. (No "%" at the end, no "Auto"). Then it doesn't resize.


micaelo
Registered User
Quote
2023-04-11 17:00:38

izzo wrote:
As i wrote i want round shape, really round and responsive, it must remain round in different resolutions and in mobile view.


Here is how to create a responsive circle container in RocketCake:
- insert a HTML Code element from the Toolset
- set its BackgroundMode = invisible
- set its BoderMode = none
- set its Size so to define the diameter of the circle = % of screen width, or page width respectively
- right-click the HTML Code element and select Edit Code ...
- copy and past this code
<div class="rescircle"></div>

- right-click the page in the Documents Explorer and select HTML Code ...
- select Additional Code in Header
- copy and paste this code
<style>
.rescircle {
width: 100%;
border-radius: 50%;
background: b5b5b5;
border: 3px solid 0000FF;
}
.rescircle:after {
content: "";
display: block;
padding-bottom: 100%;
}
</style>

- click Preview to view the result

You can download the test file from here
https://4hundert.de/rctests/resp...

Here some more examples
https://4hundert.de/rctests/resp...


izzo
Guest
Quote
2023-04-11 19:28:32

Micaelo, many many thanks for yourt effort. Can you also know how to do this - Hover Menu not disappearing on mouseout, on moseover the menu opens, that is good, but on mouseout not disappearing, even when click the same menu, need to find some empty space on background to clikck and then closes. On mobile view sometimes it is very hard to find empty space to click and the menu covers the most part of page. On ambiera site is the same problerm. How to solve this bug or task ?


micaelo
Registered User
Quote
2023-04-11 19:50:42

izzo wrote:
Micaelo, many many thanks for yourt effort. Can you also know how to do this - Hover Menu not disappearing on mouseout, on moseover the menu opens, that is good, but on mouseout not disappearing, even when click the same menu, need to find some empty space on background to clikck and then closes. On mobile view sometimes it is very hard to find empty space to click and the menu covers the most part of page. On ambiera site is the same problerm. How to solve this bug or task ?


I see what you mean. Same issue here, but I don't know why that is. That's something niko can hopefully answer.
By the way, on a mobile's touch screen you don't have a mouseout. So there is no way around tipping somewhere else to close a sub menu.


izzo
Guest
Quote
2023-04-11 23:47:02

Michaelo, thanks for answer. On mobile just touch the screen with the finger, touch any convient place on screen, and menu will close.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internatio?al" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact