The <page-header> and <page-footer> stretch across a variable number of <page-panel> columns using...
page-header,
page-footer {
grid-column: 1 / -1;
}
This line of CSS is auto generating columns based off of the fixed 200px width.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
How to change 200px to a variable width to stretch to fill up remaining space without wrapping the columns and without adding extra markup like a parent element?
auto, auto-fit, auto-fill, 1fr, 100% all make the columns into full width rows which is undesirable.
Ideas/suggestions/solutions are welcome.
Thank you much!
CodePen: https://codepen.io/dragontheory/pen/MWOKpNr
HTML:
<page-container>
<page-header>
<span>HEADER</span>
</page-header>
<page-panel></page-panel>
<page-panel></page-panel>
<page-panel></page-panel>
<page-footer>
<span>FOOTER</span>
</page-footer>
</page-container>
CSS:
page-container {
display: grid;
gap: 1rem;
padding: 1rem;
grid-template-rows: auto 1fr auto;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
page-container > * {
display: grid;
}
page-header,
page-footer {
grid-column: 1 / -1;
padding: 1rem;
}
page-panel {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
Related
I'm wondering whether it's possible to specify a grid cell to overlap another area of the grid, without having to explicitly specify the row and column for the cells it overlaps.
Consider a two-week calendar:
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
</div>
Using grid:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
So far so good:
I now want to add a range highlight cell:
<!-- ... -->
<span>13</span>
<span>14</span>
<span class="range"></span>
</div>
It should span Wednesday-Sunday on the first week:
.range {
grid-column: 3/8;
grid-row: 1;
width: 100%;
height: 100%;
background: skyblue;
}
Unless I now explicitly go and specify the row and col for each of the five affected day cells, there is no automatic overlap.
To get the overlap I want, I need to add:
.calendar span:nth-child(3) {
grid-row: 1;
grid-columN: 3;
}
.calendar span:nth-child(4) {
grid-row: 1;
grid-columN: 4;
}
/* etc... */
Result:
Is there any way to say that all cells should flow automatically, in order, unless otherwise stated, even if they overlap?
Snippet
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 30em;
}
.range {
grid-column: 3/8;
grid-row: 1;
width: 100%;
height: 100%;
background: skyblue;
z-index: -1;
}
/* I don't want to do this: */
.calendar span:nth-child(3) {
grid-row: 1;
grid-columN: 3;
}
.calendar span:nth-child(4) {
grid-row: 1;
grid-columN: 4;
}
.calendar span:nth-child(5) {
grid-row: 1;
grid-columN: 5;
}
.calendar span:nth-child(6) {
grid-row: 1;
grid-columN: 6;
}
.calendar span:nth-child(7) {
grid-row: 1;
grid-columN: 7;
}
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="range"></span>
</div>
You only need to position the range absolute, this will take it out of flow. (You also need to set the calendar position relative)
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 30em;
position: relative;
}
.range {
grid-column: 3/8;
grid-row: 1 / span 1;
width: 100%;
height: 100%;
background: skyblue;
z-index: -1;
position: absolute;
}
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span class="range"></span>
</div>
I have a blog subsite on a SharePoint Online (2013) site that by default has 3 web part zones: BlogNavigator, Left and Right (ordered from left to right).
The layout of the zones is frustrating, because the Left zone, which houses the actual content for the site, is relatively narrow considering the amount of available space to the right of the Right zone.
When I move all the Web Parts from the Right zone into BlogNavigator, the Left zone maintains its size, even though there is room to expand rightward.
I have tried manually declaring the Left zone ContainerWidth on the page file in SP Designer, I have tried applying a CSS file to the page to set the width, but nothing seems to work.
I have even removed all references to the Right zone on the page file, removing it completely, but the Left zone still remains its original width.
Is there some way I can alter this zone?
The out-of-the-box SharePoint page layouts use a peculiar grid framework to layout the different webpart zones.
This framework, which is defined in the layout css, uses display: table and display: table-cell to position the zones in the horizontal layout.
Table layouts usually result in odd sizing issues similar to how you have described.
In a project that I have worked on recently, I needed to fix the table layout to be more rigid so that there were no sizing issues. The site I was working on was a Publishing site so I am not sure if the classes are the same on you blog but here is the CSS I used to tweak the grid framework.
#DeltaPlaceHolderMain .ms-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
width: auto; }
#DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; }
#DeltaPlaceHolderMain .tableCol-75,
#DeltaPlaceHolderMain .tableCol-33,
#DeltaPlaceHolderMain .tableCol-25,
#DeltaPlaceHolderMain .tableCol-50 {
width: 100%;
display: block;
min-width: 0; }
#contentBox {
padding-left: 15px;
padding-right: 15px; }
#titleAreaRow {
display: table; }
#contentRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
#sideNavBox {
margin-right: 5px; }
#contentBox {
min-width: 0;
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0;
flex: 1 0; }
#s4-titlerow,
#contentRow {
max-width: 1450px;
margin: 0 auto; }
#media screen and (min-width: 1020px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 66.666%; }
#DeltaPlaceHolderMain .tableCol-33 {
width: 33.333%;
}
#DeltaPlaceHolderMain .tableCol-25 {
width: 33.333%; }
#DeltaPlaceHolderMain .tableCol-50 {
width: 50%; } }
#media screen and (min-width: 1340px) {
#DeltaPlaceHolderMain .tableCol-75 {
width: 75%; }
#DeltaPlaceHolderMain .tableCol-25 {
width: 25%; } }
* {
outline: none; }
html {
-webkit-text-size-adjust: 100%; }
/* Sidenav */
#sideNavBox {
min-width: 180px;
max-width: 300px;
width: auto; }
I have a div with a background image in it. I have to specify a height in px for it to show. But I want it to show with height auto as the width resizes. I am stuck.
When I have height auto it just does not show the image at all...
#slider-shadow1 {
z-index: 9999;
margin: 0 auto;
width: 100%;
height: auto;
background: url(images/layouts/shadow2.png) center no-repeat;
background-size: 100% 100%;
position:relative;
display: inline-block;
background-size:cover;
overflow: hidden;
}
Height: auto means the height of element is exactly the same as elements content. If you have empty element, its height is zero. And you can't see background image (you see exactly 0px of them).
I'm trying to get equal height columns on my responsive grid using the gallery mixin for SUSY. To do that, I set the container "display: table" and the column "display: table-cell". This works for me if I do not use the mixin, but fails as soon as I turn on the mixin. The mixin works if I have set the height in pixels, but not if I set the height using 100%;
I'm using:
susy (2.1.3) and
sass (~> 3.3)
This works with or without SUSY:
.ttable {
#include container;
padding: gutter();
#include clearfix;
.ttd {
#include gallery(3 of 12);
}
}
.ttable {
display: table;
height: 500px;
border: 1px solid #BF0D3E;;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 500px;
}
This doesn't work with SUSY, but works with the mixin turned off:
.ttable {
display: table;
height: 100%;
border: 1px solid $fuschia;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 100%;
}
The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the gallery mixin, and use individual mixins/functions to set width/gutters instead (I think only inside and inside-static gutters will work with table display).
.ttd {
#include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}
I'm trying to change the font color of just the active tabs on Nivo slider.
I have tried this but, it's not working;
.nivo-controlNav a:hover, .nivo-controlNav a.active {
background:url(../image/a_active.png) repeat-y 0px 50%;
--> color:#000 !important;
}
I have also, tried;
.nivo-controlNav a.active {
color:#000 !important;
}
the file I'm editing is the slideshow.css
Go check these styles:
.nivo-controlNav a h1 {
color: #E4007B;
font: bold 15px/20px Arial;
text-transform: none;
}
and add these after:
.nivo-controlNav a.active h1 {
color: #000;
}
This should work.