Question 288316 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Weird button behaviour in css?

I am making todo list with JS and jQuery. And I have come across a problem where, I am appending the button into the HTML with JS (code below). And the problem is that the button is appended with class to it. The class is set to just give the button width, height ,bacground-color, color, border, and border-radius.

The problem apears when I add the border-radius property to the button. The border becomes round and thas okay, but on the places where border shinked it is now white (image below).

Does anyone knows why is this happening, and how can I fix this.

**//Everything is happening on a button click**


**//Here is the css class**

.btn{
    width: 30px;
    height: 30px;
    background-color: var(--boja1);
    color: var(--boja4);
    border: 2px solid var(--boja4);
    border-radius: 20px;
}

**//Here I am appending a div element to html**

var boxx=document.createElement("div");
boxx.innerHTML=`<div class="box" id="box"></div>`;

txt1.before(boxx);

**//Here I am apending not important P thag to the div eleement**

var element=document.createElement("p");
element.innerHTML=`<p class="newItem" id="new`+ne+`" >`+text+`</p>`;

$("#box").append(element);

**//And here I am appending the button that is causing me the problem  to the P thag above**

var bt=document.createElement("button");
bt.innerHTML=`<button class="btn" id=""> &#x2715</button>`


$(`#new`+ne+``).append(bt);

This is how the button looks before adding the border-radius property in css

ANd this is how it looks after I add it

Tags:

2

Answers


  1. 0

    This is because the parent element background is visible after the button’s border gets the radius. You are appending the button to the $(#new+ne+“) element, You have to add a radius to that parent element too.

    $(`#new${ne}`).style.borderRadius("20px"); // add the same px as btn
$(`#new${ne}`).append(bt);

    OR deal it in .class

    .newItem {
   border-radius: 20px;
}

    OR Make the background: transparent

    .newItem {
   background-color: transparent;
}
    Login or Signup to reply.
  2. 0

    To fix this issue you need to ensure that the border-radius is applied correctly without any white gaps, you can use the border-collapse property and set it to separate on the button’s parent element. Here’s how you can modify your code:

    .btn {
    width: 30px;
    height: 30px;
    background-color: var(--boja1);
    color: var(--boja4);
    border: 2px solid var(--boja4);
    border-radius: 20px;
}

/* Add this CSS to the parent element of the button */
#new1 { /* Adjust the ID selector as needed */
    border-collapse: separate;
}

    Make sure that you apply the border-collapse property to the correct parent element to target the specific area where you want the button’s border-radius to work as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search