Select - как сделать перенос строки, если содержимое очень большое

@bulletproof24 · Регистрация: 19.09.2013

Author24 — интернет-сервис помощи студентам

Какой бы длины не было содержимое option'а у select'а, оно всегда размещается в одну строчку и максимальной длины. Как сделать перенос строки, если содержимое очень большое?

@kvant355 · 05.06.2014, 15:01

задать фиксированную ширину

mihalken · 05.06.2014, 15:13

Это невозможно для стандартного select'a да и нелогично - если выбирать значение, - так нужно видеть его полностью.
Хотите сокращённый - используйте блочное всплывающее построение - там сможете прицепить любые стили, какие захотите.

@maximus2011 · 05.06.2014, 16:58

а я уже очень давно вот этим плагином пользуюсь. http://formstone.it/components/selecter

@bulletproof24 · 05.06.2014, 17:23 **[ТС]**

kvant355, так не получается.
mihalken, я не собираюсь содержимое урезать, я всего лишь хочу растянуть на несколько строк.

Сообщение от mihalken

блочное всплывающее построение

это как?
maximus2011, посмотрю. долго внедрять этот плагин? и такой момент: у меня некоторые селекты динамические, в зависимости от выбора к примеру страны, регионы грузятся с бд, посредством аякса. На прошлых моих стилизованных селектах, это все не работало. как убрал стили, сразу все запахало. На этом плагине возможны ошибки?

@maximus2011 · 05.06.2014, 18:30

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

mihalken · 09.06.2014, 08:10

Сообщение от bulletproof24

это как?

Да-а, хотя бы так.

HTML5

<div id="dd" class="wrapper-dropdown" tabindex="1">
    <span>Укажите сферу деятельности...</span>
    <ul class="dropdown" tabindex="1">
        <li><a href="#">Добывающая промышленность</a></li>
        <li><a href="#">Обрабатываемая промышленность</a></li>
    </ul>
</div>

Javascript

/* © webmasters.by */
function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });
 
        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}
 
$(function() {
    var dd = new DropDown( $('#dd') );
 
    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown').removeClass('active');
    });
});

CSS

*,
*:after,
*:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
 
body {
    background: silver;
}
 
.wrapper-dropdown {
    /* размер и положение */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 600px;
    padding: 10px;
    margin: 0 auto;
 
    /* цвет и фон */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;
 
    /* шрифт */
    font-weight: bold;
}
 
.wrapper-dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;   
}
 
.wrapper-dropdown .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */
 
    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    list-style: none;
}
 
.wrapper-dropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}
 
/* Hover state */
.wrapper-dropdown .dropdown li:hover a {
    background: #f3f8f8;
}
 
/* Active state */
.wrapper-dropdown.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
 
.wrapper-dropdown.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}
 
.wrapper-dropdown.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

http://jsfiddle.net/mihalken/5CgYG/

для примера

@bulletproof24 5 / 5 / 3 Регистрация: 19.09.2013 Сообщений: 303
		1
	Select - как сделать перенос строки, если содержимое очень большое 05.06.2014, 13:38. Показов 27919. Ответов 6 Метки нет (Все метки) Какой бы длины не было содержимое option'а у select'а, оно всегда размещается в одну строчку и максимальной длины. Как сделать перенос строки, если содержимое очень большое? Миниатюры 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	05.06.2014, 15:01	2
	задать фиксированную ширину 0

mihalken 97 / 97 / 74 Регистрация: 15.05.2014 Сообщений: 269 Записей в блоге: 2
	05.06.2014, 15:13	3
	Это невозможно для стандартного select'a да и нелогично - если выбирать значение, - так нужно видеть его полностью. Хотите сокращённый - используйте блочное всплывающее построение - там сможете прицепить любые стили, какие захотите. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.06.2014, 16:58	4
	а я уже очень давно вот этим плагином пользуюсь. http://formstone.it/components/selecter 0

@bulletproof24 5 / 5 / 3 Регистрация: 19.09.2013 Сообщений: 303
	05.06.2014, 17:23 [ТС]	5
	kvant355, так не получается. mihalken, я не собираюсь содержимое урезать, я всего лишь хочу растянуть на несколько строк. Сообщение от mihalken блочное всплывающее построение это как? maximus2011, посмотрю. долго внедрять этот плагин? и такой момент: у меня некоторые селекты динамические, в зависимости от выбора к примеру страны, регионы грузятся с бд, посредством аякса. На прошлых моих стилизованных селектах, это все не работало. как убрал стили, сразу все запахало. На этом плагине возможны ошибки? 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.06.2014, 18:30	6
	Внедряется он быстро и просто, там все написано а ну да, если через аякс, вы тогда и инициализируйте плагин когда аякс вернул результат. тогда все будет работать 0

	09.06.2014, 08:10