I have the following snippet:
<div>
<table className="hidden sm:block w-full">
...
but when I expand the screen, the table doesn't take up the full width as the internet is suggesting me.
With Code Above
Desired Result
What is the opposite of visible? Everyone suggests block, but that seems like an odd default to me.
It looks like
<table className="hidden sm:table w-full">
is the best approach here.
Related
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
i am following a tutorial by chris sev on Better Dev channel.
Here is the codepen for the tutorial.
I want to make this sidebar fixed and avoid scrolling. Right now if i put content the sidebar also scrolls with the content.
i have tried fixed top-0 and sticky top-0on the div with the sidebar class.
None of this seemed to do it. Anyone know how to make the side bar fixed?
the main problem of your example was the wrong usage of flex and how you implemented it.
Here's a clean version of your codepen link (without the mobile version, I'll let you deal with that ;)
In short, you need to make sure the FLEX main app will use the full window size :
<div id="app" class="fixed flex w-full h-full ...">
Once the main app is set, you will just need to adapt the children to your needs :
<div id="sidebar" class="w-64 ...">
As you can see, you just need to set the width for the "static" element (the one that needs to stay always the same)
The dynamic element – the content container – will have more flexibility, therefore we apply .flex-1 :
<div id="content" class="flex-1 overflow-auto ...">
This is not really related to tailwind but rather to display: flex; itself.
(PS : I've edited so you only see the important classes)
I'm stacking a series of small divs to show a series of statistics. The problem is to display them correctly on a mobile phone. Can you suggest an alternative for me? It's worth noticing that this design came from an admin template.
This is what you'd see on a bigger screen:
And the following is the way the cubes are displayed while using a cellphone:
<div class="col-2">
<div class="bg-success p-10 text-white text-center">
<i class="fas fa-warehouse m-b-5 font-16"></i>
<h5 class="m-b-0 m-t-5">414</h5>
<small class="font-light">Bodega stock</small>
</div>
</div>
I've read about responsive typography but I'm not sure how should I proceed.
From a designer point of view, I think what you should do is making the bottom columns be rows instead, so, in mobile, they would all be the same width as the blue box.
This should be pretty easy using Bootstrap 4, your col div would be:
<div class="col-xs-6 col-sm-4> ... </div>
Something like that.
In my opinion you have two options :
Display the 'total disponible' and 'total reversa' side by side on big screen, but one under each other on responsive, which can be easily done using flexbox
Like a fellow said above, display the green, black and yellow divs in column, with width set to 100%
I have a little toggle button in the top right of a long form, that toggles whether the form is editable or not. It's sticky with reference to the top and bottom elements of the form. It works fine when I'm scrolled to the top of the page, but as soon as I get to the point where it becomes sticky, it loses the effect of the float-right class that's attached to it. Here's the code:
<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
<div class="switch round float-right" data-sticky data-top-anchor="userID:top"
data-btm-anchor="password:bottom" data-sticky-on="small">
<input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
<p class="help-text align-center" id="editTitle">Edit</p>
</div>
</div>
Here's what it looks like before and after (the right edge of the picture is the right edge of the grid in both pictures):
Before:
After:
QUESTION: Why is this happening and how can I fix it?
P.S. I still haven't quite figured out how to make a jsfiddle or codepen thing cause I'm relatively new to web stuff (I usually work back-end, but my new job requires the front-end stuff), so sorry about that.
UPDATE:
I found this answer because I noticed that the .sticky.is-stuck classes set position: fixed in the css. I tried what they said, but that just put my little toggle all the way over to the right side of the window, not the right side of the column. So that's not an option. :/
I figured it out!
Instead of floating it to the right in a small-4 to take account for all the different sizes of devices, I set the width of the container to be 30px bigger than the actual element's size which was 64px (to account for the padding automatically there because of Foundation). My container code ended up looking like this:
<div class="columns" style="width: 94px;" data-sticky-container>
This way, the "column", so to speak, that the sticky thing was in was exactly the size of the element inside of it, and that itself was at the end of the row. Now it fits beautifully on all screen sizes, in the right spot!
My custom vertical-side-navigation bar works fine by itself.
Here's a plnkr:
http://plnkr.co/edit/pLXogXuPiYwulcuzExMh
However when introduced within a bootstrap grid, the same navbar breaks. Plnkr here:
http://plnkr.co/edit/50G3o3ekNMR8qx2Be3rG
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-1">
<ng-include src="'nav.html'"></ng-include>
</div>
<div class="col-lg-11 col-md-11">
This is content section
</div>
</div>
I can fix this using some hacks like adding min-height property to the class
.vertical-side-bar
However, I do not believe that is the right way to do it. I am missing something here conceptually.
Could anyone please point out what's wrong?
The most obvious issue in your Plunk is that you are not calling the nav.css file.
<link rel="stylesheet" href="nav.css" />
Try this minor update to your Plunk here.
Now all that is missing is the background color and such. That shouldn't be difficult to add back. Your layout is basically working, though you need to make it fill the container width instead of being fixed width (I added that in my plunk).
But bear in mind that you can't get a fixed width column in Bootstrap 3 like you seem to be expecting. A column will always be 1/12th of the width of the screen. Also, you should start with columns defined for xs and then specify sm, md, or lg if they need to be different.
For example, you might need 3 xs columns to fit your content (col-xs-3), but only 1 in a large device (col-lg-1).