@<Tim> here it is https://jsfiddle.net/8Lchpnfg/2/
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I@<Tim> so basically
II will provide you with the CSS for the table
I.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;
}
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;
}
<Ah nice, I will take a look at it in a second :)
Ithis is the CSS applied to the table itself
<what happens if you give the container that gets too big a max-height of e.g. 300px?
II tried doing overflow on this btw but maybe theres something up with the CSS that I'm just too dumb to realise?
Iit still goes up
Iit doesn't limit
II even tried to set the height itself to like 50px
Iit doesn't change
<wait is this element a table?
Iyes
<please share your html 
Isure
<then put the table in a wrapper container
I<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">
<!-- Lookup results will be inserted here dynamically -->
</tbody>
</table>
<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">
<!-- Lookup results will be inserted here dynamically -->
</tbody>
</table>
<because the table still needs to stay the same height
Itried that with a div
Iwith this class:
I.results {
max-height: 50px;
overflow-y: auto;
/* scrollbar-width: none;
-ms-overflow-style: none;
}
#results::-webkit-scrollbar {
display: none;
*/}
max-height: 50px;
overflow-y: auto;
/* scrollbar-width: none;
-ms-overflow-style: none;
}
#results::-webkit-scrollbar {
display: none;
*/}
<and?
Inothing
Iit still goes as big of a height as it wants
Ino idea whats up with that
<without the source code I can't help you much
<maybe you could provide me an html file or jsfiddle or similar where I can reproduce the problem?
Ilet me see
II will show you the MJS bit of code that I use from my backend to upload the generated bits of tbody?
IIbasically something like this
IresultsTbody is the one that is tagged as "results" in the html I sent you
Iand that is it
I@<Tim> you able to work out the problem?
<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?
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?
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
<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.
AI'm actualy Brave which is Chromium based
AWorks just fine too
AMust have missed something yeah
<oh great :)
I@<Tim> lets go dms?
Iu able to do that?
<no sorry. Please just send me a html file or fiddle or something like that where I can see your problem
II wanna avoid sharing the source code to multiple people if possible though
Ithis is around it :
<div class="overlay" id="ip-lookup-overlay">
<div class="top-bar-ip">
<div class="overlay" id="ip-lookup-overlay">
<div class="top-bar-ip">
Ilet me share the CSS
Ifor both of these things
I.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;
}
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.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 */
}
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 */
}
<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.