CODEWITHSUNDEEP
javascripthtmlcss
user18353868
user18353868

Reputation:

Center buttons horizontally in a div

I have a text box and some buttons to the top left of it. I want those buttons to be directly on top of the text box instead of being to the top left of the text box. Is there any way to do this. I tried justify-content: center but it didn't work. I am trying to make a google doc like app so I need the buttons to be over the text box like google docs.

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document
  .getElementById("highlight")
  .addEventListener("click", function () {
    var range = window.getSelection().getRangeAt(0),
      span = document.createElement("span");

    span.className = "highlight";
    span.appendChild(range.extractContents());
    range.insertNode(span);
  });
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  background-color: lightgrey;
}

.userInput {
  margin: 1px;
  padding: 1px;
  width: 1000px;
  height: 700px;
  resize: none;
  font-family: "Segoe UI", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.inUse {
  background-color: lightblue;
  width: default;
  height: default;
  border-width: thin;
}

button {
  width: 100px;
}

.dropbtn {
  /* background-color: #3498db; */
  color: black;
  /* padding: 16px; */
  /* font-size: 16px; */
  border: none;
  cursor: pointer;
  width: 100px;
  height: 30px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

.highlight {
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <button class="bold" onclick="document.execCommand('bold',false,null);">
      𝗕
    </button>

    <button class="italic" onclick="document.execCommand('italic',false,null);">
      𝘐
    </button>

    <button
      class="underline"
      onclick="document.execCommand('underline',false,null);"
    >
      U̲
    </button>

    <input
      type="color"
      class="color-picker"
      id="colorPicker"
      oninput="changeColorText(this.value);"
    />
    <label>Select color</label>

    <button id="highlight"><mark>Highlight</mark></button>

    <fieldset class="userInput" contenteditable="true"></fieldset>

  </body>
</html>

Upvotes: 2

Views: 101

Answers (2)

Aloiso Junior
Aloiso Junior

Reputation: 451

Wrapping your buttons into a div and use flex-box, looks create the desired style.

But why? elements, inside a container displayed as flex, enable some specials behaviors about how distribute it children elements, so there are many usage of flex-box and how can help you here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In your case, the simple css style

.toolbar{ /* class name of wrapper div */
  display: flex; /* enable flex-box */
  justify-content:center; /* here instruct, place all,*/
  /* side-by-side but centralized */    
}


var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document
  .getElementById("highlight")
  .addEventListener("click", function () {
    var range = window.getSelection().getRangeAt(0),
      span = document.createElement("span");

    span.className = "highlight";
    span.appendChild(range.extractContents());
    range.insertNode(span);
  });
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  background-color: lightgrey;
}

.userInput {
  margin: 1px;
  padding: 1px;
  width: 1000px;
  height: 700px;
  resize: none;
  font-family: "Segoe UI", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.inUse {
  background-color: lightblue;
  width: default;
  height: default;
  border-width: thin;
}

button {
  width: 100px;
}

.dropbtn {
  /* background-color: #3498db; */
  color: black;
  /* padding: 16px; */
  /* font-size: 16px; */
  border: none;
  cursor: pointer;
  width: 100px;
  height: 30px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

.highlight {
  background-color: yellow;
}
.toolbar{
  display: flex;
  justify-content:center;

}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="toolbar">
    <button class="bold" onclick="document.execCommand('bold',false,null);">
      𝗕
    </button>

    <button class="italic" onclick="document.execCommand('italic',false,null);">
      𝘐
    </button>

    <button
      class="underline"
      onclick="document.execCommand('underline',false,null);"
    >
      U̲
    </button>

    <input
      type="color"
      class="color-picker"
      id="colorPicker"
      oninput="changeColorText(this.value);"
    />
    <label>Select color</label>

    <button id="highlight"><mark>Highlight</mark></button>
    </div>

    <fieldset class="userInput" contenteditable="true"></fieldset>

  </body>
</html>

Upvotes: 1

anolan23
anolan23

Reputation: 522

You were close. If the button is inside a div which is above the textbox make sure to add display: flex; in addition to the justify-content: center; that you mentioned.

MDN Flexbox learn more

Upvotes: 0

Related Questions