Автоматический перевод между встроенным и фиксированным без JS?

Question

Я пытался запрограммировать шикарное окно поиска CSS, в котором фон для моего значка увеличительного стекла окутывал панель поиска. Однако у меня были некоторые проблемы, так как строка поиска переключалась на следующую строку, когда она не была окутана. Вот мой код:

function searchProducts() {
    	document.getElementById("searchbar").submit();
    	
    }

.embtn {
        position:absolute;
        top:0vh ;
        left: 0vw;
        border-radius: 5vw;
    
        padding: 0.2vw;
        color: red; 
        width: calc(2vw + 1vh); 
        height: calc(2vw + 1vh);
        background-color: white;
        -webkit-transition: background-color 2s ;
        -webkit-transition: width 0.5s ease-out;
        -o-transition: background-color 2s ;
        -o-transition: width 0.5s ease-out;
        -moz-transition: background-color 2s ;
        -moz-transition: width 0.5s ease-out;
        transition: background 2s, width 0.5s ease-out 0.5s;
    }
    .embtn:hover {
    
        
        -webkit-transition: background-color 2s ;
        -webkit-transition: width 0.5s ease-out;
        -o-transition: background-color 2s ;
        -o-transition: width 0.5s ease-out;
        -moz-transition: background-color 2s ;
        -moz-transition: width 0.5s ease-out;
        transition: background 2s, width 0.5s ease-out 0.5s;
    	background-color: black;
        width: 30vw;
    
    }

<form id="searchbar" style=" position:absolute; top:5vh ;left: 2vw; " method="post" action="index.php">
    <div class='swhole'>
    <div class='embtn'><div  id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>
    
    <input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); );  ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
    </div>
    
    </div>
    
    
    </form>

Это было нормально до тех пор, пока фон не уменьшился до нормального размера, а затем строка поиска не перешла на следующую строку.

У меня тоже была скрипка: JSFIDDLE

Есть идеи, как сохранить все это в одной строке? Раньше он работал, но сейчас не работает.

:)

Answer 1

Вы допустили ошибку при применении ширины к стилю .embtn. Вы устанавливаете ширину width: calc(2vw + 1vh);, вместо этого она должна быть width: calc(2vw + 1vw);

Я внес некоторые изменения в встроенную таблицу стилей, чтобы сделать ее идеальной. Ниже приведены те.

Для searchproduct div: position:absolute; top:2px;

Для поиска: top: 2px;

См. Фрагмент ниже:

function searchProducts() {
    	document.getElementById("searchbar").submit();
    	
    }

.embtn {
        position:absolute;
        top:0vh ;
        left: 0vw;
        border-radius: 5vw;
    
        padding: 0.2vw;
        color: red; 
        width: calc(2vw + 1vw); 
        height: calc(2vw + 1vh);
        background-color: white;
        -webkit-transition: background-color 2s ;
        -webkit-transition: width 0.5s ease-out;
        -o-transition: background-color 2s ;
        -o-transition: width 0.5s ease-out;
        -moz-transition: background-color 2s ;
        -moz-transition: width 0.5s ease-out;
        transition: background 2s, width 0.5s ease-out 0.5s;
    }
    .embtn:hover {
    
        
        -webkit-transition: background-color 2s ;
        -webkit-transition: width 0.5s ease-out;
        -o-transition: background-color 2s ;
        -o-transition: width 0.5s ease-out;
        -moz-transition: background-color 2s ;
        -moz-transition: width 0.5s ease-out;
        transition: background 2s, width 0.5s ease-out 0.5s;
    	background-color: black;
        width: 30vw;
    
    }

<form id="searchbar" style=" position:absolute; top:5vh ;left: 2vw; " method="post" action="index.php">
    <div class='swhole'>
    <div class='embtn'><div  id="searchproduct" style="position:absolute; top:2px; font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>
    
    <input id="search" style=" color: white; position:absolute; top: 2px; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
    </div>
    
    </div>
    
    
    </form>

Проверьте это здесь также.

Answer 2

В фрагменте, которым вы поделились, элемент ввода поиска имеет верхнее значение, рассчитанное по очень сложной формуле.

Я бы предложил установить фиксированное верхнее значение. Если вы все еще хотите рассчитать его, используйте вместо этого переменные CSS. Проверьте следующий пример:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Answer 3

Единственной проблемой, которую я обнаружил, был способ расчета высоты смещения для ввода. calc(((2vw + 1vh)/2)-(1vw + 1vh)); выдвигал ваше поле ввода под значком. top: 1vh сохраняет его относительно встроенным.

Также переформатировал ваш код, чтобы его было легче читать.

.embtn {
    position:absolute;
    top:0vh ;
    left: 0vw;
    border-radius: 5vw;
    
    padding: 0.2vw;
    color: red; 
    width: calc(2vw + 1vh); 
    height: calc(2vw + 1vh);
    background-color: white;
    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background 2s, width 0.5s ease-out;
}
.embtn:hover {
    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background 2s, width 0.5s ease-out;
	background-color: black;
    width: 30vw;
}

.form {
   position:absolute;
   top:5vh;
   left: 2vw; 
}

.input-icon {
  font-size:calc(1vw + 1vh);
  cursor:pointer;
  display: inline;
}

.input {
  color: white;
  position: absolute;
  top: 1vh;
  left: 3vw;
  display: table-cell;
  border-style: none;
  outline: none;
  background: transparent;
  width: 25vw;
  font-size: calc(1vw + 1vh);
}

<form id="searchbar" class='form' method="post" action="index.php">
  <div class='swhole'>
    <div class='embtn'>
      <div id="searchproduct" class='input-icon' onClick="searchProducts()">&#x1F50D;</div>

      <input id="search" class='input' type="text" placeholder=" Search..." name="search" required>
    </div>
  </div>
</form>


<script>
function searchProducts() {
	document.getElementById("searchbar").submit();
	
}
</script>