CODEWITHSUNDEEP
csshtmlhtml-select
stackoverflow
stackoverflow

Reputation: 73

Multi-Selection horizontal

I'm trying to build a multi-selection like that:

It looks like that at the moment: JSFiddle Demo

* {
    box-sizing: border-box;
}
#data {
    overflow:hidden;
    padding:0;
	width:100vw;
}
select {
	padding:0;
	padding-left:1px;
	border:none;
	background-color:#eee;
	width:100vw;
}
option {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
	display:inline-block;
}
<form>
    <div id="data">
		<select multiple size="1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
    		<option>5</option>
			<option>6</option>
    		<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
		</select>
	</div>
</form>

The only thing missing now is the line break.

I hope you can help! :)

Upvotes: 7

Views: 8475

Answers (3)

dennisjsk
dennisjsk

Reputation: 401

Hi the following changes should do the trick

Remove overflow:hidden; from #data

add overflow:visible; to select

and add float:left; to option.

Upvotes: 2

Joeytje50
Joeytje50

Reputation: 19112

You can just use the normal way of inserting line breaks in text. For <select> tags, the white-space style is changed to nowrap by default, so all you need to do is change it back to normal:

* {
    box-sizing: border-box;
}
#data {
    overflow:hidden;
    padding:0;
	width:100vw;
}
select {
	padding:0;
	padding-left:1px;
	border:none;
	background-color:#eee;
	width:100vw;
	white-space: normal;
	height:200px;
}
option {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
	display:inline-block;
}
<form>
<div id="data">
	<select multiple size="1">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
		<option>10</option>
		<option>11</option>
		<option>12</option>
	</select>
</div>

</form>

Upvotes: 5

Joe Sager
Joe Sager

Reputation: 787

Add this to select

height:200px;

And add this to option:

float: left;

Fiddle: http://jsfiddle.net/6hotLutu/2/

Upvotes: 1

Related Questions