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)
Related
I'm using Tailwind CSS to design my website and I keep running into an issue while creating my layout: the page is always wider and taller than the size of the screen. If you've ever had this happen before, you know how annoying it is.
I think this is because I added a navbar with fixed positioning and h-content. In any case, my main wrapper div is supposed to wrap the entire page, fit the screen without creating any scrollbars, and have m-8 margins on all sides, while still fitting the screen.
I'm finding that the height properties (h-full, h-content, h-screen) and width properties (w-full, w-content, w-screen) can be confusing at times. Especially when I start adding other divs to the page to create "sections" with specified heights and widths.
Does anyone have a good tutorial or article on how these properties work? I must not be understanding them properly.
I'm using React and Next.js. On the homepage, I am returning something like this:
<div className="w-screen h-screen">
{/* This nav is applied to all pages through the pages/.app */}
<Navbar className="w-full h-content" />
<div className="flex w-full h-full m-8">
<section className="w-1/2" />
<section className="w/1/2" />
</div>
</div>
Any resources to help me understand how to build layouts using Tailwind would help tremendously.
You need to add this in global css file (probably styles/global.css) before you can use w-full and h-full as they depend on container element's width and height.
In case of a page the container is most probably a div being used to render react. And that div depends on body, which depends on html tag.
html, body, #ID_OF_THE_CONTAINER_DIV_IN_WHICH_REACT_IS_BEING_RENDERED {
width:100%;
height:100%;
}
Also checkout https://nextjs.org/learn/basics/assets-metadata-css/global-styles
The video below really explains in detail how to create this kind of layout:
https://www.youtube.com/watch?v=XQ1m4r3BqaY&ab_channel=WebBlocksApp
And this is the example I created. pay attention to the CSS tab. there are extra styles needed for this to work properly. Also notice I added extra height on purpose, but if you remove the class the content will still wrap the whole available space.
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 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!
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.