We Keep Coding

Vue filepond - Change dimensions

I'm using a Vue Filepond and would like to make it fill the height of its container. I'm also using Vuetify.
If I try setting the values in the CSS it gets overridden by 76px.
fill-height is making the file-pond outer container fill the area but not its content.
<template>
<file-pond
class="fill-height"
name="filePond"
height='100%'
ref="filePond"
label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
accepted-file-types=".csv"
v-bind:files="files"
#processfile="updateUploadedFiles"
#error="errorLoadingFile"
:server="serverOptions"
:allow-multiple="true"
:allow-process="false"
:allow-revert="false"
:drop-on-page="true"
:drop-on-element="false"
:maxParallelUploads="3">
</file-pond>
</template>
I've tried setting the styling to this but it's not making a difference.
.filepond--root,
.filepond--root .filepond--drop-label {
height: 200px;
}

My workaround:
Encircle that on a vuetify v-card
Use the background color that filepond is using
Set min and max height of the working filepond area (file--root) (do not scope the CSS file)
<template>
<v-card flat class="pa-0" style="background-color: #f1f0ef;height: 421px;">
<file-pond
ref="pond"
name="filePondImages"
#init="handleFilePondInit"
:files="imagenesAnuncioFilePond"
#processfile="imagenesAnuncioOnProcess"
#removefile="imagenesAnuncioOnDelete"
/>
</v-card>
</template>
<style lang="scss">
.filepond--root {
display: flex;
flex: column;
min-height: 421px;
max-height: 421px;
}...

How to add hover css style with React.createElement

I'm creating a button with React.createElement:
React.createElement('button', {style: button.key === this.state.customBtnSelected ? customBtnSelected : customBtnUnSelected, onClick: () => {this.handleCustomBtnClick(i)} }, button.label)
So the one of the css styles is in the customBtnUnSelected variable.
But how do I add css classes for the hover state?
So far this isn't working:
const customBtnUnSelected = {
padding: 12,
textAlign: "center",
textDecoration: "none",
display: "inline-block",
fontSize: 12,
cursor: "pointer",
backgroundColor: "#CFD4DA",
border: "1px solid white",
&:hover: {
color: "#fff"
}
};

It's not possible to use the :hover, :after, or :before styling to an element, using inline styling.
The only way to achieve that is to use the <style> tag, or linking an external CSS file to your project.
To insert a style tag, you just place it somewhere in your app. It may be in one of your components, or in the root HTMl file, etc...
return (
<style>{`
.myButton {
padding: 8;
background: black
}
.myButton:hover {
background: grey
}
`}</style>
)
Then, you can just use the myButton class on the className prop of your button.
<button className='myButton'>Click</button>
or
React.createElement('button', {className: 'myButton'})

Regardless of using React.createElement or the JSX syntax, React doesn't support selecting pseudo elements with inline styling.
This question has a few answers with a lot more tips that might help you:
CSS pseudo elements in React

Add svg image as icon for Input of Semantic UI

