Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2021, 10:01
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Как задать inpyt type="range" длинну родителя
Здравствуйте, у меня есть текст в div-e, мне нужно чтоб родительский елемент имел width="длинна дива с текстом"
также в родительском диве есть input type="range"
мне нужно чтоб длинна дива была равна длинне родительского елемента.
Тоесть длинна инпута = длинне текста = длинне родительского елемента
Но етот код
<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body{
background: yellow;
}
.wrapper{
background: green;
}
.text{
font-size:20vmin;
}
input{
display:block;
width:100%;
height:1vmin;
padding:0;
margin:0;
}
</style>

делает input намного длинне чем текст... Такое чувство что width:100% родителя->родителя (тоесть в данном случае body) а не просто родителя (в данном случае wrapper)...

Последний раз редактировалось fori, 24.02.2021 в 10:04.
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2021, 10:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body {
    background: yellow;
}
.wrapper {
    background: green;
    display: table;
}
.text {
    font-size: 20vmin;
    display: table-row;
}
input {
    display: table-row;
    width: 100%;
    height: 1vmin;
    padding: 0;
    margin: 0;
}
</style>
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2021, 10:44
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, а существует ли способ получить такойже результат, если во .wrapper {
display: flex;
flex-direction: column;
} вместо display:table;
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2021, 11:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body {
    background: yellow;
}
.wrapper {
    background: green;
    display: inline-flex;
    flex-direction: column;
}
.text {
    font-size: 20vmin;
    
}
input {
    width: 100%;
    height: 1vmin;
    padding: 0;
    margin: 0;
}
</style>
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2021, 14:21
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо, я поставил display : inline flex во всех дивах-контейнерах, но проблема с тем что [при изменении масштаба страницы увеличивается длинна input-а осталась (наиболие заметно при изменении масштаба от 100 до 200), никак не могу понять что идет не так...]
<!DOCTYPE html>
<body>
	<div class="sidebar-wrapper">
		<div class="sidebar">
			<div>Какойто длинный текст</div>
			<div class="old">
				<input type="range" class="old__range">
			</div>
		</div>
	</div>
</body>
<style>
body {
  margin: 0;
  font-size: 3vmin;
}
.sidebar-wrapper {
  height: 100vh;
  width: 40vmin;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sidebar-wrapper .sidebar {
  background: green;
  
  //display: inline-flex;
  //flex-direction: column;
  //не помогает
}
.sidebar-wrapper .sidebar .old {
  margin: 2vmin 0;
  
  //display: inline-flex;
  //flex-direction: column;
  //не помогает
}
.sidebar-wrapper .sidebar .old__range {
  appearance: none;
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  height: 1vmin;
  width: 100%;
  background: yellow;
}
.sidebar-wrapper .sidebar .old__range::-webkit-slider-thumb {
  appearance: none;
  width: 1vmin;
  height: 1vmin;
  background: red;
}
</style>
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2021, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
@media (max-width: 480px) { .sidebar-wrapper .sidebar > div {
    font-size: 1.2em;
    }}
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как задать порядок нахождения querySelectorAll pokk Общие вопросы Javascript 9 26.10.2018 17:43
Как добраться до потомка родителя родителя? FRIE jQuery 5 28.09.2011 15:37
как в datepicker задать диапазон дат во время выполнения скрипта. Yurik jQuery 0 23.02.2011 12:19
Как правильно задать ID в создаваемом элементе ? Indiana Events/DOM/Window 15 31.10.2010 16:15
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 01:33