Jump to content
TNG Community
fluffy82

display issue -SOLVED

Recommended Posts

fluffy82

Hi all,

I notice that in my "Kloosterman WordPress integration", the search form doesn't display well. I have tried it with several WP-themes (TwentySeven, TotalPress, Hemingway, Baskerville,...) but it always gives the same result. I have seen it on some other users' pages too, but not on all.

The issue is that the input field is put below the list rather than next to it. Also, the search/reset button, "show end of line" etc are displayed below the search fields, rather than next to them.

Pics in attachment.

The table which contains the fields is set at 100%. The div ("searchbox") which contains the table has no width set. When I set it to 100%, it indeed stretches out over the full width of the page, but still with the input field below the choice list etc

Any ideas how/why this is happening?

Thanks!
Tom

TNG search - buttons at the bottom.JPG

TNG search - missing buttons.JPG

TNG search - no width set.JPG

TNG search - full width.JPG

lisaandroger - how it should be.JPG

ourfamilyhistory - same problem.JPG

Share this post


Link to post
Share on other sites
cfj

I'm not an expert. but have you tried to remove  padding from table in your WP theme?

 

table tbody th, table tbody td {
    font-size: smaller;
    padding: 5px 4px;
}

I use a theme with Bootstrap

 

Screenshot-2018-4-9 Search by name.png

Share this post


Link to post
Share on other sites
fluffy82

Thanks for your try, but changing the padding has no influence on the screen...

Tom

Share this post


Link to post
Share on other sites
fluffy82

I don't know if it makes sense, but it looks like the desktop searchform uses the css that belongs to the mobile phone lay-out. Putting everything in a column rather than next to each other is something that happens on all pages when viewing on a smartphone...

Share this post


Link to post
Share on other sites
fluffy82

And I found a solution. I just changed the CSS to display the databack table as "-webkit-box". This already solves the horizontal alignment of the input fields.

.searchform .databack {
    display: -webkit-box;
}

I succeeded to put the block with the search and reset buttons that showed below to the right by adding a similar thing:

.searchsidebar {
    display: -webkit-box;
}

Now the only problem to solve, is to get the three parts of that 'block' to show one below the other in stead of next to each other :lol:

I'm starting to like programming :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×