I have menu that I would like to be positioned to left of the screen when screen is small (let say before SM) and positioned to right when bigger.
<MenuItems
class="
absolute left-2 top-24 w-full mt-8
sm:right-2 sm:top-0 sm:w-max
"
>
Settings for right-* works as expected when applied alone, however when prefixed with breakpoint sm left-* is taking priority.
Is it a way to use something that would cancel left on bigger screens? like sm:left-none
Yes auto can be used to cancel positioning values. So use sm:left-auto.
Another (worse) option would be to use right-full on smaller screens. But then your element would be offscreen. Though you could transform it back like this: right-full translate-x-full sm:right-0 sm:translate-x-0
Related
I want to use Tailwind Css to maintain a perfect circle for my icon avatars shown below for both large and small screens.
I do know that I can use a gradient-radial like this:
.avatar{
background: radial-gradient(circle closest-side,
yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
color: #db0100;
}
But I scrictly want to use Tailwind. Is it possible? Thanks.
You can do that rather easy with Tailwind. You need to create a div with rounded-full, grow-0 and shrink-0. Besides this, you need to set a width and height. The setting the grow and shrink to 0 means that the div will not resize, even if the browser needs more space for other elements.
<div class="w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700">Content</div>
I have made an example for you in Tailwind Play.
Hope this helps.
A background gradient won't actually have any effect on the size or shape of an element.
In order to maintain a perfect circle you first need to make an element a square and then use something like border radius to round the corners.
The most recent version of Tailwind CSS has a class to utilize the "aspect-ratio" property.
(More on that here: https://tailwindcss.com/docs/aspect-ratio )
Your HTML might look something like this:
<div class="avatar aspect-square rounded-full"></div>
"aspect-square" will make the element always be a square.
"rounded-full" will use border-radius to make the square a circle.
Both of these classes are available in Tailwind CSS.
If you haven't already, your icon avatars may need a defined height or width to make sure they match each other in size.
For some reason <div class="h-screen bg-gradient-to-br from-green-400 to-indigo-600"> appears with a white line on the top on desktop:
it also looks like this on repl (see below_, although can't reproduce using chrome.
My initial assumption would be that you're getting caught out by margin collapsing. There's an unintuitive situation that occurs with the margins on the first and last child of an element.
In your case, I'd assume that your immediate child element has a top margin which is creating that white gap at the top of the page.
You can solve that problem by setting your container to display: flow-root. Tailwind gives you the .flow-root class for that.
<div class="flow-root h-screen bg-gradient-to-br from-green-400 to-indigo-600">
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
In my website, I have a box that's not sizing like I want.
<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.
<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?
And how can I make it work on both?
Have you even read the documentation of Bootstrap?
http://getbootstrap.com/css/#grid
Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
That influences the devices with a resolution of 767 pixels or less.
So to come back to your question: are they combineable? Yes, they are
The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.
Happy HTML'ing!
.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.
HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.
If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block
I'm using the 960 Smart Grid to design a website. It's a mobile first grid system, and I'm having a bit of trouble. In order for the grid system to work, the padding-left element cannot change or it breaks, except in the default layout when everything is a single column.
I needed to adjust the padding for an element in the mobile view, which screws up the element when it's larger than the single-column view width (so greater than 768 px). I need to change the padding back to what the original smart-grid style sheet says, but I'm not sure how to do that.
I'm fairly new to this, I don't have the site live at the moment but I can share any code needed. I'm adjusting the padding on a paragraph element, set inside of a div element.
<div id="intro" class="columns twelve" class="row">
<p id="tagline" class="columns eight offset-two">Sample Text.</p>
</div>
Essentially, I need to set a 6% padding for the paragraph element in the mobile view. Once it reaches a minimu width of 768 pixels, I need to eliminate the 6% padding because it breaks the offset-two portion of the tag. The offset is achieved in the smart grid style sheet using a padding-left value based upon the screen size. I'd like to switch back to the default padding from the smart grid style sheet for all of the media queries, if possible. You can check out the basic grid documentation on the site I linked to at the beginning of the question.
Thanks for the help.
I'm not sure if I understood your problem, but it looks like you just need to overwrite the padding for when the browser is less than 768 pixels.
To do this, you just need to add, at the end of your main css (or in a new one, but called after the other one):
#media screen and (max-width: 768px) {
.columns.eight.offset-two {
padding: 6%;
}
}
This means that this style will only be applied if the browser is smaller than 768px, and once it gets bigger, it will bring back the 'default' padding for your element. You don't need to specify the padding again for bigger resolutions,l because the second the browser gets past the number, it completely forgets about the media query (it's like it doesn't exist anymore). The only thing you need to keep in mind is, unless you set another smaller media query after this one, it will apply the 6% to all smaller sizes.
It's important that you keep your media queries at the end, because css is read from top to bottom, and the last style read will be the last applied.