How do I expand input element to its container div

And another one too: :blush:

The inherit rule in the style tag overrides the linked “awesome.min.css”.

To avoid that I modified the inherit rule to exclude the search icon <i class="fa fa-search"></i> in the rule:

.tfnewsearch { font-size:18px; /* testing */}
.tfnewsearch *:not(i){ font-size:inherit; font-family:inherit;}

The icon’s parent match the universal selector and inherits size and family so the icon still inherits the size.

Thank you @PaulOB and @jmrker and @elenorarezaie2010!
This font-size adapting trick will be handy for future forms. :smiley:

1 Like

Dear PaulOB, Thank you very much for your help. By seeing your code, it seems that my previous code is totally useless. Then I have tried to learn from your implementation in order to improve my future coding. But there are a few questions about your code that is unclear to me. First, Could you please tell me how do you understand when to use min-width or max-width or something related. Second what is flex and flex-wrap property exactly? And why did you separate a few of the properties from the same class in an other block? like flex property seems to belong to tftext but again you created an other .tftext block and put that property inside it? Third what does it mean: “> *” and “.tfnewsearch *” in CSS? And finally do you have any suggestion for me as an amateur how to learn implementing optimized code?

Hi,

For further learning I’d recommend Mozilla Dev:

Mozilla Dev also have complete web references for HTML, CSS , Javascript:

There’s also a reference department here at Sitepoint coauthored by PaulOB.
Many Sitepoint articles are authored by top devs in various areas:

A build your first site step by step tutorial here at Sitepoint:
https://www.sitepoint.com/courses/build-your-first-html-css/

Also there are very good books and courses here at Sitepoint Premium:
https://www.sitepoint.com/premium/

2 Likes

Thank you so much.

1 Like

> is targeting a child but not any grand children. It’s called the “Direct child selector”.
* is targeting all the different HTML elements the page contains. It’s called the “Universal selector”

Hence the “.tfnewsearch *” will match all cildren and grand children in a container named that class.

2 Likes

If you are talking about .tftext in the pasted code then that was a mistake and should be combined. Refer to the codepen code as I had already changed it there :slight_smile:

Usually your design will have elements that need to fit together or expand and shrink as required. Sometimes it is necessary to control how much space these elements take up and you have a variety of properties available for this.

Which properties you use will depend on the design and how you want it to look. The easiest solutions are often the best so keeping things simple means you may not need anything extra.

In the end it does come down to experience but common sense can play a big part also.

Flexbox (display:flex) is a modern method for laying out items horizontally (or vertically) but not specifically in a grid structure. It has many methods and properties available to it and too complicated to explain simply. There are however a great number of tutorials around on flex so suggest you research them yourself as it will be worth the effort. Flex is not something you can learn at first pass so you do have to practice with it.

Just keep practicing and asking questions like you are doing:)

2 Likes

I’m trying to change the coordinate of the form in order to show it near center of the web page. I have searched on the internet and found different solutions. I used margin: auto for it but doesn’t work. I tried some other solution that say I should put the form inside a div and then change the location of that div. For changing the location of the div I put property align: center and even use position: relative then specifying a value for its top property but non of them moved the form. I appreciate if anyone helps me how I can change the location of the form and its containing children.

To centre a block element you need auto side margins and the element needs a width or a max-width. I suggest a max-width only as you want to keep all elements fluid and capable of getting smaller. Avoid fixed widths on containers wherever possible.

Look at the element called .tfheader in my demo for an example.

https://codepen.io/paulobrien/pen/dybEeVy

If you learn one thing today let it be that as a beginner you will never move anything using position:relative. Position:relative with co-ordinates is used for more subtle overlapping effects as the element is never moved physically but only visually.

1 Like

Thank you for your reply. I changed tfnewsearch as you said like below, but still it doesn’t work at all. In addition I don’t want the form to be located exactly in the center of the page. I want the form to be show in the middle of the center and top of the web page. Could you please help me how can I do it?

.tfnewsearch {
  max-width: 1250px;
  background-color: #c3dfef;
  padding: 10px 0;
  margin: auto;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
}

The code you showed will center the element horizontally.

You will need to explain what is not working exactly and provide a demo or full code so we can test :slight_smile:

Thank you for your reply. I’m using exactly the same code as you wrote in codepen. As you said the changes you mentioned, doesn’t effect the location of the form vertically. I just want to show the form and its children (labels, search bars) somewhere between top and the center of the web page. I mean vertically change the location. But I don’t know how can I do it.

If you want to center the form vertically in the viewport then you would need to give the parent a viewport height which you can do with min-height:100vh. You can then use flex to align vertically with margin:auto on the child element.

e.g.

https://codepen.io/paulobrien/pen/abogewa

1 Like

Thanks. It worked fine.