CODEWITHSUNDEEP
javascripthtmlcss
Fifo
Fifo

Reputation: 57

Width cannot expand anymore and adjust with the others in CSS

I cannot make a full size witdh in ".selected" , ".select-box .options-container.active" and ".search-box input" in css even i made it as width: 100%; .

I'd like to make the "Plase choose a category" text field, the "Search.." text field, and the "1,2,3,4,5..12" drop-down list the same size as the "Title," "Condition," and "Send" buttons.

To be clear, I'd like all text fields, drop-down lists, and buttons to be the same size. However droplist and search box cannot be aligned with the others.

I'd appreciate it if someone could assist me in resolving this problem.

 const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");

  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};
.login-page {
  width: 550px;
  padding: 5% 0 0;
  margin: auto;
}
.login-page .form .login{
  margin-top: -30px;
  margin-bottom: 5px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 500px;
  margin: 0 auto 100px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
}
.form input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 1px solid; 
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}
.form input:focus{
  outline: none;
    border:2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
}

.form button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
body {
  background-color: #ffffff;
  font-family: "Arial";
}
.select-box {
  display: flex;
  flex-direction: column;
}

.select-box .options-container {
  background: #ffffff;
  color: #000000;
  max-height: 0px;
  transition: all 0.4s;
  border-radius: 5px;
  overflow: hidden;
  order: 1;
}

.selected {
    content: "";
    font-family: "Arial";
    outline: none;
    border:1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
  color: #000000;
  position: relative;
  order: 0;
  width: 100%;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-repeat: no-repeat;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  font-family: "Arial";
  width: 100%;
}

.select-box .option,
.selected {
  padding: 15px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #edf7f1;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}
/* Searchbox */

.search-box input {
    font-family: "Arial";
  outline: 0;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
}

.search-box input:focus {
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}
<div class="login-page">

      <div class="form">

        <div class="login">
          <div class="login-header">
            <h3>Post</h3>
            <p>Form</p>
          </div>

        </div>
        <form class="login-form">
          <input type="text" placeholder="Title"/>
          <input type="text" placeholder="Condition"/>


          <div class="container">
            <div class="select-box">
              <div class="options-container">
                <div class="option">
                  <input
                    type="radio"
                    class="radio"
                    id="automobiles"
                    name="category"
                  />
                  <label for="automobiles">1</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="film" name="category" />
                  <label for="film">2</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="science" name="category" />
                  <label for="science">3</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="art" name="category" />
                  <label for="art">4</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="music" name="category" />
                  <label for="music">5</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="travel" name="category" />
                  <label for="travel">6</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="sports" name="category" />
                  <label for="sports">7</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="news" name="category" />
                  <label for="news">8</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="tutorials" name="category" />
                  <label for="tutorials">9</label>
                </div>

                <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">10</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">11</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">12</label>
                  </div>
              </div>
              <div class="selected">
                Please choose a category
              </div>
              <div class="search-box">
                <input type="text" placeholder="Search..." />
              </div>
            </div>
          </div>
          <button>Send</button>
        </form>

      </div>

    </div>

Upvotes: 0

Views: 38

Answers (1)

Y.T.
Y.T.

Reputation: 2739

Use the debugging tool in your browser. As you can see:

debugging tool

You set a max-width on container so it limits the width of your .select. Also use box-sizing: border-box on .selected to avoid overflowing.

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");

  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
};
.login-page {
  width: 550px;
  padding: 5% 0 0;
  margin: auto;
}
.login-page .form .login{
  margin-top: -30px;
  margin-bottom: 5px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 500px;
  margin: 0 auto 100px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
}
.form input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 1px solid; 
  margin: 0 0 20px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
}
.form input:focus{
  outline: none;
    border:2px solid #08ac4b;
    box-shadow: 0 0 1px #08ac4b;
}

.form button {
  font-family: "Arial";
  text-transform: none;
  outline: 0;
  background-color: #08ac4b;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 0 20px;
}

.container {
  position: relative;
  z-index: 1;
  /*max-width: 300px;*/
  margin: 0 auto;
}
body {
  background-color: #ffffff;
  font-family: "Arial";
}
.select-box {
  display: flex;
  flex-direction: column;
}

.select-box .options-container {
  background: #ffffff;
  color: #000000;
  max-height: 0px;
  transition: all 0.4s;
  border-radius: 5px;
  overflow: hidden;
  order: 1;
}

.selected {
  box-sizing: border-box;
    content: "";
    font-family: "Arial";
    outline: none;
    border:1px solid;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
  color: #000000;
  position: relative;
  order: 0;
  width: 100%;
}

.selected::after {
  content: "";
  background: url("img/arrow-down.svg");
  background-repeat: no-repeat;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
  overflow-y: scroll;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  font-family: "Arial";
  width: 100%;
}

.select-box .option,
.selected {
  padding: 15px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #edf7f1;
}

.select-box label {
  cursor: pointer;
}

.select-box .option .radio {
  display: none;
}
/* Searchbox */

.search-box input {
    font-family: "Arial";
  outline: 0;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
}

.search-box input:focus {
  outline: none;
  border:2px solid #08ac4b;
  box-shadow: 0 0 1px #08ac4b;
}

.select-box .options-container.active ~ .search-box input {
  opacity: 1;
  pointer-events: auto;
}
<div class="login-page">

      <div class="form">

        <div class="login">
          <div class="login-header">
            <h3>Post</h3>
            <p>Form</p>
          </div>

        </div>
        <form class="login-form">
          <input type="text" placeholder="Title"/>
          <input type="text" placeholder="Condition"/>


          <div class="container">
            <div class="select-box">
              <div class="options-container">
                <div class="option">
                  <input
                    type="radio"
                    class="radio"
                    id="automobiles"
                    name="category"
                  />
                  <label for="automobiles">1</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="film" name="category" />
                  <label for="film">2</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="science" name="category" />
                  <label for="science">3</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="art" name="category" />
                  <label for="art">4</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="music" name="category" />
                  <label for="music">5</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="travel" name="category" />
                  <label for="travel">6</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="sports" name="category" />
                  <label for="sports">7</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="news" name="category" />
                  <label for="news">8</label>
                </div>
                <div class="option">
                  <input type="radio" class="radio" id="tutorials" name="category" />
                  <label for="tutorials">9</label>
                </div>

                <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">10</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">11</label>
                  </div>
                  <div class="option">
                    <input type="radio" class="radio" id="tutorials" name="category" />
                    <label for="tutorials">12</label>
                  </div>
              </div>
              <div class="selected">
                Please choose a category
              </div>
              <div class="search-box">
                <input type="text" placeholder="Search..." />
              </div>
            </div>
          </div>
          <button>Send</button>
        </form>

      </div>

    </div>

Upvotes: 2

Related Questions