Develop Reference

I am having GooglePlacesAutocomplete focus Issue

Hello I have used google dropdown in my react project and need to handle event on focus of the dropdown I couldn't make it can you help me?
As you can see in below output there is a div placeholder which i need to hide on focus. I have tried a few ways but it didn't work so I need some expert help. I am stuck in here.
code
<GooglePlacesAutocomplete
apiKey={'XXXXXXX'}
selectProps={{
value,
backspaceRemovesValue: true,
controlShouldRenderValue: true,
isClearable: true,
placeholder: strings["SELECT_LOCATION"],
onChange: async (e) => {
console.log("E : ", e);
setValue(e)
if (e) {
let location = await getLocationAction(e.value?.place_id)
let address = {
address: e.label,
location
}
getLocation && getLocation(address)
} else {
getLocation(null);
}
}
}
}
/>
Output
<div class="googleDropdown">
<div class="css-2b097c-container">
<span
aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
></span>
<div class="css-yk16xz-control">
<div class="css-1hwfws3">
<div class="css-1wa3eu0-placeholder">Select location</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block">
<input
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-3-input"
spellcheck="false"
tabindex="0"
type="text"
aria-autocomplete="list"
value=""
style="
box-sizing: content-box;
width: 2px;
background: 0px center;
border: 0px;
font-size: inherit;
opacity: 1;
outline: 0px;
padding: 0px;
color: inherit;
"
/>
<div
style="
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
height: 0px;
overflow: scroll;
white-space: pre;
font-size: 16px;
font-family: Comfortaa, Montserrat, sans-sarif;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-transform: none;
"
></div>
</div>
</div>
</div>
<div class="css-1wy0on6">
<span class="css-1okebmr-indicatorSeparator"></span>
<div class="css-tlfecz-indicatorContainer" aria-hidden="true">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
class="css-tj5bde-Svg"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
code

How can I create a Collapsible menu?

