I am using React Monaco Editor ( https://github.com/react-monaco-editor/react-monaco-editor ). When I set a hardcoded height, I usually see some space on the page. I want to fill that space with Monaco Editor. Page size can be changed so I want the Editor to be dynamic to the page size. This example ( https://microsoft.github.io/monaco-editor/playground.html ) is very good. Whenever I change the size of the page, Editor size also changes. Is there a way to do the same thing?
My codes:
return (
<Editor
options={{ readOnly: !canEditEditor }}
defaultLanguage="json"
defaultValue={formatJSON(JSON.stringify(documentInfo))}
onChange={(value, event) => handleChange(value, event)}
onValidate={handleValidation}
className={styles['Editor-container']}
/>
);
Scss
.Editor-container {
border: 1px solid var(--ltc-grey200);
border-radius: 2px;
margin-top: calc(var(--unit) - 0.5rem);
height: 60vh;
}
Related
I'm trying to change the theme in an app using the data attribute and then changing the CSS variables according to the different data-theme values.
In the App component, I check if the user has a default theme set, and use that to set new theme on click
import "./styles.css";
import useLocalStorage from "use-local-storage";
export default function App() {
// Check user set theme mode...
const defaultDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// Create theme mode state...
const [theme, setTheme] = useLocalStorage(
"theme",
defaultDark ? "dark" : "light"
);
// Handle on click from the theme switcher...
const clickHandler = () => {
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
};
return (
<div className="App" data-theme={theme}>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => clickHandler()}>Dark Mode</button>
</div>
);
}
In the styles.css I set the different variables to define the theme
/* Set the dark mode variables... */
[data-theme="dark"] {
--background: black;
--title-text: white;
--desc-text: grey;
}
/* Set the light mode variables... */
[data-theme="light"] {
--background: white;
--title-text: black;
--desc-text: grey;
}
/* Page Styles... */
body {
padding: 0;
margin: 0;
background: var(--background);
}
/*The rest of the CSS...*/
The rest of the elements work fine as they are wrapped in an element that has the data-theme attribute. However, the body is not wrapped with the data-theme attribute, so there is no change in the body background. In this example, I used .App but I would like to change the body instead. Is there a way to wrap the body in the data-theme attribute in React?
Here is the link to the full code in CodeSandbox
Full code on CodeSandbox
How about wrap App with div.body them pass data-theme into .body instead and make div.body cover body
<div className='body' data-theme={theme}>
<div className='App'></div>
</div>
I'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.
Expected Result:
Current Result:
The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.
Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.
(Please note that I want to keep using Material UI Tabs as the base.)
On a side note, could anyone help why there's also some lag when selecting a tab?
Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):
https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js
subtabs
import styled from "#emotion/styled";
import MuiTabs from "#material-ui/core/Tabs";
export const StyledSubTabs = styled(MuiTabs)`
.MuiButtonBase-root.MuiTab-root {
background: white;
border-radius: 8px 8px 0 0;
:hover {
background: pink;
}
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: none; /* not working */
z-index: 10;
:hover {
background-color: pink;
}
}
//
//added this
//
.MuiButtonBase-root.MuiTab-root {
border-bottom: 3px solid gray;
z-index: 10;
:hover {
background-color: pink;
}
}
.MuiTabs-indicator {
display: none;
}
`;
app.js
import React, { useState } from "react";
import Tab from "#material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";
const App = () => {
const [index, setIndex] = useState(0);
const handleChange = (event, newIndex) => {
console.log("SubTab - index", newIndex, event);
setIndex(newIndex);
};
const parentStyles = {
// remove this ----> borderBottom: "3px solid gray",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={parentStyles}>
<StyledSubTabs value={index} onChange={handleChange}>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</StyledSubTabs>
<div
//added this
style={{
borderBottom: "3px solid gray",
height: 45,
flexGrow: 1
}}
>
Some Other Content
</div>
</div>
);
};
export default App;
I have a styles.jsx file with styled components design. I declared a const this way
const InputStyle = {
maxWidth: '600px',
marginBottom: '20px',
'#media(max-width: 740px)': {
width: '203px',
marginBottom: '14px',
backgroundColor: red,
},
};
maxWidth and marginBottom does work but when you go to the screen size specified in the media query, no changes are registered.
And I use this in the screen this way:
<Input
level="first"
type="text"
name="fullName"
style={InputStyle}
value={formFields.fullName.value}
onChange={handleInputChange}
/>
How can I correctly declare the media query so it works?
you can use styled-media-queries pkg like below:
import styled from "styled-components"; // You need this as well
import media from "styled-media-query";
const Box = styled.div`
background: black;
${media.lessThan("medium")`
/* screen width is less than 768px (medium) */
background: red;
`}
${media.between("medium", "large")`
/* screen width is between 768px (medium) and 1170px (large) */
background: green;
`}
${media.greaterThan("large")`
/* screen width is greater than 1170px (large) */
background: blue;
`}
`;
doc is available here
if you want more complex views to create with media queries you can create components like
<DesktopSize />
<TabletSize />
<MobileSize/>
<WhateverSize />
and export them in their own modules and import an use it the what ever component you want like
<TabletSize>
<Header />
<Slider />
<OtherComponent />
</TabletSize>
by this way you create your layouts and they are usable throughout of whole app
Suppose I want to change the standard white background color of the Select component to green.
My try...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
...didn't do it.
Can someone point me in the right direction?
[EDIT]
I ended up using the suggested approach from Jesper We.
Overwriting the color for all selections...
.ant-select-selection {
background-color: transparent;
}
...then I could style the Select components individually.
<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.
The proper place to attach a background color is
.ant-select-selection {
background-color: green;
}
This will make all your selects green. Give them individual classNames if you want different colors for different selects.
For my form with Select element a have some code in render:
const stateTasksOptions =
this.tasksStore.filters.init.state.map(item =>
<Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
<span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
</Select.Option>
)
return (
....
<Select
mode="multiple"
value={this.tasksStore.filters.selected.state.map(d => d)}
onChange={this.handleTasksStatus}
optionLabelProp="title"
>
{stateTasksOptions}
</Select>
....
)
And some css for colorizing.
Result:
Try dropdownStyle instead of style.
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle is one of select props.
reference: antd select
From their official docs https://pro.ant.design/docs/style
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* TestPage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Two points need to be noted:
The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global.
Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction
with all the above answers you cant change the styles of tags conditionally but with below approach you can.
You can do a hack and change the styles as you like of tags of select dropdown.
You can use dropdownRender of select which takes 2 arguments
menuNode
props
use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.
for reference below is the example link for code sandbox
Select Tags Styles Sanbox
May not be an efficient way to do it but you can use this for now to meet your business requirement.
Thanks
Somebody stated the selector to be
.ant-select-selection {...
However it should be selector as follows:
.ant-select-selector {
background-color: green;
}
They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064
But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661
menuItemSelectedIcon={(props) => {
return (mode == "multiple" ?
<Tooltip title="Check to confirm the apps alongwith the vendor">
<input type="checkbox" checked={props.isSelected}
style={{
margin: 5
}}
/>
</Tooltip>
: null)
}}
Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.
Then I decided to share my css solution for those who are in my situation:
.license-plate-letters {
overflow-y: hidden !important;
min-width: 240px !important;
.rc-virtual-list-holder>div {
height: auto !important;
}
.rc-virtual-list-holder-inner {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ant-select-item-option {
padding: 0.5rem 12px !important;
&:hover {
background-color: #452380d2 !important;
color: white !important;
}
}
}
}
<Select
virtual={false}
popupClassName="license-plate-letters">
<Select.Option key={sth} Title="title">title</Select.Option>
</Select>
In angular, you can override the style with ng-deep
::ng-deep .ant-select-selector {
background-color: red;
}
I want to display only an icon on the Ext JS 4.1.1 button (no text). I want the width of button be be a little longer than the icon width. When displayed, the icon is always left aligned. I want it to be centered in the button.
I am unable to achieve the above using either the alignTo method or the background-position in CSS.
The icon is 32x32px png file.
Ext JS code:
var topToolBar = Ext.create('Ext.toolbar.Toolbar', {
width: '100%',
items: [{
iconCls: 'home32',
width: 60,
iconAlign: 'center',
scale: 'large'
}]});
var master = Ext.create('Ext.panel.Panel', {
layout: 'anchor',
anchor: '100% 100%',
renderTo: Ext.getBody(),
tbar: [topToolBar]
});
CSS Code:
.home32
{
background-position: center center;
background-image: url( images/32/home.png ) !important;
}
Don't forget after all Ext Js is plain css-html. Try the old time classic way.
Button definition
xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate/span>'
Button Icon Class
.contactIcon80 {
background-image: url(../images/calendar80.png) !important;
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;
}
Html span class (this is for placing the Text if you have in the correct position )
And with this way you can use bigger button icon size not just only 16x16 - 24x24 - 32x32
.bigBtn {
position: absolute;
bottom: 4px !important;
}