Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.02.2015, 02:37
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Сдвиг контента скроллом
имеется вот такая верстка:

для контейнера со списком туду задач установлены свойства:
max-height:300px;
overflow: auto;


Как разультат, при добавление задач в список - появляется скролл.


Так и задумано, но есть проблема - скролл сдвигает контент влево на размер скролла. Поэтому
строка с созданием новой задачи(с синей кнопкой в строке) выглядит нессиметрично со строками задач в списке(с желтой, зеленой и красной кнопками). Как избавиться
от такого сдвига контентента?.. Может кто сталкивался с подобными задачами? Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2015, 05:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А верстка резиновая? Если нет, то пропиши ширину для инпута жестко.
Если да, то у мня вариантов нет..
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 27.02.2015, 09:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от FanAizu
имеется вот такая верстка
Это не верстка, это картинка... Ты тестовый пример сделай, тут выложи... Может чего и придумаем.
Ответить с цитированием
  #4 (permalink)  
Старый 27.02.2015, 09:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

FanAizu, похоже на твою картинку?


<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
.container {
	margin: 10px;
	border: 1px solid;
}
.item {
	margin: 10px;
	padding-bottom: 10px;
	overflow: hidden;
	border-bottom: 2px solid;
}
.item > div {
	/* вот эту величину нужно синхронизировать */
	width: 500px;
}
.item .box {
	float: left;
	width: 60%;
	height: 30px;
	margin-top: 10px;
	border: 1px solid;
}
.item select {
	margin-top: 15px;
	margin-left: 10px;
}
.list {
	max-height: 100px;
	overflow: auto;
}
.list > .item {
	border-bottom: 1px solid;
}
.list > .item:last-child {
	border-bottom: 0;
}
.list > .item .box {
	background-color: silver;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class='container'>
	<div class='item'>
		<div>
			<div class='box'></div>
			<select>
				<option>default</option>
			</select>
		</div>
	</div>
	<div class='list'>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
		<div class='item'>
			<div>
				<div class='box'></div>
				<select>
					<option>default</option>
				</select>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Если у элементов нет фиксированного размера, придется скриптом вычислять циферку (где комментарий)...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вставка контента на страницу: div vs iframe hrundel Общие вопросы Javascript 8 23.08.2016 07:48
Смена контента при нажатии на ссылку(css) x-miller-x Общие вопросы Javascript 6 24.05.2014 12:31
Прокрутка контента Blizzart Общие вопросы Javascript 0 23.07.2011 13:42
Загрузка контента без перезагрузки страницы vah-smile AJAX и COMET 3 30.03.2011 16:37
Динамическое изменение контента со скроллом Accessd Элементы интерфейса 0 03.10.2009 17:34