var parentDiv = document.getElementById("cc");
var statementDiv = document.createElement("div");
var statementName = document.createElement("div");
// var removeIconDiv = document.createElement("div");
// removeIconDiv.className = "col w-25";
// removeIconDiv.setAttribute(
// "style",
// "padding-left: 7px !important; padding-right: 0px !important; width: 10px !important;"
// );
// statementDiv.appendChild(removeIconDiv);
var trashcan = document.createElement("span");
trashcan.className = "ml-4 col bi bi-trash";
trashcan.setAttribute(
"style",
"padding-left: 0px !important; padding-right: 0px !important; width: 10px !important;"
);
// removeIconDiv.appendChild(trashcan);
statementDiv.appendChild(trashcan);
statementDiv.appendChild(statementName);
statementDiv.className = "mb-3 option row text-left";
/* STATEMENT NAME ************************ */
statementName.className = "ml-2 col-2";
statementName.insertAdjacentText("beforeend", "Your Statement");
statementName.setAttribute(
"style",
"padding-left: 7px !important; padding-right: 0px !important; width: 110px;"
);
statementName.setAttribute("contenteditable", "true");
/***************************************** */
/* RADIO BUTTONS* ************************ */
for (let i = 0; i < 5; i++) {
var radioTemp = document.createElement("div");
radioTemp.className = "col text-center";
radioTemp.setAttribute(
"style",
"margin-right: 3px !important; width: 110px;"
);
var temp = document.createElement("input");
temp.className = "form-check-input";
temp.setAttribute("type", "radio");
temp.setAttribute("name", "2");
temp.setAttribute("disabled", "true");
radioTemp.appendChild(temp);
statementDiv.appendChild(radioTemp);
}
/***************************************** */
parentDiv.appendChild(statementDiv); <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey Generator</title>
<link rel="stylesheet" href="Vanessa.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c4740474152431e5a505c5d4073021d061d03">[email protected]</a>/font/bootstrap-icons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<div id="cc"></div>I have a span element as shown below:
var trashcan = document.createElement("span");
trashcan.className = "ml-4 col bi bi-trash";
trashcan.setAttribute(
"style",
"padding-left: 0px !important; padding-right: 0px !important; width: 10px !important;"
);
This icon serves as a trashcan, which I intend to make clickable for a specific action. However, the width of the icon is not ideal, as illustrated in the following images:
https://i.sstatic.net/9UrTK.png
https://i.sstatic.net/8S8Oo.png
Despite attempting to modify the width using width: 10px !important;, the issue persists. Is there a way to adjust the width to match the actual size of the icon? I also experimented with width: fit-content without success. Any suggestions would be greatly appreciated. Thank you.