Position Search Box right & bottom & floating in prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Position Search Box right & bottom & floating in prosilver

Post by Arclon » Fri Jul 19, 2019 7:28 am

Hello,
I'm trying to change position of Search box in Prosilver to be positioned bottom & right & floats (maintain it's position) when scaling down to smaller displays.
Przechwytywanie.PNG
Przechwytywanie.PNG (9.93 KiB) Viewed 1197 times
I'm trying to play with position:absolute; bottom:0; but this brings the field down of the page :o even if I though it's inside "inner" div.

Can anybody advise me how to solve it?

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21723
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: Position Search Box right & bottom & floating in prosilver

Post by Mick » Fri Jul 19, 2019 8:25 am

Navbar Search may be an easier solution for you.
"The more connected we get the more alone we become" - Kyle Broflovski

Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon » Fri Jul 19, 2019 8:32 am

Yes. I know it. But I'm trying. It's also interesting for me because I'm learning a lot with it.

User avatar
pit-PL
Registered User
Posts: 3086
Joined: Sat Nov 21, 2009 12:24 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by pit-PL » Fri Jul 19, 2019 10:03 am

https://github.com/phpbb/phpbb/blob/mas ... #L374#L378
Just increase 30px to around 130px or another value that suits you.

Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon » Fri Jul 19, 2019 12:09 pm

Thx. This I know - problem with it begins when You want to display on smaller displays. In some cases this settings doubles the hight of navbar.

User avatar
pit-PL
Registered User
Posts: 3086
Joined: Sat Nov 21, 2009 12:24 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by pit-PL » Fri Jul 19, 2019 12:37 pm

Use media queries in responsive.css to apply different height for different devices.

User avatar
Talk19Zehn
Registered User
Posts: 413
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Position Search Box right & bottom & floating in prosilver

Post by Talk19Zehn » Fri Jul 19, 2019 12:45 pm

Hello, correctly - or test perhaps this way: TEST, TEST (custom.css(!)
original: common.css

Code: Select all

.site-description {
     float: none;
     width: auto;
}
... and possibly even the margin-top to: 30px to 20px ???
original: forms.css

Code: Select all

.search header {
     border-radius: 4px;
     display: block;
     float: right;
     margin-right: 5px;
     margin-top: 20px;
}
Your individual case decides, maybe it works according also to your wishes.

Note: I´ve had it only tested with the browser tool (F12).
Regards
World Meteorological Organization (WMO) Weather - Climate - Water
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Extension: phpBB Advent Calendar - Final

Arclon
Registered User
Posts: 14
Joined: Sat Jul 13, 2019 12:49 pm

Re: Position Search Box right & bottom & floating in prosilver

Post by Arclon » Sat Jul 20, 2019 10:00 am

THX

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 928
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Position Search Box right & bottom & floating in prosilver

Post by Hanakin » Mon Jul 29, 2019 6:51 pm

If the container is positioned relatively and the search field is floated you may get what you want with verticals-align bottom on the search field just add some margin to the bottom of the search field or some padding to the container. Sorry on my phone so can not test it.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”