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
Related
I'm very new to Svelte and I want to build a theme for a website.
When I want buttons to have a certain look and animations, do I create a new Button component and use that every time with slots or do I just create a class for this button that has some css code and use the standard html button?
Of course I can do it both ways, but which one is preferred in svelte?
You could use this strategy for theming your application. You can use $$restProps to capture your classes and in your components, you can also set up the events for the buttons.
App.svelte
<script>
import Button from "./Button.svelte"
</script>
<Button class="primary">
My Button
</Button>
<Button class="danger">
My Button
</Button>
Button.svelte
<script>
let buttonProps = {
class:[$$restProps.class]
}
</script>
<button on:click
on:mouseover
on:mouseenter
on:mouseleave
{...buttonProps}>
<slot/>
</button>
<style>
.primary{
color:green;
}
.danger {
color:red;
}
</style>
Example REPL. Components are the right way to go for build large applications.
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
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 would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?
I have used this code:
input, textarea {
background-color: #d1d1d1;
}
input[type="text"], textarea {
background-color : #d1d1d1;
}
Edit: working example, http://jsfiddle.net/C5WxK/
The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.
But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.
In this case your only option seems to be to define classes on input elements.
<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...
and target them with a class selector:
input.input-box, textarea { background: cyan; }
You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).
you can simply use the button tag with type="submit"
<button type="submit">Submit</button>
besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.
If you need to insert a normal button inside a form, use type="button" to prevent it submitiing the form
When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.
editor.ui.addButton('customButton', {
label: 'Custom Action',
//icon: this.path + 'images/anchor.gif',
command: commandName
});
Do you know how to create toolbar button without icon? Just a pure text.
An easier way is that CKEditor creates a CSS class on your custom label automatically called:
cke_button_<command>
For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:
<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>
Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none
.cke_skin_kama .cke_button_myCommand .cke_label {
display: inline;
}
Voila.
This is how I did it. A button looks like this:
<span class="cke_button">
<a id="cke_..." class="cke_off cke_button_cmd" ...>
<span class="cke_icon"/>
<span class="cke_label">Label</span>
</a>
</span>
.cke_label is styled "display:none" by default. This would do exactly what we want:
<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>
So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:
<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>
The ckeditor authors applied css to get the label on the source button (presets.css):
/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
display: inline;
}