How can I create a Collapsible menu on "Cheat Status" and another on the "RainbowSixSiege Cheats".
I'm good at structuring sites with html and css but I'm denied with javascript
The complete code did not enter, I copied the main part, I hope there is everything you need
If you need anything I can send you the complete file, however I only need the javascript code to make these two "Menus" work
button {
display: inline-block;
border: none;
background: none;
cursor: pointer;
}
.product-status-box {
background-color: #fff;
box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
padding: 3.2rem 6.4rem;
border-radius: 22px;
margin-top: 3.2rem;
}
.product-status {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.product-status-title {
font-size: 1.8rem;
font-weight: 700;
}
.product-status-icon {
width: 2.4rem;
}
.margin-top {
margin-top: 1.6rem;
}
.hidden-box {
}
.hidden-box-btn {
display: flex;
align-items: center;
gap: 1.2rem;
}
.hidden-box-btn h3 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.product-icon {
width: 2rem;
}
.hidden-2nd-box {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
font-weight: 500;
}
<div class="product-status-box">
<button type="button" class="product-status">
<h2 class="product-status-title">Cheats Status</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-status-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-box">
<button type="button" class="hidden-box-btn margin-top">
<h3>RainbowSixSiege Cheats</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-2nd-box">
<p>Klar.gg</p>
<p class="green-text">Operational</p>
</div>
</div>
</div>

This is going to be tricky one I will suggest you to add jQuery UI and
put these tags in your HTML head element
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
NOW add this jQuery code in your JavaScript and link it to your html just like you link external CSS in index.html
like this
<script src=" *your file path of JavaScript* "></script>
now add these line in your JavaScript file
$(document).ready(function () {
$('').click(function () { //add your class or id in the click function
$('').slideToggle(); //here you add class or id which you want to show when user click on button
});
});
quotes in the above brackets are compulsory don't remove them place your class or id inside them
repeat this one with second button with different class or id.
Hope this will solve your problem.

Form Input previous values suggestions not shown correctly CSS HTML

The previous input suggestions element is getting affected by the CSS styles.
Somehow it is misbehaving when I get into responsive view in the inspect element window.
But when I resize the whole browser then it works fine -
Html for the input element-
<div
className='ModalWrapper Modal__Fullscreen '
showModal={showModal}
>
<CloseModalButton
className='CloseModalButton'
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
<div className='ModalSection1'>
<div className='modal__content1'>
<p className='modal__welcome'>Welcome Back</p>
<p className='modal__signin'>Sign in to continue.</p>
</div>
<div className='ModalBottomImg'>
<img className='big' src={bottomImg} />
<img
className='mobile'
src={topImg}
style={{ width: '100%' }}
/>
</div>
</div>
<div className='ModalSection2'>
<div className='modal__content2'>
<div className='google__login'>
<img
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA5CAMAAAClD0MEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAGSUExURQAAAP+/AECA7zCfUN9AQN9AMPe/APe3CO+AIECH70CA7zCnUOdIMOdAOPq6BUCF9DWqUDWlVepFNepFMOpANfu7BPebEECD8zSnVDSnUOdENOtANPy+A0CE9fy8A0OD8jOmU+lDNulDMzapUzOpU+xDNulDNvq9A0KF8jKnUupCMjOqU+pDNfi7BUKE9DSoUjKmVDSpUutENOtCNvm7BEKD8zSnVOlENOlCNkKG9DSoUutENfq8Bfq8BEGD8zOmUzOmUehDNUKF9DOoU+pDNfq6BUGE8jOnU+lDNfu8BEKG8zeffzSpUzSnU+lDNkGF8/u8BUOE9EGF9DSoU+pDNepDNPu8BUGF9DSnUupENelCNfq9BUKF9ECK3UGF9DOoU+pDNelCNfu8BUKF9DSoUzOoU+tDNOpDNfu8Be66CeK5DvmtC9a4E8m3GPaWFKSzKPSHGpeyLPOAHYuxMfF4IHOuOu9pJlmrRE2qSUGpTkCK4EKF9D+M1kGH6j2StzmbjzuWozakZ+xSLzWmXTSoU+pDNcRMx+0AAABodFJOUwAQEBAQECAgICAgICAgMDAwMDAwMEBAQEBAQEBPT1BQUFBQX19fX2BgYGBvb3BwcHB/f3+AgICAgI+Pj5CQkJCQkJ+fn6CgoKCvr6+vr6+wv7+/v7+/z8/Pz8/f39/f39/f7+/v7+/vEvGb2gAAAi1JREFUeNrN1elf0zAYB/DHTVRkU1Fx3TxRJ6ICTgW85wTcxGu6TUUGHSoziveNUYGZ/N9+2tE2ydI07ccX/t416XdPzhXgP0jXicLdRpNS2pypFrK7NdHZKuXTmAyme0XUTjWrVLvkyi66UzFCqsqlLjlLzFB1GgnpzJo0KC8Od7Is1UjpX7H+aCzRjMSgIb5TG88kAWBj5lRNwc4IajLDdCZLfizBqycZoT9ZkzIocawgeWNcxvZ8Ztl57ds2hd5HYZsQQkstZ0X0L/cQsuBXmy0k9d1DZOej5Y5BqGHaeduiCyH+gw44Di21QpSDK8jLFr5r+6hfDgKUPVYWfvI49ss9d1msXNZ2dYCnnhsK45jp7dN2mHN9EV2oesz8BsK42SjriQFuRtm/On9eNui6+wADrnr5ZYR33SkuDzx3FWCzw15/JxXlSa57bhjchXm3TAgxFCzFjDMFAOfsMX4iVsy4v7vhsWfW8zaE0KtvpJ2LvqybKXfdbimjN8vEyYgPizGzw/vtpr4PhMkRuZtm2Px6W4V1JCerxjJ8Yb3V4ByZ6BFZeo7b9a1Oe56Hz3OcTBfJ2k+Gjbo9cZMIuX10R7snnWvPYrVjdlZ6iSSmaS56Tyu/mD13c5oEZu2HMEo7Y8Hwz2+M8bS4ZhqQrOJHsY490hgquRWTbG6vGcTy8rPUU1SqxUO+h35QUTIfV11qPzlhBH3YjGIHrYzFtb6Jxsk7j51DU7k2KEN/AZeF7avEtSekAAAAAElFTkSuQmCC'
alt='gl'
></img>
<p>Continue with Google</p>
</div>
<div className='modal__seperator'>
<hr></hr>
<p>or</p>
<hr></hr>
</div>
<div className='home_modal'>
<form className='modal__form'>
<label>Your Full Name</label>
<input
placeholder='Enter Your Full Name'
type='text'
name='fullName'
onFocusOut={handleRequire}
onChange={handleChange}
></input>
{errors.fullName.length > 0 && (
<p className='modal__errors'>
<svg
className='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.fullName}
</p>
)}
<label>Your Email Address</label>
<input
placeholder='Enter Email Address'
type='text'
name='email'
onChange={handleChange}
></input>
{errors.email.length > 0 && (
<p class='modal__errors'>
<svg
class='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.email}
</p>
)}
<label>Password</label>
<input
placeholder='Enter Password'
type='password'
name='password'
onChange={handleChange}
></input>
{/* <svg
class='MuiSvgIcon-root visiblity'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'></path>
</svg> */}
{errors.password.length > 0 && (
<p class='modal__errors password_error'>
<svg
class='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.password}
</p>
)}
<button class='home__login' type='submit' disabled>
Next
</button>
</form>
</div>
</div>
<div class='modal__contentbottom'>
<hr></hr>
<p>
By signing up, you're agreeing to our{' '}
<span>Terms of Use</span>
</p>
<p>
Already have an account? <span>Log In</span>
</p>
</div>
</div>
</div>
CSS for the Form container, two columns
form {
display: block;
margin-top: 0em;
}
.modal__form > label {
font-size: 0.875rem;
color: #201e27;
margin: 0.625rem 0 2%;
font-weight: 600;
display: block;
line-height: 1.6;
max-width: 42em;
}
.modal__form > input {
border-radius: 0.3125rem;
margin-bottom: 0.6rem;
width: 96%;
font-size: 0.875rem;
font-family: Inter;
padding: 10px;
outline: none;
caret-color: #48ccac;
border: 1px solid #ddd;
transition: all 0.3s ease-in;
}
.modal__form > input:focus {
border: 2px solid #48ccac;
}
.modal__errors {
color: #e0133e;
width: 100%;
margin-top: 0.01em;
font-weight: 700;
font-size: 0.8rem;
display: flex;
align-items: center;
}
.modal__errors > .MuiSvgIcon-root {
color: #e0133e !important;
font-size: 1.1rem !important;
}
.MuiSvgIcon-root {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
margin-right: 4px;
}
.visiblity {
position: relative;
top: -2.6rem;
right: -22rem;
cursor: pointer;
}
Media queries for the mobile adjusting the two columns
#media (max-width: 770px) {
.ModalSection2 {
height: fit-content;
width: 90%;
margin: 20px auto;
padding: 20px;
}
}
#media (max-width: 415px) {
.ModalWrapper {
height: 100%;
border-radius: 0%;
margin: 0%;
display: block;
position: relative;
/* flex-direction: column; */
overflow-y: auto;
}
.CloseModalButton {
position: fixed !important;
color: grey;
}
.ModalSection1,
.ModalSection2 {
width: 100%;
margin: 0 auto;
padding: 0px;
color: black;
border-radius: 0 0 0 0;
position: relative;
}
.modal__content2 {
width: 100%;
padding: 0 27.2px;
margin: 0;
}
}
#media (max-width: 415px) {
.ModalSection2 {
min-height: 0%;
height: 100%;
overflow-y: unset;
}
.ModalSection1 {
padding-top: 30px;
height: 25%;
background-color: white;
}
}
What is going on here? What is that element called and how to manipulate it ?

