I followed the (very good) advice I give to people new to programming:
There were too many moving parts and I didn’t have a good enough understanding of how flexbox worked to hold all the parts in my head. I already had the HTML set up from another bit of work, so I’d just add the CSS. When I first got into it I figured I’d just work with everything all together. NOTE: to keep the CSS easy to read, the demo pages only work in Chrome.
Ok, so now we understand the problem, let’s start coding! branches should shrink faster than the author). After a little thought and discussion we decided that the branches should be more flexible than the author (i.e. Ultimately only the author and branches should be “flexible.” Everything else should always be completely visible.
#Flexbox text overflow ellipsis how to
Nothing else relies on this piece of code and I had full control of how to implement this part of the feature (with lots of feedback from my fantastic colleagues!). I was fortunate enough to be able to throw away all existing HTML and CSS. Previously we were’t able to expand a branch name fully even though there was enough space for it. Obviously it’s got a ways to go, but this little bit is done! The main point is that we utilise all of the space available to us. Let’s take a look at what it’s currently like:Īdding flexbox is part of a much larger chunk of work, so my “finished product” looks like this: Today I spent some time implementing flexbox on our pull request page, specifically in the header. Well, the time has come!Īs you might know, I work for Atlassian on the Bitbucket Server product. That was a practice round because I knew I needed to use flexbox at work in the future.
I recently wrote about using the flex-box rule in CSS. Interesting post by - Trying To Center A Text-Overflow Ellipsis Using CSS Flexbox In Angular 7.2.CSS: Flexbox in action - Bitbucket Server pull request header And, when I combine it with a dead-simple Angular 7.2.15 component wrapper, it becomes even easier. And while it's not a perfect solution for implementing a centered text-overflow: ellipsis technique, it's definitely good enough. The more I use CSS Flexbox, the more I fall in love with it. I'll put together a demo for that later just in case anyone else is Googling for it, trying to understand wat?! For some reason, if a Flexbox container is inside of an LI, Safari removes the LI styling and also adds weird padding to the first Flexbox item. Though, I will say that Safari did freak out if the component was inside an LI element. But, that's the magic of CSS Flexbox! As I said before, Flexbox is amazing! I tested this on the desktop browsers for Chrome, Firefox, Safari, and IE11. And when we run this in the browser and resize the page, we get the following output: "I am the craziest project name that you have ever seen in your whole life - no one does this!"Īs you can see, each one of the "project names" is being rendered using the custom component. "This is my long long long long project name", "I am also quite long in my own right, not to be outdone", "This is a really long project name over here",
0 kommentar(er)
