ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / После jquery append() элементы вылязят за margin'ы
22 сообщений из 22, страница 1 из 1
После jquery append() элементы вылязят за margin'ы
    #39336885
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
На странице есть div с
Код: css
1.
2.
3.
4.
.center {
	margin: 0 auto;
	width: 80%;
}



Код: html
1.
2.
3.
<div class="holder">
	<ol id="elements"></ol>
</div>



Добавляю в "elements" с помощью jquery
Код: javascript
1.
2.
3.
4.
var idelements = $("#elements"); 
for (var i = 0; i < arr.length; i++) {
     idelements.append("<li class='ui-widget-content word'>"+arr[i]+"</li>");
}



Но после этого, вставленные li - элементы (li- элементы имеют стиль "display: inline;") выходят за границы внешнего "div class="holder"".
Как это исправить?
...
Рейтинг: 0 / 0
29.10.2016, 14:27
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336902
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Код: html
1.
2.
3.
4.
.center {
	margin: 0 auto;
	width: 80%;
}





Код: html
1.
2.
3.
<div class="holder">
	<ol id="elements"></ol>
</div>


у дива класс holder а не center
открой в браузере окно по F12 и можешь оперативно пробывать менять все правила css
...
Рейтинг: 0 / 0
29.10.2016, 14:54
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336907
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
rema174,
лучше такие вопросы задавать с демкой тут
...
Рейтинг: 0 / 0
29.10.2016, 15:03
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336909
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадя,

это печатка. css показан для того самого дива.
...
Рейтинг: 0 / 0
29.10.2016, 15:05
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336913
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
rema174,
а что в +arr[i]?
у меня переносится на новую строку если там есть пробелы
...
Рейтинг: 0 / 0
29.10.2016, 15:15
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336919
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
https://jsfiddle.net/7kyjh5b8/
...
Рейтинг: 0 / 0
29.10.2016, 15:25
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336924
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадяrema174,
а что в +arr[i]?
у меня переносится на новую строку если там есть пробелы

странно... в arr[i] - string
...
Рейтинг: 0 / 0
29.10.2016, 15:40
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336935
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
даже так
https://jsfiddle.net/7kyjh5b8/1/
...
Рейтинг: 0 / 0
29.10.2016, 16:02
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39336942
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
https://jsfiddle.net/7kyjh5b8/
...
Рейтинг: 0 / 0
29.10.2016, 16:11
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337022
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадя,

наверное это связано со стилями class='ui-widget-content word'
...
Рейтинг: 0 / 0
29.10.2016, 19:36
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337024
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
rema174вадя,

наверное это связано со стилями class='ui-widget-content word'
скорее всего, в моём примере он не учитывется, потому как ты о нем ничего не сказал,
можно сказать - причина локализована.
...
Рейтинг: 0 / 0
29.10.2016, 19:41
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337047
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадя,

я делал как в этом примере, только изменил элементы на дисплей инлайн (второй стиль, который у меня, это какой-то левый был...), но jqueri-ui подставляет и свои стили, которые в нижележащем коде не показаны

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectable - Serialize</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
 
  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#selectable" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#selectable li" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
      }
    });
  } );
  </script>
</head>
<body>
 
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
 
<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
</ol>
 
 
</body>
</html>
...
Рейтинг: 0 / 0
29.10.2016, 20:27
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337049
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
так же мой js выполняется из блока $(document).ready(function() {...
...
Рейтинг: 0 / 0
29.10.2016, 20:30
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337053
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
rema174,
для полноты воспроизведения
<link rel="stylesheet" href="/resources/demos/style.css">
это надо
...
Рейтинг: 0 / 0
29.10.2016, 20:37
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337065
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадя,

нет тот стиль - это просто для примеров для на их сайте, я его неиспользую
...
Рейтинг: 0 / 0
29.10.2016, 21:05
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337084
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадя,

вот точный пример, только скачай ui css на локалку (у меня от них не грузило)


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
 
  <style>
  #selectable {line-height:3em}
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white}
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; display:inline}
  .center { margin: 0 auto; width: 50%; background: silver; }  
  </style>
  
  
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 <script>
  
	
	$(document).ready(function() {
	
		var arr=['1111111111 ', '2222222222 ', '333333333', '44444444444', '555555555', '66666666', '777777'];
	  
		$(document).ready(function() {
			
			
			for (var i = 0; i < 10; i++) {
				$("#selectable").append("<li class='ui-widget-content'>" +arr[i] + "</li>");
			}
		});
	
	});
	
	
	$( function() {
    $( "#selectable" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#selectable li" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
      }
    });
  } );
  
  </script>
</head>
<body>

<div class="center">
 
<ol id="selectable"></ol>

</div> 
 
</body>
</html>
...
Рейтинг: 0 / 0
29.10.2016, 21:41
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337089
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
rema174,
Код: css
1.
2.
3.
4.
5.
6.
#selectable li {
    margin: 3px 0px 3px 3px;
    padding: 0.4em 10px 0.4em 0.4em;
    font-size: 1.4em;
    height: 18px;
}


если я правильно понял
...
Рейтинг: 0 / 0
29.10.2016, 21:46
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337090
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Код: css
1.
2.
3.
4.
5.
6.
#selectable li {
    margin: 3px 0px 3px 3px;
    padding: 0.4em 0px 0.4em 0.4em;
    font-size: 1.4em;
    height: 18px;
}


так правильнее
...
Рейтинг: 0 / 0
29.10.2016, 21:47
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337093
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
вадяесли я правильно понял
нет, ты не понял

li должны быть display:inline как у меня
...
Рейтинг: 0 / 0
29.10.2016, 21:49
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337094
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
остальное из #selectable li не существенно
...
Рейтинг: 0 / 0
29.10.2016, 21:53
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337105
rema174
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rema174
Гость
все оказалось просто - нужно было довать block ))
...
Рейтинг: 0 / 0
29.10.2016, 22:21
| Ответить | Цитировать | Написать  
После jquery append() элементы вылязят за margin'ы
    #39337350
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
я так понял тебе нужно было это http://jquery.page2page.ru/index.php5/Выбираемые_элементы
В виде сетки
...
Рейтинг: 0 / 0
30.10.2016, 16:41
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / После jquery append() элементы вылязят за margin'ы
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]