BSS adding a div in table setup

[jo-r]

I’m having a heck of a time getting a table to sort (I “think” I have it worked out now, we’ll see). I want this to happen without having to use a Custom Code block, but for some reason it will not function as straight code, but works great if I put the table itself into a Custom Code block. So I was looking at the code via Google “view source” option and here’s some screenshots of what BSS is doing.

As you can see I have the table with the settings needed, and most especially the ID needed on the Table tag line.
What is happening is it’s adding another Div just before the Table tag and putting the settings inside that Div instead. I can’t make any heads or tales of why it’s doing this. Truly if all of these tags were not locked this would be so much easier, but either way it shouldn’t be doing this I don’t think.

Also I just checked, just so it’s clear, this does not happen if I put it into custom code. The blocks are identical whether custom code or straight component tags, but BSS is changing them when not in Custom Code.

[martin]

Thank you for the screenshots! This is by design - tables in bootstrap need to be wrapped in a div to be responsive (docs).

We keep the table wrapped in a div even if its responsiveness is switched off so that the HTML is consistent and any custom classes that you’ve applied stay in place. This shouldn’t be a problem in most cases.

[jo-r]

But it is a problem because it’s actually taking classes from the table and adding them to the div, it should not be doing that ever. I can see your point on adding a div, but definitely it should just add the div not take classes or id’s from other parts of the component.

In this case, the ID added is part of the functionality of the table (or so they say hahaha). I’m assuming though, that that is why it’s working in the Custom Code and not in the straight code.

[kuligaposten]

If you add the id to the table and not to the div then your sort function will work

<div class="table-responsive">
	<table class="table table-hover" id="YOUR-ID-HERE">
		<thead>
			<tr>
				<th>...</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>...</td>
			</tr>
		</tbody>
	</table>
</div>

[jo-r]

Therein lies my point @kuligaposten, if you look at the screenshot that shows the Overview that is exactly where I’m putting the ID, but that’s not where it’s putting it if you check the HTML window. In other words, when I am selecting the Table, it’s showing the Div selected, not the table and putting the attributes etc. into the div instead of the table.

[richards]

Just select the actual table (in the html tab) to add the id

[kuligaposten]

in the html window you click the div so it show the table for you there on the table you add your id

[jo-r]

Thank you, not sure why I didn’t think of that, but I have been so frustrated with it that I missed that lol. Thanks for that tip, but … it still should not highlight the wrong thing when you click the table in the Overview pane, makes no sense to select the Div instead.

And in the end I still can’t figure out why it won’t work LOL. I’ll puzzle it for a while yet, it’s probably just another thing I’m overlooking. I’ll pop back in if I can’t get it lol Or I’ll just use the custom code and call it good. Works at least that way.

[michalbialkowski]

Oh yeah, I often edit table in the DOM tree in BSS.
Not sure why, but there is always a margin under the table element in Bootstrap CSS
(shouldn’t it be under .table-responsive if it’s a container?)

[kuligaposten]

@jo-r

your component is online look for sortTable for jo-r