I am using a 960 Grid System, I am trying to achieve something like the following --
|-----| |-------------------|
| | | |--| |-----| |
| | | | | | | |
| | | |--| |-----| |
| | | |
| | | |------| |--| |
| | | | | | | |
| | | |------| |--| |
|-----| |-------------------|
Is there a way of doing so? The only reason I need the second set of divs in my right column is because the left column is quite long and I dont want the space between the 2nd set of columns.
I would really appreciate any guidance if there is a better way of achieving this.
This capability is built into the Grid 960 system. You just give the left and right nested grid items the classes "alpha" and "omega", respectively.
Here's an example:
<div class="container_12">
<div class="grid_3">
</div>
<div class="grid_9">
<div class="grid_4 alpha">
</div>
<div class="grid_5 omega">
</div>
<div class="grid_5 alpha">
</div>
<div class="grid_4 omega">
</div>
</div>
</div><!-- end .container_12 -->
In case you're willing to consider other frameworks, here's how you achieve the desired result with Cascade Framework :
<div class="site-center"> <!-- Center all content in a responsive container -->
<div class="col width-1of4"> <!-- Your left column goes here -->
</div>
<div class="col width-fill"> <!-- Your main content goes here -->
<div class="col"> <!-- First row -->
<div class="col width-1of3"> <!-- First element of first row -->
</div>
<div class="col width-fill"> <!-- Second element of first row -->
</div>
</div>
<div class="col"> <!-- Second row -->
<div class="col width-2of3"> <!-- First element of second row -->
</div>
<div class="col width-fill"> <!-- Second element of second row -->
</div>
</div>
</div>
</div>
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
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 would like to know if there is a good way to start the columns of Bulma.io at the end of its container. The usual setup is:
<div class="container">
<div class="columns">
<div class="column">
First
</div>
<div class="column">
Second
</div>
<div class="column">
Third
</div>
</div>
</div>
which spreads the columns evenly throughout the container.
-----------------------------------------------------
| | | | | |
| | | | | |
-----------------------------------------------------
I know it is possible to make them shorter and left-aligned with is-(size) classes. I would like to to the same but make the right-aligned so the following happens:
-----------------------------------------------------
| | | | | | | |
| | | | | | | |
-----------------------------------------------------
I have looked up the documentation but I couldn't find any built in way.
I'm afraid there's no built in way for .columns. For some reason .is-right class is only available for .tags, .buttons and some more. What you could do is to create and use your own utility/helper class:
.columns.is-right {
justify-content: flex-end;
}
This question already has an answer here:
Issue with push/pulling my layout
(1 answer)
Closed 6 years ago.
This is my code:
<div class="row">
<div class="col-sm-12 col-lg-3">
A
</div>
<div class="col-sm-12 col-lg-9">
B
</div>
</div>
This is my template on desktop device:
+-------+-------+-------+-------+
| | |
| A | B |
| | |
+-------+-------+-------+-------+
This is my template on mobile device:
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
But I want my template to look like this on mobile device:
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
Is there any way to achieve this without having to change my initial structure?
You can use the col push & pull class to achieve this quite easily. There is a good explanation here which should help.
To spell it out, you need to move B above A, then pull A across 9 cols for large screen (col-lg-pull-9) and push B across 3 cols for larger screens( col-lg-push-3). Therefore, the code will be:
<div class="row">
<div class="col-sm-12 col-lg-9 col-lg-push-3">
B
</div>
<div class="col-sm-12 col-lg-3 col-lg-pull-9">
A
</div>
</div>
OK, reading your comments below, you stated you can't changes the order of the divs. Can you use jQuery? If so, try this:
$(document).ready(function(){
if ($(window).width() < 768){
alert("mobile");
$("#divB").insertBefore("#divA");
}
else {
alert("not mobile");
}
});
http://jsfiddle.net/humotrj0/173/
You can change the order in the HTML (first div B), being this the order for mobile, and change the order in desktop with col-lg-push-* and col-lg-pull-*.
See http://getbootstrap.com/css/#grid-column-ordering
You need to use the col-lg-push and col-lg-pull options
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<div class="row">
<div class="col-lg-9 col-lg-push-3">
B
</div>
<div class=" col-lg-3 col-lg-pull-9">
A
</div>
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right. View it working in Bootsnipp
I have pagination working in my app. I display 10 elements per page. Now I would like to format these 10 elements into 2 columns (2x 5 elements per 1 page).
I don't know how to start.
<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="«" data-next-text="»"></pagination>
Code reference:
http://jsfiddle.net/eqCWL/224/
In your fiddle you are using the older bootstrap2 css, so I'll use it here for the solution:
First, you need to read the bootstrap documentation on scaffolding/grid system
format your HTML to show two lists in two rows:
<div class="row">
<div class="span6">
<li>{{data.name}}</li>
</div>
<div class="span6">
<li>{{data.name}}</li>
</div>
</div>
then, you will need to set the first ng-repeat to show only half of items:
ng-repeat="data in filtered = (list | filter:search) |
startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit/2"
notice limitTo:entryLimit/2
and the second one to show the rest:
ng-repeat="data in filtered = (list | filter:search) |
startFrom:(currentPage-1)*entryLimit + entryLimit/2 | limitTo:entryLimit/2"
you need to change the startFrom filter, to start entryLimit / 2 items later:
startFrom:(currentPage-1)*entryLimit + entryLimit/2
You can test a working example here
I have the following HTML code:
<table id="userPlaylistTable" cellspacing="0" cellpadding="0">
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 1 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 2 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 3 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
Basically, now if I define my css as:
css=table#userPlaylistTable div[class='listArrow up']
It picks the first such element it finds. But, how would I have to define my css, so that it picks second element of this type?
So, basically how would I define my css to pick a particular element, if multiple elements of the same kind exist on the page?
Could someone please help me with this query?
Thanks.
You need to do something like:
css=table#userPlaylistTable>div[class='listArrow up']:nth(1)
css=table#userPlaylistTable>div[class='listArrow up']:nth(2)
This will give you the 2nd and the 3rd instance
add [1] which is the index into the array. usually 0 based, so [1] is the second element
css: #userPlaylistTable .listArrow.up:nth-of-type[2]
Instead of [2] replace with item you want to select
Description:
id is # -- #userPlaylistTable
class by . listArrow up, but we have space between class name so replace space with . -- .listArrow.up
:nth-of-type(n) will select child