I want to wrap columns in set of css classes .. some thing like below. However its not working.
#grid.GetHtml(
#
<div class="prod_box">
<div class="center_prod_box">
columns: grid.Columns(grid.Column("Model"),
grid.Column("DiscountCost",
style:"reduce"))
,displayHeader:false
</div>
</div> );
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 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!
How to align to highest column in the next row of a loop? I would like it to look like in the first image, not the second. Divs are rendered in loop:
<div class="container">
<div class="row">
<? foreach($a as $b): ?>
<div class="col-xs-12 col-sm-6 col-md-4"" >
$b->foo
</div>
<? endforeach ?>
</div>
</div>
First image (undesirable):
Second image (desirable solution):
This is a side effect of floating, you will need to clear the float on every x-th element, with different “x” for the sm and md breakpoints.
The nth-child selector helps with that. To not have to select the columns based on any specific col-xy-foo class, I would simply go with the child selector here, .row > :nth-child(…), the row itself made more uniquely selectable by an additional class or id, if necessary.
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;
}