我该如何解决这个CSS骇客问题？

Question

I am using Bootstrap3.0 for my site.

My requirement is as:-

1. You open the site
2. You select Audiotorium
3. Based on Auditorium selected, seal layout is drawn using jQuery

Now suppose, you Selected Auditorium-A, it has 25 seats

• 15 seats in first row
• 7 seats in second row
• 3 seats in third row

In CSS, I have given each column in row width of 100px, looking the above layout configuration using jQuery I set a width of 100*15(1500px) to the container.

HTML

<div class="col-lg-12>
 <ul id="seatsContainer">
 </ul>
</div>

jQuery

  $('#seatsContainer').append('<li style='position:absoulte;left:'+colIndex * 100px> SeatNumber</li>');

Since, I am using position:absolute for the child li , I need to set the height & width of the container explicity So I do that.

$('#seatContainer').css('width',(maxCols*100)+"px");

But it renders as desired on md,lg devices,but when I view the same on xs or sm devices, the overflow width is hidden.

My Question is how should a horizontal scrollbar to be rendered in case of smaller resoultion.

Settings in css

html,body
{
 overflow:auto;
}

Like the redbus site,if I select the bus,look for seats & if I minimize the screen a horizontal scrollbar comes.

https://www.redbus.in/Booking/SelectBus.aspx?fromCityId=130&toCityId=122&doj=12-Jan-2016&busType=Any&opId=0

FYI:- I am using "container-fluid" on the root element

Here is my JSON:-

 {
"SeatDetails": [{
    "seatId": 1021,
    "seatNumber": "A1",
    "rowIndex": 1,
    "colIndex": 1
}, {
    "seatId": 1022,
    "seatNumber": "A2",
    "rowIndex": 1,
    "colIndex": 2
}, {
    "seatId": 1023,
    "seatNumber": "A3",
    "rowIndex": 1,
    "colIndex": 3
}, {
    "seatId": 1024,
    "seatNumber": "A4",
    "rowIndex": 1,
    "colIndex": 4
}, {
    "seatId": 1025,
    "seatNumber": "A5",
    "seatPrice": 105,
    "rowIndex": 1,
    "colIndex": 5
}, {
    "seatId": 1026,
    "seatNumber": "B1",
    "rowIndex": 2,
    "colIndex": 1
}, {
    "seatId": 1027,
    "seatNumber": "B2",
    "rowIndex": 2,
    "colIndex": 2
}, {
    "seatId": 1028,
    "seatNumber": "B3",
    "rowIndex": 2,
    "colIndex": 3
}, {
    "seatId": 1029,
    "seatNumber": "B4",
    "rowIndex": 2,
    "colIndex": 4
}, {
    "seatId": 1030,
    "seatNumber": "B5",
    "rowIndex": 2,
    "colIndex": 5
}, {
    "seatId": 1031,
    "seatNumber": "C1",
    "rowIndex": 3,
    "colIndex": 1
}, {
    "seatId": 1051,
    "seatNumber": "C2",
    "rowIndex": 3,
    "colIndex": 2
}, {
    "seatId": 1032,
    "seatNumber": "C3",
    "rowIndex": 3,
    "colIndex": 5
}, {
    "seatId": 1033,
    "seatNumber": "C4",
    "rowIndex": 3,
    "colIndex": 6
}, {
    "seatId": 1034,
    "seatNumber": "C5",
    "rowIndex": 3,
    "colIndex": 8
}]
}

Answer 1

If you're using the bootstrap framework you should use the responsiveness functionality, however, referring to your comments I see you don't want the responsiveness. In that case, don't use the container or the columns bootstrap provides.

<div class="seatsWrapper">
    <ul class="seatsContainer r1">
        <li>A1</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
        <li>A5</li>
        <li>A6</li>
        <li>A7</li>
        <li>A8</li>
        <li>A9</li>
        <li>A10</li>
        <li>A11</li>
        <li>A12</li>
        <li>A13</li>
        <li>A14</li>
        <li>A15</li>
    </ul>       
    <ul class="seatsContainer r2">
        <li>B1</li>
        <li>B2</li>
        <li>B3</li>
        <li>B4</li>
        <li>B5</li>
        <li>B6</li>
        <li>B7</li>
    </ul>
    <ul class="seatsContainer r3">
        <li>C1</li>
        <li>C2</li>
        <li>C3</li>
    </ul>
</div>

And css

.seatsWrapper {
    overflow-x: scroll;
    min-width: 1500px;
}
ul.seatsContainer {
    list-style-type: none;
    clear: both;
    overflow-x: none;
}
ul.seatsContainer li {
    float: left;
    width: 100px;
    height: 100px;
}
ul.seatsContainer.r1 {
    color: blue;
}
ul.seatsContainer.r2 {
    color: red;
}
ul.seatsContainer.r3 {
    color: green;
}

I have added the classes .r1 .r2 .r3 to give you an example of better accessing the elements.

UPDATE

Based on your JSON add the data like this

var data = JSON.parse('{"SeatDetails": [{ "seatId": 1021, "seatNumber": "A1", "rowIndex": 1, "colIndex": 1 }, { "seatId": 1022, "seatNumber": "A2", "rowIndex": 1, "colIndex": 2 }, { "seatId": 1023, "seatNumber": "A3", "rowIndex": 1, "colIndex": 3 }, { "seatId": 1024, "seatNumber": "A4", "rowIndex": 1, "colIndex": 4 }, { "seatId": 1025, "seatNumber": "A5", "seatPrice": 105, "rowIndex": 1, "colIndex": 5 }, { "seatId": 1026, "seatNumber": "B1", "rowIndex": 2, "colIndex": 1 }, { "seatId": 1027, "seatNumber": "B2", "rowIndex": 2, "colIndex": 2 }, { "seatId": 1028, "seatNumber": "B3", "rowIndex": 2, "colIndex": 3 }, { "seatId": 1029, "seatNumber": "B4", "rowIndex": 2, "colIndex": 4 }, { "seatId": 1030, "seatNumber": "B5", "rowIndex": 2, "colIndex": 5 }, { "seatId": 1031, "seatNumber": "C1", "rowIndex": 3, "colIndex": 1 }, { "seatId": 1051, "seatNumber": "C2", "rowIndex": 3, "colIndex": 2 }, { "seatId": 1032, "seatNumber": "C3", "rowIndex": 3, "colIndex": 5 }, { "seatId": 1033, "seatNumber": "C4", "rowIndex": 3, "colIndex": 6 }, { "seatId": 1034, "seatNumber": "C5", "rowIndex": 3, "colIndex": 8 }] }')

$.each(data.SeatDetails, function(k, v) {
    $('ul.seatsContainer.r'+v.rowIndex).append('<li>'+v.seatNumber+'</li>')
})

In the case of adding data via json array, start with empty ul elements