I'm using Input from Semantic UI in order to create a search input:
import React from 'react';
import { Input } from 'semantic-ui-react';
export default ({ placeholder, onChange }) => {
return (
<Input
icon="search"
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
It works and looks good.
The problem is that I need to change its icon with an svg image. So the svg is imported in the file and used like this:
import React from 'react';
import { Input } from 'semantic-ui-react';
import searchIcon from '../../assets/icons/searchIcon.svg';
export default ({ placeholder, onChange }) => {
return (
<Input
icon={<img src={searchIcon} />}
iconPosition="left"
placeholder={placeholder}
onChange={onChange}
/>
);
};
The problem is that it puts the icon outside of the input and on the right side of it.
It should be inside the input and on the left part.
There were no styling changes after the svg was added, why isn't it in the same position as the original icon?

Most likely semantic-ui adding special styles when we add some icon by attribute "icon". Semantic-ui-react doesn't support custom icons. :,(
In the type declaration we can read:
/** Optional Icon to display inside the Input. */icon?: any | SemanticShorthandItem<InputProps>
My proposition: add some styles to CSS, like me in the sandbox
.input {
position: relative;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
img {
position: absolute;
right: 5px;
width: 10px;
}

I got it working by passing a custom component where the svg image is wrapped by an i tag that has a an icon class:
const CustomIcon = (
<i className="icon">
<img width={38} height={38} src={searchIcon} />
</i>
);
const App = () => {
return (
<Input icon={CustomIcon} iconPosition="left" placeholder="placeholder" />
);
};
The benefit to this approach is that you can change the iconPosition without it breaking the styling with this approach.
To give more context the icon getting displayed at the right position is due to the styles applied to this selector: .ui.icon.input>i.icon. Because it expects an i tag the styles won't be applied if you don't wrap the image between i tags.

How to change underline color of <Select/> by setting classes

const styles = {
inkbar: {
'&:after': {
backgroundColor: 'red',
height: '2px'
}
},
underline:{
'&:before':{
height:'2px',
backgroundColor:'green'
}
}
};
<Select
fullWidth
value={this.props.value}
onChange={this.props.onChange}
input={
<Input
classes={{
inkbar:this.props.classes.inkbar,
underline:this.props.classes.underline}}
/>
}
>
{this.props.children}
</Select>)
But when I check code with react tool, I found the classes of <Input> component did not change. Does anyone know how to change the color of inkbar and underline in <Select> component?
I use Material-ui v1.0.0-beta
I have soloved by setting className. But I still want to know why changing classes does not work.

instead of classes use className , for more information checkout this link

How to set default font family and size in draft.js

I am learning draft.js editor and can't find how to configure default font-family and font size.
I tried this way:
let editorState = EditorState.createEmpty();
let newState = RichUtils.toggleBlockType(
editorState,
'aligncenter'
);
newState = RichUtils.toggleInlineStyle(
newState,
'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
newState,
'TIMES_NEW_ROMAN'
);
What is weird, aligncenter style works fine, but font size and family disappears when component gets focus.
Can you please suggest correct way how to do it?

Using RichUtils.toggleInlineStyle() is for modifying the currently selected range of text (or setting the inline style for text that will be entered at the current cursor position). There is not a way to use this to set the default inline styles for the entire document (nor is this recommended).
To get default styles, you should use CSS and set the styles you want for the entire editor. Then you should override those styles for specific text ranges using toggleInlineStyle when the user wants a non-default style (for instance selecting font-size from a dropdown).
Here's the catch. Currently you can pre-define these inline styles using styleMap but you can't really create them on-the-fly as a user chooses an arbitrary font-family (or size or color).
I have been struggling with this also while trying to implement a color-picker for react-rte.org.
(Technically, you can add styles on the fly, but it won't trigger a re-render, so that's not really usable.)
There is an open issue for this here:
https://github.com/facebook/draft-js/issues/52
I expect this will be resolved within a week or so and I can edit this answer with example code to accomplish what you're after.

if your trying to set the default font size in draft.js Editor just set up your component like this below
notice the div that is wrapped around the Editor, EmojiSuggestions, and mentionSuggestion components. Just set the className for the editor to your font size. in my case it is fs-1. Note I have added an editorStyles.editor class that is coming from an attached scss file. This contains some scss for the editor.
Here is what the scss looks like, no need to add this though if you are just trying to edit the default font style
Just showing this, but not needed to set default font size. That is done in div wrapper
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 9px;
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
.mention {
color: #2c7be5
}
<div
style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
className={`border border-2x border-300 bg-light rounded-soft fs-1 ${editorStyles.editor}` }
onClick={() => { messageFieldRef.current.focus(); }}
>
<Editor
editorKey={'editor'}
currentContent={ContentState}
editorState={tempEditorState ? tempEditorState : editorState}
onChange={setEditorState}
plugins={plugins}
ref={messageFieldRef}
/>
<EmojiSuggestions />
<MentionSuggestions
open={open}
onOpenChange={onOpenChange}
suggestions={suggestions}
onSearchChange={onSearchChange}
onAddMention={(e) => {// get the mention object selected
}}
entryComponent={Entry}
/>
</div>
<div>
<EmojiSelect closeOnEmojiSelect />
<span color="light" className="px-3 py-1 bg-soft-info rounded-capsule shadow-none fs--1 ml-3" >
<FontAwesomeIcon icon="tags" transform="left-3"/>
Press <strong>#</strong> while typing to insert custom fields
</span>
</div>