search form css

[fluffy82]

I have the weirdest thing... Two identical css descriptions, but yet a totally different result.
I located the problem area, but I don't know how to solve it...

In attachment, you can see two pages: the normal search page, and the family search page. Their construction is identical, except the actual content of the form of course. Yet in one the input fields are nicely aligned with the rest, while in the other they jump a line.

Both pages are divided into 2 parts: the input div on the left, and the sidebar with buttons on the right. On both pages the left div is set to be 60% of the total width, the right div 40%.
On both pages these two divs are grouped in a div called "search" on one page and "famsearch" on the other, both without fixed width, both have display set as inline-flex. Identical.

And that's where the problem is. The search div on one page is (on my computer) about 1300px wide, while the famsearch div is only about 875px wide. This compresses the two divs inside (60% of 875 is less wide than 60% of 1300), and makes the input fields jump down to fit.
The divs do not take up the whole width of the screen. When I force the width of famsearch to for example 60%, it shows something which is more or less correct on my screen. But I don't want to do that, as on other screens it might need more than 60% to show correctly.
I don't want to set both to 100% either. That will solve the problem of visibility on different sized screens and make them look the same, but it stretches the page too much and I don't like it. I prefer when it is a little more compact, like the search page is now. Getting larger or smaller automatically to fulfill the needs, no fixed width.

In short: why is the famsearch div acting differently than the search div, and how do I force them to do the same?

As far as I know, the code is still original, none of my mods change the searchform.php or famsearchform.php files. In case that's important to know.
There is also no css rules being "handed over" from higher up the hierarchy. From the search and famsearch div upwards, both pages are identical.

[Ken Roy]

Report the problem to Darrin.  This is a user to user support forum

[fluffy82]

11 minutes ago, Ken Roy said:

Report the problem to Darrin.  This is a user to user support forum

It's not a general TNG problem, it looks ok on the demo sites. This is something occuring in my configuration - probably due to the fact that I'm working in a WordPress environment. Which is why I am asking the input of other users who also use WordPress and might have noticed this issue.

[theKiwi]

On my testing site, which is running some version of WordPress alpha (WordPress 5.4.3-alpha-48366) and TNG 31 RC1, integrated with the TNG WordPress plugin, I see this - seems normal to me.

[Website Example URL Removed as Website is Defunct]

Roger

Edited December 30, 2023 by theKiwi
[Website Example URL Removed as Website is Defunct]

[fluffy82]

50 minutes ago, theKiwi said:

On my testing site, which is running some version of WordPress alpha (WordPress 5.4.3-alpha-48366) and TNG 31 RC1, integrated with the TNG WordPress plugin, I see this - seems normal to me.

Yeah, it's bizarre... I've seen both in other people's sites, but it's always consistent.

This one and this one have a break on both pages.

This one and this one have no breaks on neither of the pages.

My riddle is why I have a break on one page and not the other, while the css is identical for both...

[RickM]

I have similar issues on my site.. As I also use WP I believe that some of the themes css over rides TNGs css.. It makes it hard sometimes to track down.. I haven't got to this actual issue in my upgrade path as yet, when I do I will try to remember to post the solution IF I do find it..

 

[fluffy82]

10 minutes ago, RickM said:

I have similar issues on my site.. As I also use WP I believe that some of the themes css over rides TNGs css.. It makes it hard sometimes to track down.. I haven't got to this actual issue in my upgrade path as yet, when I do I will try to remember to post the solution IF I do find it..

 

I actually don't use the TNG css. I emptied the genstyle.css file, which made all my tables, buttons, headlines,... take on the styling of my wordpress. I then went through every page to see where things went wrong (in most cases due to a TNG-specific css rule) and added the missing rules to my taste in the WP customizer.

That's also how I'm absolutely certain both pages have the same css rules: I wrote them

 

I'm quite sure the problem lies with the search/famsearch divs. The divs inside (searchformbox and searchsidebar) are calculated with a percentage of the parent. When I force the famsearch div to have the same width as the search div, it displays perfectly. I just need to find out how the search div calculates its width, and have famsearch do that as well. To avoid using 100% width for the reasons mentioned earlier.

[RickM]

1 hour ago, fluffy82 said:

I actually don't use the TNG css. I emptied the genstyle.css file, which made all my tables, buttons, headlines,... take on the styling of my wordpress. I then went through every page to see where things went wrong (in most cases due to a TNG-specific css rule) and added the missing rules to my taste in the WP customizer.

That's also how I'm absolutely certain both pages have the same css rules: I wrote them

Wow, very cool you did that.. I read somewhere someone else did that, and thought, shite that must of caused a few headyaches..

Looking at your site, which I do like the overall look and feel of, it seems that there is no padding/margins around either the <body> or first main <div> container.

