I use tailwindcss with antd to develop my website.
The following two code sandboxes shows the same antd component with and without tailwindcss
https://codesandbox.io/s/antd-collapse-u1diyl
https://codesandbox.io/s/antd-collapse-with-tailwind-ubl1de
You can see that in the first sandbox, the arrow and text are vertically aligned while in the second one they are not. The only change in the second sandbox is that I included tailwindcss.
However in chrome's inspector, both arrow elements have the same computed css except for tab size (which I don't think would affect the vertical alignment).
Vertially Aligned
Not Vertically Aligned
Anyone knows why tailwindcss changes the vertical alignment of the arrow and how to fix it? I would like the arrow and text elements to be vertically aligned.
You can resolve this issue by adding this in the tailwind.config.js
corePlugins: {
preflight: false,
},
Related
I've been working on an application that uses React Big Calendar.
We are using a thin scroll bar and when there is an overflow, the TimeGridHeader isn't well aligned :
React Big Calendar automatically adds a right margin that has the size of the default scrollbar, however our scroll bar is smaller so it creates a too big gap, and the alignment is bad.
Do you have any idea on how I could change this default margin value when the there's an overflow ? Thanks
I've tried setting 'margin: 0 !important' to the class .rbc-overflowing. It did override the right margin, howver I'd prefer doing it in another way.
I have a bootstrap container with an img inside. I'd expect the left side of the image to align
with the LHS of the container. Looking through the CSS with the browser debugger doesn't show any margin, border, etc that seems to be responsible. Playing with position and align doesn't fix this issue.
I can force it by styling the img with "margin-left:-15px".
I'd really like to know why this isn't working as I'd expect and where does the 15 pixel magic number come from.
Thanks,
Joe
#joe McGuckin. The magic number comes from the bootstrap template css file. Here is the snapshot from Bootstrap.min file.
Bootstrap is a frame work which provides some built in elements to make a page responsive. Please refer to the bootstrap documentation for guidance.
I'm currently using this snippet for a navbar:
http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation
I've edited some content of the navbar but now I want to align the navbar and the hamburger to the right. I've already tried floats and margins but nothing seems to work.
Thanks.
Here is the code:
http://bootsnipp.com/snippets/Ol10M
You need to remove Bootstrap's navbar-fixed-top {left:0} to allow the sidebar to float to the right. I just replaced it with "left:auto" in the first style of the CSS in that snippet.
Then you need to replace all the "left" instances with "right" except for the last css rule for the overlay.
With Bootstrap loaded, the div doesn't expand along with the contents inside. So if I insert an image or enlarge the text, it just kind of...gets squished in or squished out of the div.
http://jsfiddle.net/thomaswtsang/SSmJt/3/
What is it about Bootstrap that causes this to do this?
It looks like the bootsrap css used by you does not have the responsive features.
Please download the bootstrap library from the customize option.
You can have a look at this modified sample. You need to add some structural changes also as defined by bootstrap. You need to place the spanx definitions inside a row element to work correctly.
I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.
See: http://jsfiddle.net/pAfgm/7/
The default vertical-align value is baseline, which is the cause of this problem.
See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/