For everything that's not component based it's bullshit anyway. If you want to change the overall wh

A

Anox3D•3/20/24, 11:54 PM

You're depending from the library but you can't do everything

<<Tim>For everything that's not component based it's bullshit anyway. If you want to c...

A

Anox3D•3/20/24, 11:55 PM

Oh god

<

<Tim>OP•3/20/24, 11:55 PM

When a project uses tailwind I just write normal CSS and google the tailwind class name for every line

so much more complicated for writing as well. At least for me

A

Anox3D•3/20/24, 11:55 PM

Such a pain

A

Anox3D•3/20/24, 11:56 PM

Enough talking of (crappy) libraries

A

Anox3D•3/20/24, 11:56 PM

Good night

<

<Tim>OP•3/20/24, 11:57 PM

Good night ^^

A

Anox3D•3/21/24, 6:18 PM

@<Tim> here it is
https://jsfiddle.net/8Lchpnfg/2/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

I

ItsOkayBae•3/21/24, 8:25 PM

@<Tim> so basically

I

ItsOkayBae•3/21/24, 8:25 PM

I will provide you with the CSS for the table

I

ItsOkayBae•3/21/24, 8:25 PM

.styled-table {
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #C2B5A8;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
text-shadow: 0 0 8px rgba(191, 239, 221, 0.3);
font-family: Courier, monospace;
font-smoothing: antialiased;
color: #C2B5A8;
line-height:20px;
}

AAnox3D @<Tim> here it is https://jsfiddle.net/8Lchpnfg/2/

<

<Tim>OP•3/21/24, 8:25 PM

Ah nice, I will take a look at it in a second :)

I

ItsOkayBae•3/21/24, 8:26 PM

this is the CSS applied to the table itself

IItsOkayBae @<Tim> so basically

<

<Tim>OP•3/21/24, 8:26 PM

what happens if you give the container that gets too big a max-height of e.g. 300px?

I

ItsOkayBae•3/21/24, 8:26 PM

I tried doing overflow on this btw but maybe theres something up with the CSS that I'm just too dumb to realise?

<<Tim>what happens if you give the container that gets too big a max-height of e.g. 30...

I

ItsOkayBae•3/21/24, 8:26 PM

it still goes up

I

ItsOkayBae•3/21/24, 8:26 PM

it doesn't limit

I

ItsOkayBae•3/21/24, 8:26 PM

I even tried to set the height itself to like 50px

I

ItsOkayBae•3/21/24, 8:26 PM

it doesn't change

<

<Tim>OP•3/21/24, 8:26 PM

wait is this element a table?

I

ItsOkayBae•3/21/24, 8:27 PM

yes

<

<Tim>OP•3/21/24, 8:27 PM

please share your html

I

ItsOkayBae•3/21/24, 8:27 PM

sure

<

<Tim>OP•3/21/24, 8:27 PM

then put the table in a wrapper container

I

ItsOkayBae•3/21/24, 8:27 PM

<table class="styled-table results">
<tr>
<td><strong>IP</strong></td>
<td><strong>Country</strong></td>
<td><strong>Region</strong></td>
<td><strong>City</strong></td>
<td><strong>Coordinates</strong></td>
<td><strong>ISP</strong></td>
<td><strong>Phone</strong></td>
<td><strong>Proxy</strong></td>
<td><strong>Hosting</strong></td>
</tr>
<tbody class="results" id="results">

</tbody>
</table>

<

<Tim>OP•3/21/24, 8:27 PM

because the table still needs to stay the same height

<<Tim>then put the table in a wrapper container

I

ItsOkayBae•3/21/24, 8:27 PM

tried that with a div

I

ItsOkayBae•3/21/24, 8:27 PM

with this class:

I

ItsOkayBae•3/21/24, 8:27 PM

.results {
max-height: 50px;
overflow-y: auto;
/* scrollbar-width: none;
-ms-overflow-style: none;
}
#results::-webkit-scrollbar {
display: none;
*/}

<

<Tim>OP•3/21/24, 8:28 PM

and?

I

ItsOkayBae•3/21/24, 8:28 PM

nothing

I

ItsOkayBae•3/21/24, 8:28 PM

it still goes as big of a height as it wants

I

ItsOkayBae•3/21/24, 8:28 PM

no idea whats up with that

<

<Tim>OP•3/21/24, 8:29 PM

without the source code I can't help you much

<

<Tim>OP•3/21/24, 8:29 PM

maybe you could provide me an html file or jsfiddle or similar where I can reproduce the problem?