I added .width: 95%; .margin: 0 auto; to the <body> and .padding: 0 20px; to the <div> I attach before and after as seen on my laptop 15" with resolution 1920x1080. Kinda makes it look a little/lot better IMHO.. And please I do not mean any disrespect..

Site Before

Site After

You set  .wide #page { max-width: 100%;} for this first main <div> container.. I wonder if the calculation comes from this??

If you would allow me login rights (create a User:Temp) and send me login and password.. I can have a play and see if I can work it out..

 

[fluffy82]

I totally agree with you about the padding/width, it didn't look very nice...

The theme actually gives only two options: "full width", or "boxed layout". The full width is set at 100% and the boxed layout is literally a box seemingly floating in the middle of your screen, but on my 3840px wide monitor, that looked ridiculous (taking up only about 20% of the screen in the middle, and all the rest in the grey background). I've set the width to 85% now, to get a bit of those "sidebars". They do look nice indeed

I did have to fiddle a bit to show them on computer screens, but not in mobile mode. But I think I succeeded 😄

Changing that outer div width did not change my problem on the search pages though.

I'll send you a pm with a login and password in a PM.

[RickM]

Hey Fluffy

Think we have the answer

 

Try adding the below bold underlined to the below class..

.form[name="famsearch"] {
    display: inline-flex;
    width: 100%;
}

 

[fluffy82]

2 minutes ago, RickM said:

Hey Fluffy

Think we have the answer

 

Try adding the below bold underlined to the below class..

.form[name="famsearch"] {
    display: inline-flex;
    width: 100%;
}

 

Thanks for that, but no...

I mentioned that as a possible solution above, but it's a solution I don't like. Making it 100% wide makes it, obviously, use the full width of the screen. On my monitor, that means there's a big white gap in between. I am looking for a way to have it balanced, like the search form. [see attachments]

It can be solved on my screen by putting a defined width, but then it won't look ok anymore on screens with a different dimention. If I set famsearch to 68%, it's about  right on my 4K screen. But on a 1080p screen, for example, it needs to be 81~82% to be correct, and 100% on an iPad in landscape format. I don't really feel like testing every possible screen width and write separate rules for each of them with a different width...

Clearly, the width of .form[name="search"] is flexible, it's automatic somehow. And I want to have the width of .form[name="famsearch"] the same... I'm just at a loss why the automatic width in both is different, as the css and the above laying divs etc are identical. They should be behaving the same.

The one thing I can try to see if that works, is change "famsearch" into "search". It's only a form name, changing it will not affect the action I think.

[fluffy82]

4 minutes ago, fluffy82 said:

The one thing I can try to see if that works, is change "famsearch" into "search". It's only a form name, changing it will not affect the action I think.

Ok, that won't work. The name is actually extensively used so I can't change it.

[RickM]

I missed that bit then, I guess then you could use @media styling to suit various screen widths.. I am not too great with them I could have a play about

 

[fluffy82]

I just found a brilliant solution, if I may say that about myself...

There's two facts:

- the div "wants" to be too small when left alone
- I know it needs to be 68% to be ok, and the smaller the screen gets, the higher the percentage

Combining these, result in:

.form[name="famsearch"] {
    display: inline-flex;
    min-width: 68%;
}

That will probably not be ok for monitors larger than mine, but that is not an issue as those are quite rare anyway (lol).

[fluffy82]

Not as brilliant as I thought, going to a smaller screen than mine, needing eg a 80% width, it will still use the 68%.

Back to the drawing board lol

[RickM]

How about trying

.form[name="famsearch"] {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;

}

and remove the

display: inline-block

from both

.searchsidebar

and

.searchformbox

 

You would then need to style to suit mobile.

 

Working with this, I am getting very confused, there MUST be some other css or method of calculating size for these pages.. I will continue to play on my laptop, but will bring out my larger screen to maybe see if that will help me with the confusion..

Sorry, I thought I would be more help..

Edited September 26, 2020 by RickM

[fluffy82]

11 hours ago, RickM said:

How about trying

.form[name="famsearch"] {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;

}

and remove the

display: inline-block

from both

.searchsidebar

and

.searchformbox

Hmmm, I'll try that later today. My guess is that by removing the inline-block in the searchformbox, the three elements in each row (title, dropdown, input) won't line up but will display one below the other. Having some 504 server timeout problems now though so I can't look at it right away... *sigh*

[fluffy82]

This is weird...

I've been having 504 errors all night and all day, so I contacted my provider. They looked at it, they don't know what's wrong, but they solved it by downgrading and upgrading the PHP version. They said there was a problem with the cache, but they couldn't figure out what the problem was.

My website is back online now and... The famsearch page works as it should... No need to modify it anymore 😀

[RickM]

Well, I'll be . Caching is a bastard sometimes.

 

Pleased it is solved..