@<Tim> so basically - Program Dream

I

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

I will provide you with the CSS for the table

I

ItsOkayBaeOP•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>•3/21/24, 8:25 PM

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

I

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

this is the CSS applied to the table itself

IItsOkayBae @<Tim> so basically

<

<Tim>•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

ItsOkayBaeOP•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

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

it still goes up

I

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

it doesn't limit

I

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

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

I

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

it doesn't change

<

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

wait is this element a table?

I

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

yes

<

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

please share your html

I

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

sure

<

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

then put the table in a wrapper container

I

ItsOkayBaeOP•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>•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

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

tried that with a div

I

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

with this class:

I

ItsOkayBaeOP•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>•3/21/24, 8:28 PM

and?

I

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

nothing

I

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

it still goes as big of a height as it wants

I

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

no idea whats up with that

<

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

without the source code I can't help you much

<

<Tim>•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

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

let me see

I

ItsOkayBaeOP•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

ItsOkayBaeOP•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

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

basically something like this

I

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

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

I

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

and that is it

I

ItsOkayBaeOP•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>•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>•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>•3/21/24, 8:41 PM

oh great :)

I

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

@<Tim> lets go dms?

I

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

u able to do that?

<

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

no sorry. Please just send me a html file or fiddle or something like that where I can see your problem

I

ItsOkayBaeOP•3/21/24, 8:42 PM

I wanna avoid sharing the source code to multiple people if possible though

I

ItsOkayBaeOP•3/21/24, 8:43 PM

this is around it :
<div class="overlay" id="ip-lookup-overlay">
<div class="top-bar-ip">

I

ItsOkayBaeOP•3/21/24, 8:43 PM

let me share the CSS

I

ItsOkayBaeOP•3/21/24, 8:43 PM

for both of these things

I

ItsOkayBaeOP•3/21/24, 8:44 PM

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent black /
backdrop-filter: blur(1.5rem); / Gaussian blur effect /
-webkit-backdrop-filter: blur(1.5rem);
display: none; / Initially hidden */
z-index: 9999;
}

I

ItsOkayBaeOP•3/21/24, 8:44 PM

.top-bar-ip {
background-color: rgba(255, 255, 255, 0.3); /* Transparent white color /
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
border-radius: 20px; / Rounded corners /
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / Optional: Add shadow for better visibility /
z-index: 10000; / Ensure it's on top of other elements */
}

<

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

only the html? everyone using you app sees that anyways. But you can send me the source code in a DM as well if that's better for you.

<

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

but please use files or at least code blocks