Horizontal jquery sortable list, placeholder width is incorrect in IE11 when scroll is visible

问题

I have a horizontal list which I am trying to sort using jqueryui sortable.

As long as all items fits the window it works perfectly. But when I have many items, so that the scrollbar appear the placeholder width is to small. Or actually when I inspect the placeholder in IE developer tools the width is set to the correct value but it is still displayed as just a thin line.

I have noticed that adding padding to the placeholder style can make it wider, but why can't I use the width? What I really want is for the placeholder to get the width of the item without needing to specifying it in the placeholder class, which it does when the scrollbar is not needed.

So my question is why isn't the placeholder shown with the correct width in IE (It seems to work in Chrome)? And what can I do to fix it?

Edit: I noticed that min-width works can it have to do with how inline-flex works in IE?

Thanks in advance!

$("#list").sortable({
		items: "> li",
		opacity: 0.8,
		placeholder: "lm-placeholder",
		tolerance: "pointer",
		helper: "original",
		revert: true,
		axis: "x",
		start: function (event, ui) {
			var index = ($(ui.item).index());
		}
	});

.container {
	width: 500px;
}

.listContainer {
	overflow-x: auto;
}

.list {
	list-style-type: none;
	display: inline-flex;
	background-color: antiquewhite;
}

.item {
	padding: 2px;
}

.card {
	width: 100px;
	height: 100px;
	background-color: white;
	border: 1px solid #666666;
}

.lm-placeholder {
	border: 3px dashed #bdbdbd;
	width: 100px;
	background-color: #078cd9;
	/*padding-left: 20px;
	padding-right: 20px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<body>
<div id="content" class="container">
		<div class="listContainer">
			<ul id="list" class="list">
				<li class="item"><div class="card">1</div></li>
				<li class="item"><div class="card">2</div></li>
				<li class="item"><div class="card">3</div></li>
				<li class="item"><div class="card">4</div></li>
				<li class="item"><div class="card">5</div></li>
				<li class="item"><div class="card">6</div></li>
				<li class="item"><div class="card">7</div></li>
			</ul>
		</div>
	</div>
</body>

回答1:

This works for me

.placeholder {
  display: inline-block;
  width: 30px;
  height: 20px;
  border: 1px solid yellow;
  background-color: orange;
}

回答2:

$("#list").sortable({
        items: "> li",
        opacity: 0.8,
        placeholder: "lm-placeholder",
        tolerance: "pointer",
        helper: "original",
        revert: true,
        axis: "x",
        start: function (event, ui) {
            $(".placeholder").css('width',jQuery(ui['item']).css('width'));
            var index = ($(ui.item).index());
        }
    });

来源：https://stackoverflow.com/questions/28676818/horizontal-jquery-sortable-list-placeholder-width-is-incorrect-in-ie11-when-scr

标签

internet-explorer

jquery-ui-sortable