Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#13 2015-09-10 14:13:46
- jensf
- Member
- Registered: 2015-07-16
- Posts: 23
Re: [CSS] Search form is displayed in two rows
uli wrote #294583:
The one thing that’s confusing me is the closing CSS comment immediately before your comment that contains “46224” (this one at the end here:
textarea.radius { border-radius: 3px; } */). It has no opening counterpart. Edit: Try to remove it. Let’s hope it’s that thing that’s also confusing browsers. Other than that, I’m out of ideas, position, selector precedence, syntax, bracketing, semicolons, no nesting in the wrong @media rules: everything seems to be OK.
@uli, the closing CSS comment caused the issue/confusion. I deleted it and it’s working fine now! I didn’t recognize it but you’re apparently very keen-eyed! :-) Thank you very much! I guess this fragment of “code” is a rest of my previous attempts (which probably failed due to the same reason…). But no it’s gone and working! Thanks again!
Offline
#14 2015-09-10 14:53:05
- jensf
- Member
- Registered: 2015-07-16
- Posts: 23
Re: [CSS] Search form is displayed in two rows
jstubbs wrote #294611:
Hi jensf,
As you seem to be using Foundation 5, not sure if you followed the instructions for search bars within the top-bar nav? The markup you are using is not the same as the F5 example:
<li class="has-form">...
Hi jstubbs,
Thanks for your comment – and no, I didn’t follow the instructions for Search to be included in the Top Bar. But I take the example for my solution from another template called workspace, published by foundation. So, this simple structure should work, too. (…And after I deleted the closing CSS comment fragment, the issue was gone. :-))
But back to your initial comment: I followed the instructions from Foundation for an absolute positioned search bar within the Top Bar as described here regarding how-to show search bar on small devices… but finally I came back to the version where I float it at the top right of the navigation bar.
Offline
#15 2015-09-10 15:00:39
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: [CSS] Search form is displayed in two rows
jensf wrote #294666:
I didn’t recognize it
I wouldn’t have remarked it, either, if the section it finishes (as a closer of the comment) would not contain of all things the rules that actually determined the unwanted behaviour. So your proper placing of the rule helped a lot :)
jakob wrote #294620:
Removing the
*/in the wed dev tools
Ah, the web dev tools. They took up so much screen real estate that I have them always minimised to their icon. So, apart from their post-JS code view (that I don’t even invoke with their proper UI) I rarely use them. Good to be reminded of their existence, there’s so much valuable stuff in them.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: [CSS] Search form is displayed in two rows
Hi jensf, happy you got it working ;)
Offline
#17 2015-09-10 15:19:18
- jensf
- Member
- Registered: 2015-07-16
- Posts: 23
Re: [CSS] Search form is displayed in two rows
@uli,
While this is finally looking very good after your (+@all) hints and help, I have still one question: the search button is in line with the input field in e.g. Chrome browser. But in Firefox and in the Chrome in the view for small displays (width < 900px) it’s NOT: the search button appears with some (1px?) “space” at the bottom. When I try to change border-width attributes for the button or do some experiments with font-size for the mentioned classes etc., I get it looking fine in Firefox. But I have the same issue with Chrome as I had with Firefox first, then. ;-)
Do you have any idea why this 1px-bad-positioning happens in Firfox?
Offline
#18 2015-09-10 15:24:48
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: [CSS] Search form is displayed in two rows
Have you tried setting the same line height that you have in your font size?
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#19 2015-09-11 09:50:55
- jensf
- Member
- Registered: 2015-07-16
- Posts: 23
Re: [CSS] Search form is displayed in two rows
uli wrote #294684:
Have you tried setting the same line height that you have in your font size?
No – I didn’t so far. But after your comment… I did:
.right button,
.right .button {
line-height: 0.875rem; }And it’s working! :-) Thank you so much …so far.
Now, I’ll try to find out how I will get the same for the menu view for small displays < 900px width because here’s still still 1px in Chrome and Firefox. ;-)
Offline