मुझे वास्तव में दो समस्याएं हैं जिनके लिए मुझे सहायता चाहिए:

  1. छोटी स्क्रीन पर खोज बार किसी कारण से नेवबार के ढहने से बाहर हो जाता है और मैं इसका पता नहीं लगा सकता।

  2. ऐसा लगता है कि Awesomplete.js या CSS खोज बार की चौड़ाई को ओवरराइड कर रहा है और इसे बाईं ओर धकेल रहा है, मैं भी अनिश्चित हूं कि क्यों।

अगर कोई इसमें सुधार करना चाहता है तो यहां jsfiddle है: https://jsfiddle.net/x4vusam1/

    .bg-steel {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#09c6f9+0,045de9+100 */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e3b70+0,29539b+100 */
  background: purple;
}

.navbar-brand {
  color: white !important;
}

.btn {
  background-color: transparent !important;
}

.navbar-collapse {
  position: relative;
  padding-top: 20px !important;
  max-height: 400px;
}

.navbar-collapse form[role="search"] {
  position: absolute;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 9;
}

.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
  padding: 8px 12px;
  border-width: 0;
  box-shadow: none;
  outline: none;
}

.navbar-collapse form[role="search"] input {
  padding: 16px 12px;
  font-size: 14pt;
  font-style: italic;
  color: rgb(160, 160, 160);
  box-shadow: none;
}

.navbar-collapse form[role="search"] button[type="reset"] {
  display: none;
}

@media (min-width: 768px) {
  .navbar-collapse {
    padding-top: 0 !important;
    padding-right: 38px !important;
  }
  .navbar-collapse form[role="search"] {
    width: 38px;
  }
  .navbar-collapse form[role="search"] input {
    font-size: 15pt;
    opacity: 0;
    display: none;
  }
  .navbar-collapse form[role="search"].active {
    width: 100% !important;
  }
  .navbar-collapse form[role="search"].active button,
  .navbar-collapse form[role="search"].active input {
    display: table-cell;
    opacity: 1;
  }
}




.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    display: inline-block;
    position: relative;
}

.awesomplete > input {
    display: block;
}  
2
ElasticPanda 13 फरवरी 2019, 11:56

1 उत्तर

class="d-flex" के फ़ॉर्म से अपनी सामग्री निकालें

// form <form class="d-flex" role="search"> // remove the form
     <div class="input-group">
          // your content
     </div>             
//  </form>
0
drp 13 फरवरी 2019, 13:52