Неправильное размещение элементов в малых разрешениях - PullRequest
Новая
       56

Неправильное размещение элементов в малых разрешениях

0 голосов
/ 05 августа 2020

Через пару дней go вернулся к завершению sh старого проекта и решил изменить его UI, чтобы он был вкладками для мобильных устройств. Где-то из net нашел чистый дизайн CSS, который отлично работает, за исключением того, что дочерние элементы на каждой вкладке появляются под третьей вкладкой вместо соответствующей метки (см. Рисунок). Идея состоит в том, что все элементы, принадлежащие каждой вкладке, должны отображаться под соответствующей меткой вкладки, ie поля ввода для ADD вкладки должны отображаться под меткой ADD и так далее ... image 

* {
  box-sizing: border-box;
}

@media (min-width: 600px) {
  main {
    flex-wrap: nowrap;
  }

  div {
    flex-basis: 66%;
  }
}

@media (max-width: 45em) {
  .tabs .tab,  .tabs label {
    -webkit-box-ordinal-group: NaN;
    -webkit-order: initial;
    -ms-flex-order: initial;
    order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

html {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
  background-color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; /* fix for android devices */
  /* overflow: hidden; */ /* fix for android devices, currently disabled for desktops */
}

body {
  min-height: 100vh;
  padding-top: 10vh;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

main {
  background: #000000;
  display: flex;
  flex-flow: wrap;
  /*justify-content: space-between;*/
  align-items: center;
  justify-content: center;
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  padding: 1em 1em;
}

hr {
  width: 100%;
}

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*textarea {
  resize: none;
}*/

input {
  text-align: center;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.tabs label {
  /*-webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;*/
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  color: white;
  font-weight: bold;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}

.tabs .tab {
  -webkit-box-ordinal-group: 100;
  -webkit-order: 99;
  -ms-flex-order: 99;
  order: 99;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
}

.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.tabs input[type="radio"]:checked + label { background: white; color: black; }

.tabs input[type="radio"]:checked + label + .tab { display: block; }

.product-form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.fileuploadbutton {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  cursor: pointer;
}

.fileuploadbutton:hover {
  cursor: pointer;
  box-shadow: 0 0 7px #0080ff;
  border-color: #80ecff;
  color: #80ecff;
}

.addproductbutton, .searchproductbutton, .sellproductbutton {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  cursor: pointer;
  background-color: #000000;
  color: #bfdfff;
  margin: 1em 0;
  padding: 0 1em;
}

.addproductbutton:hover, .searchproductbutton:hover, .sellproductbutton:hover {
  cursor: pointer;
  box-shadow: 0 0 7px #0080ff;
  border-color: #80ecff;
  color: #80ecff;
}

.new-product-results, .search-product-results, .sell-product-results {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  padding: 0 1em;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="cache-control" content="must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>Sales and Inventory Control System</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header style="text-align: center">
      <h1>Sales and Inventory Control System</h1>
    </header>

<main>
  <div class="tabs">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <label for="tabone">Add</label>
    <div class="tab">
      <form class="product-form" id="newproductparameters" name="productparameters" action="#" method="post">
        <input type="text" id="name" name="name" required placeholder="Name" autofocus>
        <input type="number" min="0" id="number" name="number" required placeholder="SKU">
        <input type="text" id="category" name="category" required placeholder="Category">
        <input type="number" min="0" id="quantity" name="quantity" required placeholder="Quantity">
        <input type="number" min="0" id="available" name="available" required placeholder="Available">
        <input type="number" min="0" id="price" name="price" required placeholder="Price">
        <input type="text" id="info" name="info" required placeholder="Additional product info">
        <label>Choose product pictures<br /><input class="fileuploadbutton" id="pictures" name="pictures" type="file" multiple accept="image/png, image/jpeg"></label>
        <button class="addproductbutton" type="submit" id="addproduct" onclick="addProduct(); return false;">Add</button>
        <output class="new-product-results" id="newproductresults" style="text-align: center" name="newproductresults">New product results</output>
      </form>
    </div>
    
    <input type="radio" name="tabs" id="tabtwo">
    <label for="tabtwo">Search</label>
    <div class="tab">
      <form class="product-form" name="searchproductparameters" action="#" method="post">
        <input type="number" min="0" id="searchnumber" name="searchnumber" required placeholder="SKU" autofocus>
        <button class="searchproductbutton" type="submit" id="searchproduct" onclick="searchProduct(); return false;">Search</button>
        <output class="search-product-results" id="searchresults" style="text-align: center" name="searchresults">Search results</output>
      </form>
    </div>
    
    <input type="radio" name="tabs" id="tabthree">
    <label for="tabthree">Sell</label>
    <div class="tab">
      <form class="product-form" name="sellproductparameters" action="#" method="post">
        <input type="number" min="0" id="sellnumber" name="sellnumber" required placeholder="SKU" autofocus>
        <input type="number" min="0" id="sellquantity" name="sellquantity" required placeholder="Quantity">
        <select name="soldin" id="soldin" required>
          <option value="">-Choose where it was sold-</option>
          <option value="site">SITE</option>
          <option value="fb">Facebook</option>
          <option value="olx">OLX</option>
          <option value="bazar">Bazar.bg</option>
          <option value="phone">Telephone</option>
          <option value="viber">Viber</option>
        </select>
        <button class="sellproductbutton" type="submit" id="sellproduct" onclick="sellProduct(); return false;">Sell</button>
        <output class="sell-product-results" id="sellproductresults" style="text-align: center" name="sellproductresults">Sell product results</output>
      </form>
    </div>
  </div>
</main>

1 Ответ

1 голос
/ 05 августа 2020

Я думаю, вы можете сделать это с заказом на ответных экранах <45em's .. см. Фрагмент </p> 

* {
  box-sizing: border-box;
}

@media (min-width: 600px) {
  main {
    flex-wrap: nowrap;
  }

  div {
    flex-basis: 66%;
  }
}

@media (max-width: 45em) {
  .tabs .tab,  .tabs label {
    -webkit-box-ordinal-group: NaN;
    -webkit-order: initial;
    -ms-flex-order: initial;
    order: initial;
  }
  .tabs input[type="radio"]:checked + label + .tab{
    order: 0;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

html {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
  background-color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; /* fix for android devices */
  /* overflow: hidden; */ /* fix for android devices, currently disabled for desktops */
}

body {
  min-height: 100vh;
  padding-top: 10vh;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

main {
  background: #000000;
  display: flex;
  flex-flow: wrap;
  /*justify-content: space-between;*/
  align-items: center;
  justify-content: center;
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  padding: 1em 1em;
}

hr {
  width: 100%;
}

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*textarea {
  resize: none;
}*/

input {
  text-align: center;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.tabs label {
  /*-webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;*/
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  color: white;
  font-weight: bold;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}

.tabs .tab {
  -webkit-box-ordinal-group: 100;
  -webkit-order: 99;
  -ms-flex-order: 99;
  order: 99;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
}

.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.tabs input[type="radio"]:checked + label { background: white; color: black; }

.tabs input[type="radio"]:checked + label + .tab { display: block; }

.product-form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.fileuploadbutton {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  cursor: pointer;
}

.fileuploadbutton:hover {
  cursor: pointer;
  box-shadow: 0 0 7px #0080ff;
  border-color: #80ecff;
  color: #80ecff;
}

.addproductbutton, .searchproductbutton, .sellproductbutton {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  cursor: pointer;
  background-color: #000000;
  color: #bfdfff;
  margin: 1em 0;
  padding: 0 1em;
}

.addproductbutton:hover, .searchproductbutton:hover, .sellproductbutton:hover {
  cursor: pointer;
  box-shadow: 0 0 7px #0080ff;
  border-color: #80ecff;
  color: #80ecff;
}

.new-product-results, .search-product-results, .sell-product-results {
  border: 2px solid #bfdfff;
  border-radius: 1.5em;
  padding: 0 1em;
}
!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="cache-control" content="must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>Sales and Inventory Control System</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header style="text-align: center">
      <h1>Sales and Inventory Control System</h1>
    </header>

<main>
  <div class="tabs">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <label for="tabone">Add</label>
    <div class="tab">
      <form class="product-form" id="newproductparameters" name="productparameters" action="#" method="post">
        <input type="text" id="name" name="name" required placeholder="Name" autofocus>
        <input type="number" min="0" id="number" name="number" required placeholder="SKU">
        <input type="text" id="category" name="category" required placeholder="Category">
        <input type="number" min="0" id="quantity" name="quantity" required placeholder="Quantity">
        <input type="number" min="0" id="available" name="available" required placeholder="Available">
        <input type="number" min="0" id="price" name="price" required placeholder="Price">
        <input type="text" id="info" name="info" required placeholder="Additional product info">
        <label>Choose product pictures<br /><input class="fileuploadbutton" id="pictures" name="pictures" type="file" multiple accept="image/png, image/jpeg"></label>
        <button class="addproductbutton" type="submit" id="addproduct" onclick="addProduct(); return false;">Add</button>
        <output class="new-product-results" id="newproductresults" style="text-align: center" name="newproductresults">New product results</output>
      </form>
    </div>
    
    <input type="radio" name="tabs" id="tabtwo">
    <label for="tabtwo">Search</label>
    <div class="tab">
      <form class="product-form" name="searchproductparameters" action="#" method="post">
        <input type="number" min="0" id="searchnumber" name="searchnumber" required placeholder="SKU" autofocus>
        <button class="searchproductbutton" type="submit" id="searchproduct" onclick="searchProduct(); return false;">Search</button>
        <output class="search-product-results" id="searchresults" style="text-align: center" name="searchresults">Search results</output>
      </form>
    </div>
    
    <input type="radio" name="tabs" id="tabthree">
    <label for="tabthree">Sell</label>
    <div class="tab">
      <form class="product-form" name="sellproductparameters" action="#" method="post">
        <input type="number" min="0" id="sellnumber" name="sellnumber" required placeholder="SKU" autofocus>
        <input type="number" min="0" id="sellquantity" name="sellquantity" required placeholder="Quantity">
        <select name="soldin" id="soldin" required>
          <option value="">-Choose where it was sold-</option>
          <option value="site">SITE</option>
          <option value="fb">Facebook</option>
          <option value="olx">OLX</option>
          <option value="bazar">Bazar.bg</option>
          <option value="phone">Telephone</option>
          <option value="viber">Viber</option>
        </select>
        <button class="sellproductbutton" type="submit" id="sellproduct" onclick="sellProduct(); return false;">Sell</button>
        <output class="sell-product-results" id="sellproductresults" style="text-align: center" name="sellproductresults">Sell product results</output>
      </form>
    </div>
  </div>
</main>
...