<div class="flex overflow-y-auto">
<div class="w-1/2 bg-red-500 ">w-first</div>
<div class="w-1/2 bg-blue-500">w-second</div>
<div class="w-1/2 bg-green-500">w-third</div>
<div class="w-1/2 bg-yellow-500">w-fourth</div>
</div>
I wants 2 div per row, i can use a div wrap to (first, second) div, then use w-1/2 that times it works fine.
but if i have unlimited div its not possible to wrap all div in same time.
It looks like a perfect scenario for the grid layout.
While flex is designed for one-dimensional layouts, for a two-dimensional layout like the one you have, grid would be a better fit.
Switch the flex utility with the grid utility. Then, specify the number of columns by using grid-cols-2. This utility will limit the number of elements of each row to 2.
You can read more about the grid-cols-{n} utility here.
<div class="grid grid-cols-2 overflow-y-auto">
<div class="bg-red-500">w-first</div>
<div class="bg-blue-500">w-second</div>
<div class="bg-green-500">w-third</div>
<div class="bg-yellow-500">w-fourth</div>
</div>
Tailwind-Play
Related
I want to let rows intercalate each other, as represented below:
The problem is at the moment I can't intercalate the rows, so I end up having a layout that looks like this:
Or a more real example of what I have:
I tried a lot of ways, including Grid Auto Flow, Inline Grid and also making the child Inline Block but nothing seem to work. From what I inspected each column is as big in height as the one in right, which I don't want.
I can't think of a solution to achieve the desired output using grid layout.
A possible way to do it would be using w-1/2 to set the width of both columns and to absolutely position the second column at the top right corner of the parent. Please check the code snippet below for example.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
<div class="w-1/2">
<div class="w-full h-20 bg-blue-400"></div>
<div class="w-full h-10 bg-yellow-400"></div>
<div class="w-full h-36 bg-red-400"></div>
</div>
<div class="absolute right-0 top-0 w-1/2">
<div class="w-full h-40 bg-green-400"></div>
<div class="w-full h-36 bg-indigo-400"></div>
</div>
</div>
I have a very simple set up in place, that looks like this:
<div class="row">
<div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
<div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
</div>
</div>
The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?
I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(
Thanks.
I came up with a solution that works in my case, basically using a row property called justify-content-around like so:
<div class="row justify-content-around">
<div class="col-lg-4"></div>
<div class="col-log-4></div>
</div>
<div class="row">
<div id="whoarewe" class="col-md-4 offset-md-2"></div>
<div id="whatwedo" class="col-md-4"></div>
</div>
Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Otherwise you can set the column width and do some flex magic by justifying content as per your need
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
I would like to change the style of dates in my month calendar view which have events.
This is the design I'm developing:
So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution to this, most commonly I find examples for creating a CustomDateCell for dateCellWrapper which will conditionally style cells, here's one example I've tried:
React Big Calendar how to style a single day in the month view
This changes the style of .rbc-day-bg not .rbc-date-cell. The markup on RBC is complex, because the devs made it for events which can stretch over multiple days. This means that the background divs are in a different parent to the datecells. I'd prefer not to traverse/manipulate the DOM to style these cells.
Surely there must be a way to style the datecells? the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with eventPropGetter?
EDIT
The HTML is as follows. I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell
<div class="rbc-month-row">
<div class="rbc-row-bg">
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
</div>
<div class="rbc-row-content">
<div class="rbc-row">
<div class="rbc-date-cell">13</div>
<div class="rbc-date-cell">14</div>
<div class="rbc-date-cell rbc-now rbc-current">15</div>
<div class="rbc-date-cell">16</div>
<div class="rbc-date-cell">17</div>
<div class="rbc-date-cell">18</div>
<div class="rbc-date-cell">19</div>
</div>
</div>
</div>
rbc-event's exist in a different row to the rbc-date-cell, in this markup there are events on the 23rd and 24th. I don't want to traverse the DOM to conditionally style divs as this isn't a very React way of doing things, it should be done before rendering if possible
<div class="rbc-row-content">
<div class="rbc-row ">
<div class="rbc-date-cell">21</div>
<div class="rbc-date-cell">22</div>
<div class="rbc-date-cell">23</div>
<div class="rbc-date-cell">24</div>
<div class="rbc-date-cell">25</div>
<div class="rbc-date-cell">26</div>
<div class="rbc-date-cell">27</div>
</div>
<div class="rbc-row">
<div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
</div>
</div>
checkout this sandbox code https://codesandbox.io/s/73ky8rj2qj
if that's what you want to achieve so the main idea is to override month dateHeader and then with every dateHeader to render check if its date prop is between any event startDate and endDate and render it with the desired style
How to place another div below the <div main-title>My App</div> such that the content in second div should come below the content in first div.
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
Try wrapping in another div that has display block.
Like this:
<div style="display:block;">
<div main-title>My App</div>
<div other-div>Something</div>
</div>
I am trying to understand Angular Material layout. I have a section of HTML that is always floated to the right and it contains several lines in a column. That section is rendered as expected when using a smaller device. However, when the device is a small hand-held, in addition to adjusting the right-floating section, I don't want to include some of the lines in that column.
For example, on a large screen device the layout would be:
left-panel middle-panel right-panel-line 1
right-panel-line 2
right-panel-line 3
and then on a small screen device the layout would be:
left-panel
middle-panel
right-panel-line 1
where the 2nd and 3rd lines in the right-floating panel is not displayed.
Question: how do I conditional use the Angular Material layout directives to do this?
Thanks,
-Andres
Available Plunker here
As you can see in angular-material layout extra options documentation, you can conditionally show and hide elements depending on the screen size.
Code for reference, see plunker for the complete details:
<div layout="row" layout-xs="column">
<div flex>left-panel</div>
<div flex>middle-panel</div>
<div layout="column" flex>
<div flex>right-panel-line 1</div>
<div flex hide-xs>right-panel-line 2</div>
<div flex hide-xs>right-panel-line 3</div>
</div>
</div>
Hope it helps.
Here you go - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column">
<div style="background:red" flex></div>
<div style="background:green" flex></div>
<div flex layout="column">
<div style="background:purple" flex></div>
<div style="background:yellow" flex hide-xs></div>
<div style="background:cyan" flex hide-xs></div>
</div>
</div>
The trick is to use layout and hide depending on screen size.
https://material.angularjs.org/latest/layout/container
https://material.angularjs.org/latest/layout/options