We have a segmented button just below each toolbar. We have styled this button properly. However setting the pressedCls is really difficult. I've tried several forms and ofcourse google. Hopefully somebody can help me out here.
When clicked, the button should have a background color of #007aFF and textcolor: #fff. That's it. How can i do that.
Our css app.css
//SegmentedButtons
.customSegmentedButtonPressedCls{
color: #fff;
background: #007aff !important;
}
.button_pressed.x-button-pressed{
color: #148DEA;
background:#148DEA !important;
}
The segmented button part in the App:
{
xtype: 'segmentedbutton',
ui: 'segment',
allowDepress: false,
width: '100%',
id: 'btnLabelSegmented',
pressedCls: 'button_pressed',
itemId: 'btnLabelSegmented',
items: [{
text: 'All',
id: 'btnOrderSegmentedAll',
itemId: 'btnOrderSegmentedAll',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-left': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
flex: 1,
pressed: true
}, {
text: 'Label 1',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
id: 'btnOrderSegmentedLabel1',
itemId: 'btnOrderSegmentedLabel1',
flex: 1
}, {
text: 'Label 2',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
id: 'btnLabelSegmentedLabel2',
itemId: 'btnLabelSegmentedLabel2',
flex: 1
}]
},
Try something like this:
change background image of different color.
.backCls.x-button-pressing{
background: url('../images/back_active.png') !important;
background-repeat: no-repeat;
background-size: 65px 65px;
height: 65px;
width: 65px;
}
Or concern with this related question
How to change change images when click button in sencha
Related
I am trying to align the items in a div (that is within an MUI Select styled component):
const SelectStyle = styled(Select)(({ theme }) => ({
width: WIDTH,
border: `1px solid ${theme.palette.grey[400]}`,
borderRadius: 3,
fontSize: '1.2rem',
'&:hover': {
backgroundColor: theme.palette.grey[300],
border: `1px solid ${theme.palette.grey[500]}`,
},
'&:focus': {
backgroundColor: theme.palette.grey[700],
border: `1px solid ${theme.palette.grey[700]}`,
},
'& .MuiSelect-select': {
paddingTop: 5,
paddingBottom: 5,
fontSize: '1.2rem',
alignItems: 'center',
display: 'inline-flex'
},
}));
I can see that the effect has been applied to the parent div:
However, I still see that the text and the icon don't look center aligned ("Text" looks higher than the icon):
Is there a reason for this? And how do I make it more center aligned?
I'm working on an image upload component, and the design breaks when I put iphone 5 / se
But my css are breaking out, I want to force the design to respect the limits, iphone 6 and others are good, but when I change to the iphone 5, well, the print says everything.
This is the CSS code:
import { fontTitle, fontSizeInput, gradient, shadow, primaryColor, grayColor3, grayColor4 } from './theme'
export const
dropzone = {
display: 'grid',
margin: 'auto',
alignContent: 'center',
justifyItems: 'center',
gridRowGap: '15px',
border: `2px dashed ${grayColor3}`,
borderRadius: '6px',
color: primaryColor,
textAlign: 'center',
},
instructions = {
marginTop: '20px'
},
button = {
display: 'block', // necessary for link version
WebkitAppearance: 'none',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
MozAppearance: 'none',
outline: 'none',
cursor: 'pointer',
width: '90%',
padding: '10px 0px',
border: 'none',
borderRadius: '20px',
fontFamily: fontTitle,
fontSize: fontSizeInput,
color: '#FFF',
background: gradient,
boxShadow: `${shadow}`
},
btnDisabled = {
...button,
cursor: 'initial',
color: primaryColor,
background: 'none',
backgroundColor: grayColor4,
boxShadow: 'none'
},
input = {
opacity: 0
},
styleTag = `
.dropzone {
height: 100%;
height: -webkit-fill-available;
height: -moz-available;
}
`
This is the print of how it looks:
const SearchBar = (text, onChange) => {
return (
<div>
<div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}>
<Search style={{background: 'blue', verticalAlign: 'bottom'}}/>
<input style={{background: 'blue', verticalAlign: 'bottom'}}
text={text} onChange={onChange}/>
</div>
</div>
);
};
export default SearchBar;
Here is my search bar code.
The result is
but, I want it to appear like this.
How can I get the result?
In your Search component make the width to be 100%.
<Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/>
First import FaSearch then replace your code with below mentioned.
import { FaSearch } from "react-icons/fa";
const App =(text, onChange)=> {
return (
<>
<div style={styles.mainStyle}>
<Search />
<input style={styles.inputStyle} text={"text"} onChange={null} />
</div>
</>
);
}
const Search = () => <FaSearch style={styles.search} />;
const styles = {
mainStyle: {
display: "flex",
flexWrap: "wrap",
borderRadius: 10,
alignItems: "center",
border: "1px solid",
overflow: "hidden"
},
inputStyle: {
flex: 1,
border: "none",
height: 30
},
search: {
fontSize: 30,
padding: "0px 10px",
cursor: "pointer",
borderRight: '1px solid grey'
}
};
I generate play-off tournament bracket...
Usually in each tour there are 2^n participants: 16, 8, 4, 2. And it's easy to adjust them in flex column. But there is a tricky thing, when in first tour (round), participants count is between 16 and 8. And I need invisible duels, just like place holder in bracket, for adjustment.
I tried to do them {visibility: hidden}, they disappear on the screen. But unexpectedly partially appears when printing.
Why it happens?
How it looks on the screen (it's good, just like I planned):
And how it looks while printing (ctrl+P):
And there is a code:
import React from 'react'
import { Checkbox, Box } from '#material-ui/core'
import { makeStyles } from '#material-ui/core/styles'
import { find } from 'lodash'
import { athletName, trainerName } from '../../config/functions'
function DuelSimple(props) {
const {
duelData,
participants,
onFighterChange,
onWinnerChange,
showScoreInput,
showWinnerCheckbox
} = props
const { id, fighterRed, fighterBlue, winner, label /* scoreRed, scoreBlue */ } = duelData
const styles = {
duelTable: props => ({
/* width: '5cm', */
border: '1px solid gray',
borderRadius: 5,
marginBottom: 5,
borderSpacing: 0,
tableLayout: 'fixed',
visibility: props.duelData.status === 'fake' ? 'hidden' : 'visible'
}),
duelNumber: {
width: 30,
borderRight: '1px solid gray',
textAlign: 'center',
color: 'slategray'
},
duelLabel: {
fontSize: 9
},
athletRed: { width: 140, height: 33, padding: '0 5px', borderBottom: '1px solid gray' },
athletBlue: { width: 140, height: 33, padding: '0 5px' },
athletInput: { width: '100%', border: 'none' },
checkboxColumn: { width: 35, height: 33 },
checkboxColumnRed: { borderBottom: '1px solid gray' },
checkboxRed: { width: 7, height: 7, marginTop: 2, color: 'red' },
checkboxBlue: { width: 7, height: 7, marginTop: 2, color: 'blue' },
trainer: { color: 'gray', fontSize: 10 },
athletColorColumn: { width: 5 },
athletColorRed: { backgroundColor: 'rgba(255,0,0,0.5)', borderBottom: ' 1px solid gray' },
athletColorBlue: { backgroundColor: 'rgba(0,0,255,0.5)' },
scoreColumn: { width: 35, borderLeft: ' 1px solid gray' },
scoreColumnRed: {
'& input': { color: 'rgba(255,0,0,0.5)', fontWeight: 'bold' },
borderBottom: ' 1px solid gray'
},
scoreColumnBlue: { '& input': { color: 'rgba(0,0,255,0.5)', fontWeight: 'bold' } },
scoreInput: { border: 'none', width: 31, height: 25, textAlign: 'center' }
}
const useStyles = makeStyles(theme => styles)
const classes = useStyles(props)
let athletRedName, athletBlueName, trainerRedName, trainerBlueName
//populate fighters data by id
if (fighterRed) {
const participantRedPopulated = find(participants, { athlet: { id: fighterRed } })
athletRedName = athletName(participantRedPopulated.athlet)
trainerRedName = trainerName(participantRedPopulated.trainer)
} else {
athletRedName = ''
}
if (fighterBlue) {
const participantBluePopulated = find(participants, { athlet: { id: fighterBlue } })
athletBlueName = athletName(participantBluePopulated.athlet)
trainerBlueName = trainerName(participantBluePopulated.trainer)
} else {
athletBlueName = ''
}
return (
<table className={classes.duelTable}>
<tbody>
<tr>
<td className={classes.duelNumber} rowSpan='2'>
{id}
{label ? <div className={classes.duelLabel}>{label}</div> : ''}
</td>
<td className={classes.athletRed}>
<input
onChange={onFighterChange(id)}
type='text'
data-id={id}
data-color='Red'
className={classes.athletInput}
value={athletRedName}
/>
<div className={classes.trainer}>{trainerRedName}</div>
</td>
{showWinnerCheckbox && (
<td className={`${classes.checkboxColumnRed} ${classes.checkboxColumn}`}>
<Box displayPrint='none'>
<Checkbox
inputProps={{ 'data-winner': fighterRed }}
onChange={onWinnerChange(id)}
className={classes.checkboxRed}
checked={winner === fighterRed && winner ? true : false}
/>
</Box>
</td>
)}
{showScoreInput && (
<td className={`${classes.scoreColumn} ${classes.scoreColumnRed}`}>
<input className={classes.scoreInput} />
</td>
)}
<td className={`${classes.athletColorRed} ${classes.athletColorColumn}`}></td>
</tr>
<tr>
<td className={classes.athletBlue}>
<input
onChange={onFighterChange(id)}
type='text'
data-id={id}
data-color='Blue'
className={classes.athletInput}
value={athletBlueName}
/>
<div className={classes.trainer}>{trainerBlueName}</div>
</td>
{showWinnerCheckbox && (
<td className={`${classes.checkboxColumn}`}>
<Box displayPrint='none'>
<Checkbox
inputProps={{ 'data-winner': fighterBlue }}
onChange={onWinnerChange(id)}
className={classes.checkboxBlue}
checked={winner === fighterBlue && winner ? true : false}
/>
</Box>
</td>
)}
{showScoreInput && (
<td className={`${classes.scoreColumn} ${classes.scoreColumnBlue}`}>
<input className={classes.scoreInput} />
</td>
)}
<td className={`${classes.athletColorBlue} ${classes.athletColorColumn}`}></td>
</tr>
</tbody>
</table>
)
}
export default DuelSimple
And dependencies of the project:
{
"#material-ui/core": "^4.5.2",
"#material-ui/icons": "^4.5.1",
"firebase": "^7.2.3",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.1",
"react-redux-firebase": "^3.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.5",
"redux": "^4.0.4",
"redux-firestore": "^0.9.0"
}
I just set opacity:0, and it helped me )
Excuse me for troubling )
I have implemented the Markercluster with the following style in the Google Maps. Everything is fine, but the text of the marker cluster turns blue after fiddling with the map. I want the text to be white.
styles: [{
height: 53,
url: markerIcons.clusterM1,
width: 53,
textColor: "white",
textDecoration: "none"
},
{
height: 56,
url: markerIcons.clusterM2,
width: 56,
textColor: "white",
textDecoration: "none"
},
{
height: 66,
url: markerIcons.clusterM3,
width: 66,
textColor: "white",
textDecoration: "none"
},
{
height: 78,
url: markerIcons.clusterM4,
width: 78,
textColor: "white",
textDecoration: "none"
},
{
height: 90,
url: markerIcons.clusterM5,
width: 90,
textColor: "white",
textDecoration: "none"
}]
});
"screenshot of the map"
This is because the text it becoming hyperlink text, which makes the text to be underlined and blue.
Can you extend your css object to include hyperlink styling?
{
height: 78,
url: markerIcons.clusterM4,
width: 78,
textColor: "white",
textDecoration: "none",
a.register:link { color:#FFFFFF; text-decoration:none;},
a.register:visited { color: #FFFFFF; text-decoration:none;},
a.register:hover { color: #FFFFFF; text-decoration:underline; },
a.register:active { color: #FFFFFF; text-decoration:none; }
},