Bricks Version: 1.3.7
URL: https://staging2.rightsyntax.com
The new builder interface for the icon, does not reset icon classes correctly…
In the icon box, choose direction horizontal, that correctly displays the icon to the side of the content.
However in inspector it leaves the classes on the parent wrapper container of “icon-position-top” which in turn leaves 24px of bottom margin in play on that class, that shouldn’t be there…
Workaround fix, set icon bottom margin to 0.
Hi Rich, you are right that the icon-position-top class is always there, however it has no influence on margin-bottom because that is applied to .icon (default margin-bottom: 20px).
Probably the class is a leftover from a previous version. It doesn’t have a single property and is therefore superfluous from my point of view.
Best regards,
timmse
We are both a little right on this one, and probably warrants a little refining for next release…
In V1.3.6, when you used the drop down to select the icon position the wrapper class updated to reflect the icon location.
In V1.3.7, the drop down location setting is replaced in favor of the flex controls, however the wrapper class does not change, see screenshot…
You are right though that the margin bottom is applied to the icon, where .icon is child of .icon-position-top…
Found another issue with the icon box widget…
The issue is there is no way to align content box, not text align, but the content box in general to middle… The “Align” option under Icon only controls the Icon if the icon is smaller in height than the content box to the side of it.
What I am trying to complete is Icon 50px in size, content to the right side of icon, roughly 40px in height, content center aligned to icon…
The only work around I can currently find is to set the Icon height to match the height of the content box at 40px.
Example Icon Smaller than content: (Works)
Example Icon Larger than content: (No way to center content)
Thank you
You can just use 2 containers, one for the icon and one for content. Then you can align them as you want.
That is true, and I thought about doing that, but being this was about identifying bugs in the Icon Box widget, I have continued to utilize it and identify anything else that may not be working per concept if that is the right idea…
Hi Rich,
serious question: do you really want to display the icon so large, or did you notice it more incidentally?
The question I ask myself is whether it really happens so often that the icon is larger than the content, so that it justifies the content alignment option. If this is the case for one user out of say 1000, it is out of proportion. And as Alan already said, there is an alternative… 
No my overall display goal is that the icon is 50px tall while the content to the right of it stands at 40px in height, so over all it is no where near as dramatic as I showed in the example. So I noticed it more incidentally, after upgrading to 1.3.7, when I noticed there was more space under my text than above next to the icon. Currently to resolve the issue, I have set the height of the icon to 40px to match the height of the content.
To follow Alan’s suggestion is not a problem, but then it leads to redundancy issue, why have a “Icon” widget and “Icon Box” widget, if you can’t do what you need with the “Icon Box” widget… maybe the widget itself should just be removed in favor of using two separate widgets.
I would think that by moving the alignment controls outside of the icon controller to the same level as the flex display level, or direction controller, could (I say this without having any real control to test) alleviate the issue…
Yes, you’re right, of course. However, it is hard to cover every conceivable situation - especially with a predefined element.
The interim solution to your problem consists of a single line of custom CSS:
root .icon-box-wrapper {
align-items: center;
}
This way, the icon can be as big as it wants and be center aligned, just like the content. Remember to set the margin-bottom of the icon to 0.
We will see how we will handle this in the future.
Hi Rich,
Please retest with Bricks 1.4 and let us know if you encounter any problems.
Best regards,
timmse
