P tag text overflow ellipsis8/3/2023 It really allows to understand quickly what goes on screen. This is my favorite mental model when talking about Layout. Content can be children nodes, or "pure" content (words for a text, pixels for an image.). content-driven:when the element is constrained by its content, and fits the minimal size so what's inside can be seen.parent-driven: when the element is constrained by its parent, and grows to reach its parent's borders, or shrink to fit in.I like to think there is 2 ways, and 2 ways only, to understand how an element computes its width and height, when not given: To answer this question, we "simply" have to answer to the most fundamental question in layout: How the size of an element is computed when it's not explicitly fixed in its style? 2.1 Understanding the auto-sizing of an element: the parent vs content-driven model Why were the text too large in the first place? This is the second question I asked myself, and the answer was trickier than I thought.Ģ. why was the initial text too large in the first place? Why did we have to make it shrink? Here is a drawing that helped me fix the idea:īut. ++code>flexGrow++/code> (and ++code>flexShrink++/code>) controls the size of an item along what is usually called the main axis of the container (see the React Native doc) : in our case, horizontally. I used to believe that it was because of the ++code>flexGrow++/code> part that ++code>flex: 1++/code> worked we had to allow the element to grow vertically, so the text could gently wrap in a wider space? Nice mental model, but it's wrong! Note: If you need a reminder about Flexbox properties, I recommend this article on CSS-Tricks: clear and well illustrated, made for web CSS but really useful for React Native too. We won't discuss the ++code>flexBasis++/code> property in this article, as it has no impact in the problem. In the Flexbox layout, ++code>flex: 1++/code> is a shortcut for 3 style properties: 1.2 why does the solution work: FlexGrow & FlexShrink The Text is wrapping, but not enough so we can see it entirely. The row container is itself in a classic vertical ++code>View++/code>. But they are not impacting for the study: everything essential is above.īasically, what we have is a++code> Text++/code> in a row container, with an icon before. Used some extra padding, colors and radiuses. Note: You can play around with the code to obtain the screenshot, I Here is a React Native code that allows to reproduce the bug? Why is the solution working? 1.1 situation Basic knowledge of React Native / Javascript - Basic knowledge of Flexbox Layoutġ. This article does not require an extended developer experience to be understood. Then, more interestingly, I explain why was the Text going off screen in the first place First why is the StackOverflow fix working 2. And after some exploration, I happily announce you that I solved it! ? I'll explain everything in this article:ġ. You see, it made a lot of reasons to want to solve this mystery. My Brain after fixing the going-out Text without understanding what I did
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |