I need to use a transfer component from antd for a page, but the default size is way too small. I have tried to change it using the listStyle and style attributes. I've read through the documentation and don't see any other style options. When it's rendered, I can see that I need to change the size of the "ant-transfer-list"
<TransferComponent
style={{
height:1000
}}
listStyle={{
width: 1000,
height: 1000,
}}
formattedInput={this.state.formattedObjectTypes}
onSelectChange={this.onSelectChange}
sourceName="Available"
targetName="Selected"
/>
My jsx is as shown. I've tried both height:1000 and height:"1000px" with no change on either listStyle or style.
The property listStyle works for me:
<Transfer
listStyle={{width: 500}}
/>
Related
While working with Quasar in Vue, I'm using a q-popup-edit to get input from the user. I've tried Googling this, and read through the documentation, but I can't see how to set the style of a q-popup-edit object. We have access to the content-style for the popup when it's open, but the only thing we can set on the object itself is the height and width. Is there any way to set colors, font size, anything like that?
Here's my current code, in case it helps:
<q-popup-edit v-model="newName" auto-save v-slot="scope" style="font-min-size: large">
<q-input v-model="newName" dense autofocus counter #keyup.enter="saveName" />
</ q-popup-edit>
You can apply height and width in the parent element and it will work.
<div class="cursor-pointer" style="height:120px;width:120px">
{{ label }}
<q-popup-edit v-model="label" auto-save v-slot="scope">
<q-input v-model="scope.value" dense autofocus counter #keyup.enter="scope.set"></q-input>
</q-popup-edit>
</div>
https://codepen.io/Pratik__007/pen/bGLjjVY
I'm trying to use span to allow the events using grid-column to spread across multiple days in a calendar, but this seems to only work in css or styled-components. It does not work in inline-styles. Anyone have any idea to make this work with inline-styles?
codesandbox: https://codesandbox.io/s/react-event-calendar-8v9o1?file=/src/Components/CalendarEvent.js
Code Snippet:
<span
className="calendar-event-label"
styled={{gridColumnStart: col, gridColumnEnd: `span ${colSpan}`}}
onClick={onClick}
>{title}</span>
Use Style instead of Styled
style={{
gridColumnStart: col,
gridColumnEnd: `span ${colSpan}`
}}
I checked the changes in the code sandbox it works.
Working: https://codesandbox.io/s/react-event-calendar-forked-4s0h9
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically I want to replace the image with a new image depending on screen size. My assumption is that I want the image set up as its own component to start...
import React from "react";
export default function ResponsiveLogo() {
return(
<div>
<img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder"
alt="logo placeholder"/>
</div>
)
}
I believe that I'm supposed to handle this using useMediaQuery but am unsure of the syntax. As I haven't used useMediaQuery before I'm looking for one example of doing this at one breakpoint so I know how to proceed.
as an example lets assume we want to change images for any screen smaller than Material-UI's "sm" breakpoint (600px), and we want to swap in this image: "https://dummyimage.com/200x200/4169e1/fff.png&text=Logo+Placeholder"
Thanks for any direction!
I found an easy way to do this on MUIv5 using MUI components, but you have to use the MUI Box component for the image element so you can access the sx prop. (They use Box for image examples in the official docs so I think it's recommended anyway)
The idea being, instead of setting the image source with the 'src' attribute, you set it via the 'content' CSS property within the sx prop. This way you can easily access MUI theme breakpoints when setting the image url:
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
There are several ways to accomplish this. If your image was a background for example you could change it the same way you use a CSS breakpoint to change any other CSS attribute.
However, since you're using an image element in the HTML, you can either watch for window size changes in javascript or use an HTML solution.
Option #1 Javascript:
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
There are a lot of pitfalls to this approach. It can destroy performance if it's not implemented correctly and you need to figure out the sizing of the correct elements in JS.
Option #2 srcset or picture element and srcset
This is a way to build responsive images directly in HTML that allows multiple file paths for an image. An image on its own with srcset is a bit complicated (explained better in the link) so I prefer a <picture> element.
Inside your React component you would have something like this:
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
This is cool in that you can have as many source lines as you want each with a media query style condition. They can even be different file types and you can set each of them dynamically just like you would any other HTML element attribute.
The only catch is that <picture> is an HTML5 element so you need to target a newer browser for this to work.
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text control in flex as easy as possible? Thanks
.rte{
...
backgroundImage: "assets/globe.jpg";
}
and
<mx:RichTextEditor id="rt"
...
styleName="rte"
/>
Unfortunately, you can't.
The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.
Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:
<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
<mx:Image width="100%" height="100%" />
<RichTextEditor />
</Canvas>
The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.
That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.
EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.
It can be done by setting RTE TextArea's backgroundAlpha to 0
<mx:RichTextEditor id="richTextEditor"
backgroundImage="#Embed('<imagepath>')" width="100%" height="100%"
initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
/>
Note:Please modify image path and you can also set style through CSS/Style tag
Hopefully this will helps