Hi,
Developping some kind of content slider, I have bullets buttons to access to the different screens. The symbol just holds a circle drawn in Edge.
In Firefox or Chrome :
In Safari :
I could import a SVG circle instead. But what is the problem ? We could hope a simple circle is rendered correctly in every browser…
Gil
Annoying! You may want to use css for Safari to be sure!
sym.$('Rectangle').css({
'-webkit-border-radius': '50%',
'width': '20px',
'height': '20px'
});
Hi Mary,
I tried replacing the circle by an Edge rounded rectangle with your 50% radius trick to make it look like a circle, but Safari still renders a square.
So I tried your code. Given that there is a slider symbol with nested bullets symbols, I put that line in the document.compositionReady event handler :
sym.getSymbol("slider").getSymbol("bullet-1").$('roundedRect').css({ etc.
Did I miss something ?
Gil
Hi Gill,
OK. More testing - put it in creation complete in your symbol(s).
Use the ellipse to make the circles anyway so it is working in general and then use browser specific prefixes. (-moz- , -wekkit- etc..) if necessary.
I tried the 3 shapes:
Add this code to make sure it works for all browsers
sym.$('ellipse1').css({
'-webkit-border-radius': '50%',
'border-radius': '50%',
'width': '20px',
'height': '20px'
});
Hope this helps. i can post a file if you need.
sym.$('Rectangle').css({
'-webkit-border-radius': '50%',
'border-radius': '50%',
'width': '20px',
'height': '20px'
});
sym.$('RoundRect').css({
'-webkit-border-radius': '50%',
'border-radius': '50%',
'width': '20px',
'height': '20px'
});
By the way you will need to experiment so you are sure your circles are the same size.
Here for example - the first one in FF is bigger if you keep 20px than the 2 last ones - to make the circle the same size I had to use 35px for them.
So use your ellipse tool to make the circle and add the code so it works in all browsers and then test to make sure the size is corrected in the browsers that use the code instead of the shape.