I am currently working to replicate a design and I am using css grid for the layout.
I applied the css gap attribute and gutters were created between the rows and columns. However, a gutter was created outside the last row and I have been battling to fix it. from what I know about grid gap and also from css Tricks,the gutters are only created between the columns/rows, not on the outer edges.
Following is a screenshot of how it looks like after my implementation current look You can notice the gutter at the bottom of the last row on the right. I do not want the gutter there, I just want the row to take up the space at the bottom. This is the code for the grid container.
.App {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 25px;
width: 70%;
height: 55%;
background-color: var(--pry-blue);
}
Related
I am trying to create a complex incremental slide in Rmarkdown using the xaringan with ninjutsu for column formatting. I cannot (to my knowledge) use the standard approaches to incremental slides as elements are changing in multiple places (e.g., more text on the left hand column and an image that changes in the right hand column). Instead, I am recreating the entire slide each time. The problem I am having is that bullet lists change formatting as I go from one bullet point to two (even if I do not have multiple columns). Specifically, the spacing from text to bullets increases when I add a bullet point.
A simple document to reproduce the problem is:
---
title: "Test of bullet alignment"
output:
xaringan::moon_reader:
css: ["default", "ninjutsu"]
---
- A test
---
- A test
- B test
After knitting this document, when you go from the 1st to the 2nd slide the spacing from the bullet point to the text changes. This causes a noticeable change in the word wrapping that makes the slide look non-incremental.
Does anyone understand what is going on and have a solution or workaround?
You have such inconsistent space because you are adding extra space between two bullet points, which leads to wrap the texts A test and B test with paragraph html element p and ninjutsu.css contains the following line for styling the paragraph element.
.content > h1, h2, h3, p { padding-left: 2%;padding-right: 2%; }
So when you are writing a single bullet point, that is not getting wrapped with p but in the next slide when you are writing two bullet points with an extra space between them they are getting wrapped with p and therefore, getting 2% left and right padding. And hence the problem.
But in default xaringan (in default.css) there's no such style rule for paragraph elements in slide content class. That's why, in the base case, there's no such space inconsistency.
Solution
Now a possible solution could be to overwrite the css rule for p elements inside the list elements li and write your own rule for the desired padding (vertical and horizontal), which will work for both the below cases,
- A test
- B test
Or
- A test
- B test
Rmarkdown file
---
title: "Test of bullet alignment"
output:
xaringan::moon_reader:
css: ["default", "ninjutsu"]
---
```{css, echo=FALSE}
li p {
display: inline !important;
padding: 0px !important;
}
li {
padding: 6px 3px;
}
```
### This is non tight list (with space between items)
- A test
---
###This is non tight list (with space between items)
- A test
- B test
---
### This is tight list (with no space between items)
- A test
---
### This is tight list (with no space between items)
- A test
- B test
In my application I need to set the rows to show the text area columns in more than one line (say 3 lines). However I don't want the text area column contents in one single line, despite the row height is increased. It should be wrapped to the number of lines.
If I turnoff fixed rowheight attribute. Then each row has a different height. Thats not what I'm expecting
I tried below inline css, but it is not changing
#static_id .a-GV-cell {<br/> height: 80px;<br/>}<br/>.wrap-cell {<br/> max-height: 64px;<br/> white-space: normal;<br/> overflow: hidden;<br/>
However this still only shows the text area column contents in one single line, despite the row height is increased.
thanks in advance
I want to color the background bars (or the entire cells) of the table as shown in the appended screenshot based on the "Group-By"/dimension value (red for "rot", yellow for "gelb" and green for "grün").
I was able to color the metric-part of other visualizations with label_colors, but I have not yet found a way to color the cells of the table based on a "dimension".
Is there a way to do this?
As of now:
EDIT: I wanted to color it the following way (edited with paint):
This is a tad hacky, but you can add a markdown component and add the following markup:
<style>
th {
color: red; /* or whatever color/hex code you want */
}
</style>
The markdown component will be blank after you add this--i.e. there will just be a blank markdown block-- so you may want to add some copy. Alternatively, if you already have a markdown block, you can add it there, and it won't appear as long as you remember the <style></style> tags.
I want to make the pictures of the product smaller. I also want to add another product per each row so it is 4 products instead of 3 products per row.
My Website:
http://www.notsomefantasy.com/
You can set 4 products per row on the desktop view for this particular theme by adding the following piece of code to the bottom of Customize Design > Advanced > CSS:
#media screen and (min-width: 1025px) {
.product-card {
width: 25%;
}
.product-link .product-image {
height: 50%;
}
}
I'm trying to achieve a 5px gradient around all edges. I've found multiple ways to do this in all browsers except for IE (-mos-border-colors and apply 5 separate colors, border-image, etc...).
I've tried CSS3 Pie, but can't seem to get it to function at all in IE (any version). There are multiple sizes for this column, so images would be a hassle.
Any one have any solutions for this?
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
Maybe box-shadow is an option for you, enabling monochrome gradients/shades…
header {
box-shadow: 0 1em 2em #fff;
-webkit-box-shadow: 0 1em 2em #fff;
-moz-box-shadow: 0 1em 2em #fff; }
Does it really need to look identical in every browser?
Some cross browser solutions: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Please note not all browsers support CSS gradient. To be safe, you shouldn't rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.
I've tried CSS3 Pie, but can't seem to get it to function at all in IE
(any version).
CSS3-Pie is a bit tricky. Try adding position:relative; to the element you want to apply border image to.
csspie cannot resolve relative paths from your stylesheet to your images. If you do not specify absolute paths from document root to your images, css pie cannot find them.
See this issue here:
http://css3pie.com/documentation/known-issues/#relative-paths