Значок внутри текстового поля - почти как значок глифа - PullRequest
Новая
       32

Значок внутри текстового поля - почти как значок глифа

0 голосов
/ 07 января 2019

У меня есть текстовое поле, в котором мне нужно добавить символ. Этот символ всегда должен быть видимым и не должен использоваться в коде позади (при получении значения текстового поля) - в основном, как значок glimhicon. Я пробовал использовать диапазон, но он не отображается так, как должен.

Вот что я сделал: 

    <div class="input-group">
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         @Html.TextBoxFor(m => m.AgreedValue, new { @class = "form-control", placeholder = "Agreed Value" })                                
    </div>

Вот как это отображается в данный момент:

enter image description here

И это то, что мне нужно для отображения, как:

enter image description here

Есть что-то, что я пропускаю? или как мне заставить его выглядеть как 2-е изображение?

1 Ответ

0 голосов
/ 07 января 2019

Все дело в стиле, если HTML можно изменить, то это мое решение: 

.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.input-text {
  border: none;
  height: 100%;
  width: 100%;
  background: transparent;
  padding-left: 10px;
}
.input-text:focus {
outline: none;
}
.input-group {
padding-left: 10px;
width: 300px;
height: 40px;
border: 1.5px solid rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 4px;
}
    <div class="input-group">
         <div>
         <span class="input-group-addon"><i class="glyphicon"><b>$</b></i></span>
         </div>
         <input type="text" class="input-text">                               
    </div>
...