I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
Related
This is my code and somehow I am not able to get the image loaded.
import React from 'react'
import styled from "styled-components"
function Section() {
return (
<Wrap>
</Wrap>
)
}
export default Section
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
`
What should I do?
For the direct link of an image stored in Google Drive:
https://drive.google.com/uc?export=view&id=file's ID
So the URL of your image should be:
https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG.
Then, use it via CSS background-image: url('https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG')
See, Displaying files (e.g. images) stored in Google Drive on a website
When you use background-image, you should use url() with URL.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");
Edit
Your Url is not Image so you can not load image with your Google Drive Url.
You have set the wrong value for the CSS property.
✓ Use This:
background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");
✘ Instead of your this code:
background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
As in your current question I see you have forgotten to put url().
I am working on a project in ReactJS. I have to create multiple themes feature in this website. Color code of all themes are coming from an API.
I have used variables in SCSS and imported them throughout the project to set color. For example
$primary-color: #fec00b;
but now I need to set value of that primary-color dynamically using color code that I am receiving in API response.
So how I can set it programatically?
If you want to change values dynamically then SASS it is not suitable for this task, because of it should be compiled into CSS before it can be used by browser.
It is much more better to use native css variables for such tasks - they are dynamic, you could change them any time both from css and from js. And browser support is also very good (unless you must support IE).
Here's a little example of how to change such vars:
let $color = document.querySelector('#color');
$color.addEventListener('change', (e) => {
let color = e.target.value;
document.querySelector("html").style.setProperty('--box-bg', color);
})
html {
--box-bg: gold;
}
.box {
background: var(--box-bg);
width: 100px;
height: 100px;
border-radius: 4px;
margin-bottom: 16px;
transition: background .3s ease-in-out;
}
<div class='box'></div>
<label>
Choose color
<input type='color' id='color' />
</label>
I am using react bootstrap Carousel in my react js code. I am successfully able to customize react bootstrap Carousel indicators. By using below code..
div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
}
But I am not able to change the color of active class for indicator. I have tried this
div.crausal ol li.active{
background-color: blue !important;
}
But it does not work.
This is my carousel class.
<Carousel className={css_class.crausal} touch={true} controls={false}>
// Carousel items goes here //
</Carousel>
I want to change the color of active class indicator.
If someone can give better carousel option other than react bootstrap to solve this issue that will also do
I found a kind of fix after researching longer. What you can do is add normal bootstrap file in your project, import it in your component file and now react bootstrap classes are overridden by this normal bootstrap import. After that you can customize the normal bootstrap file downloaded in your project (bootstrap.min.css). But this is just a fix.
What you can do is:
div.carousel-indicators .active{
background-color: #E77728 !important;
}
I am using angular.js to build a SPA and angular-material to for the designing the layout. But turns out that angular material icons are not CSS styleable but polymer's icons are. So I want to use polymer icons inside my angular.js app.. I've included polymer.js in my scripts and import core-icons.html but there is an error..
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.
Uncaught TypeError: Cannot read property 'resolveDom' of undefined
How can I use polymer icons inside my angular.js app..??
Angular does not understand ShadowDOM that Polymer makes extensive use of. So when Angular parses and compiles the HTML it does not know what to do which custom elements so it throws an error.
But from Polymer 0.8 this might change and might be compatible with Angular.
One more thing I notices in your Question was that, you added polymer.js instead of webcomponents.js. polymer.js is the Polymer Library which is used in making new elements and interacting with them, where are webcomponents.js is the polyfill for Web components themselves.
I've used polymer icons in an angular project using material angular. In my case I wanted to use the polymer paper-icon-button element as well but I've also done it with just a core-icon element.
I did not need to include polymer.js, just:
polymer.html, core-icon.html, core-icons.html
I used a paper-icon-button so I also included
paper-icon-button.html
and I used am icon from the social set so I included core-icons/social-icons.html as well
for just a core-icon (i had it in a button but i don't think it's necessary)
<button ng-click="toggleLeft()" class="rp-menu-button">
<core-icon icon="menu></core-icon>
</button>
The CSS (LESS):
.rp-menu-button {
background: none;
border: none;
.rp-menu-icon;
}
.rp-menu-icon {
width: 48px;
height: 48px;
color: #toolbar-font-color;
}
Or for a paper-icon-button:
<paper-icon-button class="rp-card-paper-icon" id="share" icon="social:share">
The CSS (LESS):
.rp-card-paper-icon {
text-align: center;
color: #inactive-icon;
&:hover {
color: #active-icon;
}
}
.rp-card-paper-icon::shadow core-icon {
width: 18px;
height: 18px;
}
.rp-card-paper-icon::shadow #ripple {
width: 33px;
height: 33px;
}
.rp-card-paper-icon#share::shadow #ripple {
color: green;
}
So You set the color in the class and the size of the icon in .[class]::shadow core-icon and you can use
.rp-card-paper-icon::shadow #ripple
to style to ripple effect (if you are using a paper-icon-button)
Am facing one issue in sencha touch along with phonegap. Having 'xtype:panel' with property 'cls:topImgPanel' under scss code where am setting background Image for panel.
Login.js
{
xtype : 'panel',
cls : 'topImgPanel',
height : '15%',
docked : 'top',
}
login.scss
.topImgPanel {
background-image: url("img/TOP_Printer_HD1.png") !important;
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
This code seems to running in browsers, but when using phonegap to run it in my android emulator. Images are not visible anymore.
Not able to figure out what's wrong.
After some struggle, if found this link
As mentioned, we need to put images into root folder, so in my login.scss :
.topImgPanel {
background-image: url("../../TOP_Printer_HD1.png") !important; //changed path
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
and i copied my image files under the directory 'phonegap/www'.
Hope this helps !!
Your image url is not ok.
In fact, the url you provide to the path of your image should be related to the location of your CSS file. So you need to change it according to your Android Phone.