I have a series of Material UI buttons as such:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
I've given them a class that simply displays them as block eg:
button: {
display: 'block',
},
They work fine but there seems to be a setting where the smaller Edit button has extra padding on it because it has less text in the name:
If I add more text it corrects it:
Would anyone know how to fix this? If there is a setting somewhere?
The problem is with the min-width property which forces that "padding". Try just adding min-width: 'unset' to your button class.
There is a live example
https://codesandbox.io/embed/naughty-galois-bc0sz?fontsize=14&hidenavigation=1&theme=dark
Related
I have a simple SAP UI5 application, where the user open an add dialog pop-up,
I want to change the style of the dialog, the xml of the dialog is something like this:
<core:FragmentDefinition xmlns="sap.m" xmlns:core ="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml>"
<Dialog title="Add" class="sapUiPopupWithPadding">
<Input type="Text"/>
<buttons class="buttonsStyle">
<Button text="Save"/>
<Button text="Cancel"/>
</buttons>
</Dialog>
</core:FragmentDefinition>
The CSS:
.buttonsStyle {
background-color: #d8d8d8 !important;
}
I always get the same result as the picture no matter how I change the CSS, I want to change the color and size of the dialog title (Add) and the background color and font color of the buttons but I get no result by trying and searching.
Thank you.
For buttons you should favor the type attribute over custom CSS ;)
See the API reference & samples for ButtonType
https://sapui5.hana.ondemand.com/#/api/sap.m.Button%23controlProperties
https://sapui5.hana.ondemand.com/#/api/sap.m.ButtonType
https://sapui5.hana.ondemand.com/#/entity/sap.m.Button/sample/sap.m.sample.Button
For the Dialog, you can use the customHeader aggregation and use some customizable component in place of the title.
https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog%23aggregations
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
I have a popover that appears to the left of a label:
$('label').hover(function () {
$(this).popover({
offset: 10,
placement: 'left'
}).popover('show');
The popover is currently blocking a radio button and I want to move it left, say, 10px. I can't seem to figure out how to do this. offset seems to do nothing at all (If I add 10 or 10000 it doesn't make a difference). Here is the HTML for one such label:
<label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label>
I can try to set the popover position by overriding the class in CSS with something like:
.popover {
left: 380px !important;
}
but this is far from ideal as it appears in different spots using different browsers.
There must be a way of adding a small right margin, yes?
Thanks.
It seems rather impossible to style a single popover, and - as Sara mention - there is no such option as offset (you may think of qtip?). However, you can use the undocumented option template, "derived" from the tooltip options (in fact, popover only introduces content).
By modifying template you can individually style each popover! It seems to me your problem is the arrow more than the popover itself, so you can try to move the arrow up or down from the middle, simply by adding a style for arrow to the template, like this
$('label').hover(function() {
$(this).popover({
placement: 'left',
template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).popover('show');
});
of course, here the arrows for all popovers set for all labels will be modified due to the $('label').hover, but popovers can be styled individually without CSS if you want, those without radio buttons may not need to.
UPDATE - style the whole popover +10px to the left
...
template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...
Try this to add the right margin:
.popover.left{
left: calc(100% - 10px) !important;
}
You can add data-placement='left' to the element.