I want to blacklist the height property for all img selectors in the stylesheet, so the aspect ratio of the image is always respected, is it possible with stylelint?
It isn't possible to do this with confidence as stylelint only analyses your CSS code and doesn't understand your HTML structure.
However, it is possible to create a plugin that disallows the height property for the img type selector. This could catch some instances. The plugin could be called stylelint-rule-selector-property-blacklist. For example:
"plugin/rule-selector-property-blacklist": { "img": ["height"] }
You can use the built-in declaration-property-value-blacklist rule as a blueprint for the plugin.
But this wouldn't catch instances where a image is targeted by another means, though. For example:
<p><img class="can-be-anything" src="my-image.jpg" /></p>
/* target via class name */
.can-be-anything { height: 10px; }
/* target via universal selector */
p > * { height: 10px }
Related
I have a list of arrays in a table displayed using repeat.for. I need to display tr row in blue color when "receiving.supplier === Scrap Separated" and blue color row when the result is "receiving.supplier === Scrap Sorted". Is there any way I can do it with if.bind but for String that I got in network tab. Here is my network and code.
I think this is purely a CSS question. You can have CSS rules based on [data-supplier] and assign a different background color based on the value of the supplier property.
The example CSS rules can be as follows.
tr[data-supplier="Scrap Separated"] {
background-color: blue;
}
tr[data-supplier="Scrap Sorted"] {
background-color: green;
}
And then bind the data-supplier property in the markup.
<tr data-supplier="${recieving.supplier}">
...
</tr>
Note that you cannot possibly nest div directly under tbody as that will be evicted by browser being non-conformed element as per the expected schema.
What I want to achive
I am using gatsby and want to design an image gallery. Clicking on one of the images shall open a modal, which: (1) is showing the image in maximum possible size, so that it still fits into the screen and (2) is centered in the screen.
My Code
/* imagemodal.js */
import React from 'react'
import * as ImagemodalStyles from './imagemodal.module.css'
import { Modal } from 'react-bootstrap'
import Img from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'
export default function Imagemodal() {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "images/mytestimage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1200) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return (
<div>
<Modal
show={true}
centered
className={ImagemodalStyles.imageModal}
dialogClassName={ImagemodalStyles.imageModalDialog}
onHide={(e) => console.log(e)}
>
<Modal.Header closeButton />
<Modal.Body className={ImagemodalStyles.imageModalBody}>
<h1>TestInhalt</h1>
<Img fluid={data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
}
/* imagemodal.module.scss */
.imageModalDialog {
display: inline-block;
width: auto;
}
.imageModal {
text-align: center;
}
.imageModalBody img {
max-height: calc(100vh - 225px);
}
The Problem
The image does not scale to the screen size. The image is either too big - so it flows over the vieport - or it is too small. Secondly, the modal size does not respond to the image size correctly and / or is not centered.
What I tried
I used this suggestion for the CSS: How to limit the height of the modal?
I tried as well dozens of other CSS parameter combinations. But I could not find a working solution.
I tried to format the gatsby-image directly with a style-tag.
I tried as well react-modal but had similar problems.
Does anyone have a good solution to show a gatsby-image in full screen size in a responsive modal? For me it is okay to use either the bootstrap-modal or react-modal - or any other suitable solution.
Edit
In the end I ended up with a workaround. I used react-image-lightbox and took the Image-Source from gatsby-image as the input for lightbox. My component gets the data from the graphQL query in the props via props.imageData.
This works quite well for me:
import Lightbox from 'react-image-lightbox';
...
export default function Imagegallery(props) {
...
const allImages = props.imageData.edges
const [indexImageToShow, setIndexImageToShow] = useState()
...
return(
<Lightbox
mainSrc={allImages[indexImageToShow].node.childrenImageSharp[0].fluid.src}
...
/>
Special thanks to #FerranBuireu to point me to the right direction
Assuming that the functionality works as expected, as it seems, it's a matter of CSS rules, not React/Gatsby issue. The following rule:
.imageModalBody img {
max-height: calc(100vh - 225px);
}
It Will never be applied properly, since gatsby-image creates an output of HTML structure of nested <div>, <picture> and <img> so your rule will be affected by the inherited and relativity of the HTML structure. In other words, you are not pointing to the image itself with that rule because of the result HTML structure.
You should point to the <Img>, which indeed, it's a wrapper, not an <img>.
return (
<div>
<Modal show={true} onHide={handleClose} centered className={ImagemodalStyles.imageModal} dialogClassName={ImagemodalStyles.imageModalDialog}>
<Modal.Header closeButton />
<Modal.Body>
<Img className={ImagemodalStyles.imageModalBody} fluid={props.data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
The snippet above will add the (spot the difference, without img):
.imageModalBody {
max-height: calc(100vh - 225px);
}
To the wrapper, which may or may not fix the issue, but at least will apply the rule correctly. It's difficult to know what's wrong without a CodeSandbox but you will apply the styles correctly with this workaround.
Keep always in mind that when using gatsby-image, the <img> it's profound in the resultant HTML structure so your styles should apply to the outer wrapper of it.
I have Matlab R2015a. The font size in the Help browser is too small and there are no options to increase it. They say use ctrl and +, but as soon as you navigate, the font is back to its miniature size.
Is there a way to increase the font permanently? I know that some settings can be changed by code, but I have no idea how to do this.
The help font size can be tweaked in the site5.css and doc_center.css as you mentioned. Quoting Hans R's post from this discussion:
For lasted versions of matlab, there is no 'HTML Proportional Text '
option.
Low level control of help font size can be found within:
%matlabroot%\help\includes\product\css\site5.css
/* Page Globals */ html { min-height:100%; margin-bottom:1px; } html
body { height:100%; padding:0px; margin:0px; font-family:Arial,
Helvetica, sans-serif; font-size:62.5%; color:#000; line-height:140%;
background:#fff; overflow-y:scroll; }
" change 'font-size:62.5%' to something larger, e.g. 'font-size:100%'
For code environment:
code environment is tweaked in the style file doc_center.css (same
folder as site5.css). Search for the line:
/* Fix for from site5, deprecating */ code { padding:0px;
margin:0px; color:inherit; font-size:12px; border:none;
background:transparent none; display:inline; }
I deleted the font-size setting from this line, which allowed the
environment to be set by the default setting in
site5.css.
Which should change Matlab's font size in the help window.
An alternative to the blodoll's answer.
In the same file %matlabroot%\help\includes\product\css\site5.css
There are three lines
* html pre { font-size:1.1em; }
* html tt { font-size:1.1em; }
* html code { font-size:1.1em; }
where the stars indicate comments. Uncomment those by deleting stars, and adjust the sizes the way you like it.
If you don't have those lines, may be you could try adding them.
My site5.css has, among others, following code in it:
/* New Reset */
/* Reset */
pre { font-size:100%; }
tt { font-size:100%; }
code { font-size:100%; }
pre { font-size:1.2em; }
tt { font-size:1.2em; }
code { font-size:1.2em; }
html pre { font-size:1.1em; }
html tt { font-size:1.1em; }
html code { font-size:1.2em; }
pre { *font-size:1.1em; }
tt { *font-size:1.1em; }
code { *font-size:1.1em; }
pre { font-size:1.0em\9; }
tt { font-size:1.0em\9; }
code { font-size:1.0em\9; }
Which kind of suggests, that matlab developers used it to replace the depreciated reset.css. If yours site5.css doesn't have it, put it there and adjust the way it suits you.
I used this way on MATLAB 2016a and fortunately it works correctly.
To adjust the font size in the Help browser or MATLAB web browser, right-click the page and select Zoom In or Zoom Out. You cannot change the font type or style
I use the plugin jbimages, everything goes ok but I need to set a defined width for image, width = 600px. Exists a solution?Help me please.Thnx
you can set the width in your css on the pages you upload them? for example if the images are all in a div wrapper , use
.wrapper img {
width: 600px;
height: auto;
}
I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.
Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Actually, the class that defined last in the css - is applied on your div.
check it out:
red last in css
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
vs
blue last in css
.red { color: red; }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
If you asking about they have same property then as per the CSS rule it's take the last statement.
<div class="red green"></div>
CSS
.red{
color:red;
}
.green{
color:green;
}
As per the above example it's take the last statement as per css tree which is .green.
The class that is defined last in the CSS have priority, if nothing else applies.
Read up on CSS priority to see how it works.
Many classes can be assigned to an element, you just separate them with a space
<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>
Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.
So if you have
.myClass
{
background: white;
color: blue;
}
.keepOnClassing
{
color: red;
}
The red color will be used, but not the background color as it was not overwritten.
You must also take into account CSS specificity, if you have a more specific selector, this one will be used:
.myClass
{
background: white;
color: blue;
}
div.myClass.keepOnClassing
{
background: purple;
color: red;
}
.stayClassySanDiego
{
background: black;
}
The second selector here will be used as it is more specific.
You can take a look at it all here.