Need a CSS help! Its a tricky problem!

Guys I think I need a CSS related help!

I am not a coder though, just know very basics of CSS, I mean, I can copy and paste the online code, and try to mimic, that's all, pity me.

Now I am facing a problem, please check this test URL:


As you can see, this is a database search function, and you already see that blank square below! Its useless now, I want to think a way to hide it, I tried the code:


It worked! BUT!

If I do this, the search result border will also disappear, which is very ugly! Like this!



In normal, we want the search result pretty, it SHOULD have this border! (you can input "terry" to check the search result too), like this:



So as you can see, it is beatiful now.

So is this CSS style problem possible to solve? I mean, I want that empty border disappear before I hit search, BUT, the border should exisit when a search result showed, for asthetic purpose.

Yes I can change theme to white one, but I may use some colorful themes, this border will always show that ugly border.

Anyone know how to solve this tricky problem? Is it possible?

Only show the table if there is content to display seems like an easy solution?

4440 said:

Code:

.pdb-list table:not(:has(.vip_name)) td {

borde: none;

}

Click to expand...

Good solution, just take an eye at the syntax for the css property, its missing an r in the border: attribute if you copy-paste it.

4440 said:

Code:

.pdb-list table:not(:has(.vip_name)) td {

borde: none;

}

Click to expand...

WTF! God damn it! It works!

Are you a magician man?! Fxxk, what is this shit called?!

Why there is no clues online? I mean, I only know search some very basics on W3school and mimic those lines, maybe your combo is more advanced one, could you explain it a bit?

Thanks so much man, kudos!

CounterMind said:

Good solution, just take an eye at the syntax for the css property, its missing an r in the border: attribute if you copy-paste it.

Click to expand...

Yeah I added that, it works like a charm, I just can't believe it, so magical. I don't see these rules on W3school, I know it is just a basic reference site.

Thank guys, I am glad you guys are here to help!

taboulijaboulie said:

Only show the table if there is content to display seems like an easy solution?

Click to expand...

I dunno much CSS though, so no idea how to achieve that, gladly, 4440's code snippet works for me! Thanks for the tip anyway.

terrycody said:

WTF! God damn it! It works!

Are you a magician man?! Fxxk, what is this shit called?!

Why there is no clues online? I mean, I only know search some very basics on W3school and mimic those lines, maybe your combo is more advanced one, could you explain it a bit?

Thanks so much man, kudos!




Yeah I added that, it works like a charm, I just can't believe it, so magical. I don't see these rules on W3school, I know it is just a basic reference site.

Thank guys, I am glad you guys are here to help!

Click to expand...

Look at CSS pseudo selector classes to learn about structuring and use of :not and :has conditional statements, they can be used to achieve hiding and showing certain elements in some cases where html output is unfiltered and poorly attributed with classes or IDs, they are a little more advanced approach to css scripting.

terrycody said:

I dunno much CSS though, so no idea how to achieve that, gladly, 4440's code snippet works for me! Thanks for the tip anyway.

Click to expand...

Showing the table only when there are results to be querried inside of it, is not something you can do with CSS but rather with backend functionality language ur using, i assume its PHP in your case. So before you output the entire table, you would need to make a conditional statement in PHP to display it only if there are results in the search querry to be retrieved from your DB and then outputted inside the table.

Glad it helps.

Thanks for @CounterMind for pointing out the border typo.

The CSS is self-explanatory.

When the table inside your .pdb-list div
does not
contains a child that has the .vip_name class name
make the td border none

Thanks again guys, really appreciated! Its much quicker to ask for a help than from the plugin author lol.