Morning.
When you have the RainbowBar in gradient mode it spans the container perfectly. When it’s not in gradient mode it seems to fall short on the right hand side by a pixel or two.
In the non-gradient mode the Rainbow bar stack divides itself up into five sections. Each section’s width is percentage based – meaning each section of the Rainbow Bar is 20% of the width of the container <div> it is placed within, or just the page itself if no containing <div> or the like is used.
As the browser width, changes the width of the container <div>, or just the page itself, will change since we’re working within a responsive environment. Unfortunately when this happens the overall width may not result in perfectly equal “column” widths due to the way the browser rounds the percentages.
And to make matters worse, some browsers rounds these percentages differently.
Since it is divided into 5 parts, which results in a 20% width for each, we shouldn’t normally see many problems. If we were using a more awkward number we’d see it more often. This is why 20% was chosen, as it is an easier number to work with.
I suspect if you resize the browser a little you’ll see the problem clear up. If not, please ZIP up your project file with the problem and post a download URL here for me to look over. Also in this case let me know what browser(s) you’re seeing the problem in as well.
Unfortunately these rounding problems are browser (rendering engine) based, and not something I have any control over.
The reason you won’t ever have this problem with the gradient is because it is one section at 100% width. That 100% width will always fill the entirety of the containing <div> or page.
1 Like
Could you set the background color of the “rainbow-bar” (containing DIV) to the same color as the last section (SPAN)? That way the slightly shorter last section wouldn’t be noticeable.
1 Like
Right, understand @elixirgraphics. Of course I could just make a custom one, with whatever number of sections as I want, using columns. Or maybe even Grid.
Don… Now there’s lateral thinking for you. The obvious solution, it just never occurred to me.
Thank both.
I’ve not ever seen the Rainbow Bar produce a gap at the end. This is the first I’ve ever had reported and I cannot replicate it here. If @SteveB wishes to provide the project file as I mentioned above I’ll be glad to look at it though.
I changed the design in the end, but will try to replicate it again, if I can remember what I did.