Making the div follow autoresize textarea? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
PROBLEM
I have a comment textarea which i made text responsive thanks to Jack Moores npm package https://www.jacklmoore.com/autosize/. Now this all works fine but i have a div which is usually bottom:75px; and when textarea autoresizes it updates the hight of textarea. This is where the problem occurs i would like to update also bottom of that div for example to keep it from going over textarea.
HTML
<form action="#">
<textarea
type="text"
id="text"
spellcheck="false"
placeholder="Type message..."
maxlength="50"
></textarea>
</form>
<div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
<div class="three_dots_messages_menu">
<div class="three_dots_messages_menu_buttons">
<div class="send_tip_button all_message_buttons" >
<span>Send tip</span>
<svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15" style="margin: 2px 0 0 2px ;">
<path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
</svg>
</div>
<div class="chat_rules_button all_message_buttons" >
<span>Chat rules</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
<path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
</svg>
</div>
<div class="muted_users all_message_buttons" >
<span>Muted users</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
<path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
</svg>
</div>
<div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
<span>Close chat</span>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
</svg>
</div>
</div>
</div>
CSS
.three_dots_messages_menu {
position: fixed;
width: 15%;
height: 130px;
min-width: 232px;
bottom: -250px;
background-color: #363636;
border-radius: 5px;
opacity: 0;
transition: 0.3s;
}
#text {
border: 1px solid #d4af37;
background-color: #343333;
position: fixed;
bottom: 15px;
margin: 0 auto;
font-size: 17px;
width: 13%;
padding: 12px 30px 5px 10px;
color: white;
border-radius: 5px;
min-width: 190px;
min-height: 33px;
height: 33px;
max-height: 100px;
outline: none;
resize: none;
}
SOME INFORMATION AND QUESTIONS
I need to keep it position absolute not just fix this with margins.
I know i can do this modifying the js of autosize but i am honestly
not skilled enough to completely understand everything that is going
on.
Is there a way to maybe manipulate the DOM so i can make div children of that textarea ?
Do you know maybe easy js fix ?
JS for autoresize is too big you can view it from the website

