I have a grid layout with 4 elements that should have a specific place in desktop and mobile sizes and it's ok besides the masonry. the third and fourth elements are not near to each other!
see jsfiddle example: https://jsfiddle.net/amnshojaei/0krpufxa/6/
<div class="grid grid-cols-12 gap-[24px]">
<div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-1 lg:row-end-2">1</div>
<div class="h-[200px] col-span-full lg:col-start-1 lg:col-end-9 lg:row-start-2 lg:row-end-3">2</div>
<div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-1 lg:row-end-2">3</div>
<div class="h-[100px] col-span-full lg:col-start-9 lg:col-end-13 lg:row-start-2 lg:row-end-3">4</div>
</div>
I want to have something like this with auto height elements:
Tailwind's columns utility should work for your use case!
Related
Using Tailwind CSS in React, I want to:
Have a two-column page. Column 1, which holds the "Menu" component, should take up 20% of the screen. Column 2, which holds the "Templates" component, should take up 80% of the screen.
Column 2, the "Templates" component, renders 4 dropdowns of varying width. I want each of the dropdowns to render in a column, but I want each column to be only as wide as it needs to be to display the dropdown. I don't want the columns to have equal width. My problem is that the columns are of equal width. How can I get each column width to only be as wide as the dropdown that gets rendered inside it?
In other words, I want the page to look like this:
[menu button] [Carrier Groups] [States] [Policy Types] [Statuses]
...instead of like this:
[menu button] [Carrier Groups] [States] [Policy Types] [Statuses]
To render the 2-column page I'm doing this in my App component. This works fine. In the parent div I have "grid-cols-5", and in the 2nd child div I have "col-span-4" to consume 80% of the page.
function Content(){
return (
<div className="w-screen h-screen grid grid-cols-5 gap-3">
<div>
<Menu />
</div>
<div className="col-span-4">
<Templates/>
</div>
</div>
);
}
function App() {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<Content />
<ReactQueryDevtools />
</QueryClientProvider>
);
}
export default App;
This is the Templates component that renders in the 2nd child div. I am rendering 4 components in 4 columns. As mentioned each component renders a dropdown. The 4 columns are of equal width. Is there anything I can change so that the 4 columns are only as wide as needed to render each dropdown?
const Templates = () => {
return (
<form>
<h1 className="prose-2xl m-0">Templates</h1>
<div className='w-screen grid grid-cols-4 gap-3'>
<div>
<h2>Carrier Group</h2>
<CarrierGroups />
</div>
<div>
<h2>State</h2>
<States />
</div>
<div>
<h2>Policy Type</h2>
<PolicyTypes />
</div>
<div>
<h2>Status</h2>
<Statuses/>
</div>
</div>
</form>
);
}
export default Templates;
To create a two-column 20% / 80% layout I would do how you suggest. When using grid-cols-{n} you are creating an explicit grid and the columns will be equal widths.
When you need columns of varying widths you can create an implicit grid, the key class here being auto-cols-min. You also need to include a col-start-{n} class for each column that you want.
<div class="grid auto-cols-min gap-2 bg-zinc-500 p-5">
<div class="col-start-1 w-20 bg-zinc-100 p-5">col 1</div>
<div class="col-start-2 w-40 bg-zinc-100 p-5">col 2</div>
<div class="col-start-3 w-24 bg-zinc-100 p-5">col 3</div>
<div class="col-start-4 w-48 bg-zinc-100 p-5">col 4</div>
</div>
Demo of above: https://play.tailwindcss.com/gKRtn7vFgi?layout=horizontal
More info:
https://tailwindcss.com/docs/grid-auto-columns
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
I'm trying to use ember-paper in my ember app but i can't float content to the right.
Example
What I want to achieve (from ember-paper official website)
My code
application.hbs
{{#paper-nav-container}}
{{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<div class="logo">
<strong>Paper</strong>
</div>
</div>
{{/paper-toolbar}}
{{#paper-content}}
{{#paper-list}}
{{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
{{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
{{/paper-list}}
{{/paper-content}}
{{/paper-sidenav}}
<div layout="column" tabindex="-1" role="main" flex>
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<span class="md-breadcrumb-page">Title</span>
</div>
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
{{outlet}}
{{/paper-content}}
</div>
{{/paper-nav-container}}
How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide
The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
I'm working inside a templated system where i can implement code, but i can't modified the core of the file. My layer are stacked like this:
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
As you can see, my class all have the same name (layer1, layer2, etc...). I want to know if there's a way by using Javascript, Jquery or any other online client side library to modify the CSS class name so, for example, the first layer1 become level1 and the following layer1 become level 2?
Thank for your answer!
As other people already said, jQuery actually does what you want.
As long as you don't know the number of “layers” you have, you better find all elements by classname substring:
$('*[class^="layer"]')
Then you can get the list of the element classes and change old names to new ones.
Many different ways to do this:
Solution 1:
Use addClass() and removeClass()
$(".layer1").removeClass('old_class').addClass('new_class');
Replace old_class with your older class and new_class with your new class
Solution 2:
If you are able to get the element by ID
You can set the class by using .attr()
$("#id").attr('class', 'new_class');
an all around solution working with className :
var elem=document.querySelectorAll('[class^="layer"]') ;
for(i in elem){
x = elem[i].className;
var y=x.replace("layer" , "level");
elem[i].className=y||x;
}
I faced problems when multiple elements(say 50) are given with similar and different dimensions(1*1,1*2,3*4 etc) and when you need to include all these elements in one page independent of the screen size in a random order.
I believe you're looking for a masonry layout.
Check out Isotope: http://isotope.metafizzy.co/
Here's a simple example
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
$('#container').isotope({
// options
itemSelector : '.item',
layoutMode : 'fitRows'
});