Js: Question / Code help

Question

I just started working on messaging App (not actual) to play with.
I wanted the message width to be as wide as the MessageBox (Input).length.

^ But that only has to happen If the width of the message is less than 200px;

I tried using for loop, but na.

https://code.sololearn.com/WTGHT3hyURYR/?ref=app

Answer 1

Coder Thank You. that's what I was looking for.
for the limited to 100,
This was what i meant:
if (z < 100) {
message.style.width = z;
}
// if it's over 100 it can have it's normal width.

I got that.
✔️

Answer 2

Why would you even use JS for this problem? You just need CSS. E.g. you could use CSS flexbox to automatically align everything as you want.

Answer 3

Aaron Eberhardt how do you use flexbox?

Answer 4

That's the best guide about flexbox I know:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

Interestingly this *fix* does not really work. As I said JS isn't made for layout problems and is therefore not suitable for this problem. There are two issues:
1. Every letter has a different size (except you want to use a monospaced font). m is larger than i. Typing in five i will result in a too large box, while five m won't fit in the box at all.
2. It's not responsible. Setting pure pixels will eventually ruin your layout on some devices or in landscape orientation.
Solution: Use CSS. It will make your JS less bloated and your code easier to maintain. And it can automatically fix both problems I named.

Answer 6

Aaron Eberhardt I clearly understand what you are saying.
What I was trying to do was... the newMessage(li), width to take the necessary width only.
Example: text "Hello", I dont want it to take a whole 200px width on that text. "Hello" probably only needs about 20px width.
To accomplish that I could probably use inline, or inline-block, but the newMessage(li) just scatter around. They don't list down, or one text is all the way to the left, the other is all the way to the right...

With the flex, It lists them down (starts new line for a new message). Which is good. but the width of the newMessage is thr same for all texts.
Example: "hi", would have 100px,
"Abcd and abcd and bla bla bla bla and type type", would have 100px.
"hi" probably only needs 10px width, but it takes 100.
The easiest way to understand what i'm trying to say is... I'm trying to make iMessage.
of course it's not gonna function or look exactly like iMessage. Just to type in the input and print it in a list.
That's y i usd JS for width

Answer 7

Ginfio ok that's fine. As long you just do a fun project it doesn't matter. But otherwise setting layout directly through JS is a very bad idea.

Here's what I managed to accomplish with flexbox:
https://code.sololearn.com/Wzdw8WDgbg0u/?ref=app