It's best if you simply move the menu to a point before the textarea and remove its fixed positioning, so that it automatically remains in place.
If you want to adapt it dynamically, Autosize triggers an event where you can hook some code to update its position.
var $text = jQuery('#text'),
$menu = jQuery('.three_dots_messages_menu'),
baseDistance = 75;
$text.on( 'autosize:resized', function() {
$menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})

How to map the clickable area on a SVG button / link?

I am using a Circle shaped icon (from the font-awesome library) which acts as a button on my page. the problem is that the clickable area of the Icon is rectangular like any other HTML element.
is there any way to limit the clickable area to a circular shape so the button works only when you click inside the opaque area and not when you click on transparent bounding box?
I know that you can use maps to define clickable areas on images but Im new to SVG and could not find how to do the same thing with SVG.
I also tried {border-radius: 50%} but no avail. this is the Icon I am using and the HTML code:
https://fontawesome.com/icons/plus-circle?style=solid
<div id="new_item">
<span class="fas fa-plus-circle fa-4x"
data-toggle="modal"
data-target="#newEvent_modal">
</span>
</div>

Your idea of using border-radius:50% works for me:
.floating-button {
font-size:30px;
display: block;
border: 1px solid;
width: 1em;
height: 1em;
text-align: center;
border-radius: 50%;
margin:2em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<div id="new_item">
<a class="floating-button" href="#">
<i class="fa fa-plus"></i>
</a>
</div>
Update
The OP commented that they are looking for a SVG compatible solution. Also in this case border-radius:50% comes in handy:
* {
font-size: 32px;
margin: 0;
padding: 0;
}
svg {
width: 1em;
}
a {
border-radius: 50%;
display: inline-block;
width: 1em;
height:1em;
margin:1em;
overflow:hidden;
border:1px solid red;
}
<div id="new_item">
<a class="floating-button" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" ></path></svg>
</a>
</div>