Flexbox Question

Started by Skhilled, Jan 01, 2021, 01:35 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skhilled

Jan 01, 2021, 01:35 PM Last Edit: Jan 01, 2021, 08:47 PM by Skhilled
I am converting my Docskillz theme (SMF 2.0.17) to SMF 2.1 RC3. In the first link below, you'll see a spy glass next to the search box on the top right of the page.

https://www.docskillz.com/docs/index.php?action=forum;theme=3

The next link shows the RC3 theme that I'm working on. In this one, I'd like to add the spy glass in front of the search text box in the top section right. However, no matter what I do I can't seem to get it to stay put when the screen or browser resizes..

https://docskillz.com/smf21rc3/index.php

After 2-3 days of screwing around, I finally realized that I need to use a flex container. I found code that shows how to use it but am confused as to why it shows two ".flex-container" codes for one flex box as shown below as well as implementing them properly.

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox

a much easier and straight forward way of doing this, is to drop all styles from .search_icon and add only a:

vertical-align: middle;

and put the html code of the image right before the search input html code which is:

<input type="search" name="search" value="">

SychO

a much easier and straight forward way of doing this, is to drop all styles from .search_icon and add only a:

vertical-align: middle;

and put the html code of the image right before the search input html code which is:

<input type="search" name="search" value="">

Skhilled

Ah ha! Thank you, thank you, thank you!!! :vcool

As usual, I was being me and being to too precise with positioning. LOL Not sure why I always forget about using align.  :dontknow

Thanks again! ;D

Ronald

It's a learning lesson as you go forward. You'll get it done.

Skhilled

Oh yeah, and you know I don't give up too easily. :rgton