I

ItsOkayBae•3/21/24, 8:30 PM

let me see

I

ItsOkayBae•3/21/24, 8:31 PM

I will show you the MJS bit of code that I use from my backend to upload the generated bits of tbody?

I

ItsOkayBae•3/21/24, 8:32 PM

if (data.success) {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                <!--<td>${data.data.query}</td>-->
                <td>${ip}</td>
                <td>${data.data.country} (${data.data.countryCode})</td>
                <td>${data.data.regionName} (${data.data.region})</td>
                <td>${data.data.city} (${data.data.zip})</td>
                <td>LAT ${data.data.lat} LON ${data.data.lon}</td>
                <td>${data.data.isp}</td>
                <td>${data.data.mobile}</td>
                <td>${data.data.proxy}</td>
                <td>${data.data.hosting}</td>
                `;
                resultsTbody.appendChild(newRow);
                //resultsTbody.innerHTML = newRow;
            }

if (data.success) {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                <!--<td>${data.data.query}</td>-->
                <td>${ip}</td>
                <td>${data.data.country} (${data.data.countryCode})</td>
                <td>${data.data.regionName} (${data.data.region})</td>
                <td>${data.data.city} (${data.data.zip})</td>
                <td>LAT ${data.data.lat} LON ${data.data.lon}</td>
                <td>${data.data.isp}</td>
                <td>${data.data.mobile}</td>
                <td>${data.data.proxy}</td>
                <td>${data.data.hosting}</td>
                `;
                resultsTbody.appendChild(newRow);
                //resultsTbody.innerHTML = newRow;
            }

if (data.success) {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                <!--<td>${data.data.query}</td>-->
                <td>${ip}</td>
                <td>${data.data.country} (${data.data.countryCode})</td>
                <td>${data.data.regionName} (${data.data.region})</td>
                <td>${data.data.city} (${data.data.zip})</td>
                <td>LAT ${data.data.lat} LON ${data.data.lon}</td>
                <td>${data.data.isp}</td>
                <td>${data.data.mobile}</td>
                <td>${data.data.proxy}</td>
                <td>${data.data.hosting}</td>
                `;
                resultsTbody.appendChild(newRow);
                //resultsTbody.innerHTML = newRow;
            }

if (data.success) {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                <!--<td>${data.data.query}</td>-->
                <td>${ip}</td>
                <td>${data.data.country} (${data.data.countryCode})</td>
                <td>${data.data.regionName} (${data.data.region})</td>
                <td>${data.data.city} (${data.data.zip})</td>
                <td>LAT ${data.data.lat} LON ${data.data.lon}</td>
                <td>${data.data.isp}</td>
                <td>${data.data.mobile}</td>
                <td>${data.data.proxy}</td>
                <td>${data.data.hosting}</td>
                `;
                resultsTbody.appendChild(newRow);
                //resultsTbody.innerHTML = newRow;
            }

I

ItsOkayBae•3/21/24, 8:33 PM

basically something like this

I

ItsOkayBae•3/21/24, 8:33 PM

resultsTbody is the one that is tagged as "results" in the html I sent you

I

ItsOkayBae•3/21/24, 8:33 PM

and that is it

I

ItsOkayBae•3/21/24, 8:35 PM

@<Tim> you able to work out the problem?

AAnox3D @<Tim> here it is https://jsfiddle.net/8Lchpnfg/2/

<

<Tim>OP•3/21/24, 8:38 PM

I just tried it out with my last approach and for me it works fine, even with the absolute positioning

https://jsfiddle.net/timlg07/9fe50rju/

Maybe you missed something when transferring it to your code? Or it's only in some browsers... which one are you using?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

IItsOkayBae @<Tim> you able to work out the problem?

<

<Tim>OP•3/21/24, 8:40 PM

I would need more of the source code (no matter how it gets generated, but only the resulting HTML, like it's shown in the inspector of your browser). It's not really important what's in the table, it depends on what's around it as well.

<<Tim>I just tried it out with my last approach and for me it works fine, even with th...

A

Anox3D•3/21/24, 8:41 PM

I'm actualy Brave which is Chromium based

A

Anox3D•3/21/24, 8:41 PM

Works just fine too

A

Anox3D•3/21/24, 8:41 PM

Must have missed something yeah

<

<Tim>OP•3/21/24, 8:41 PM

oh great :)

I

ItsOkayBae•3/21/24, 8:41 PM

@<Tim> lets go dms?

I

ItsOkayBae•3/21/24, 8:41 PM

u able to do that?