Here is the image which says it all. I am trying to set the text color for the disabled button from #EEEEEE to black, but I cant seem to locate it via css. Any help will be greatly appriciated.
I added the line to color * to #EEEEEE, so I dont want to override that just change the color if the button is disabled.
Use CSS Cascading. Something like this:
.dijitButtonDisabled .dijitButtonNode .dijitButtonText{
color: #000;
}
With the assumption that memberDetailsBtnBar is root of the element tree shown in the image, the above rule will override your rule only if the button is in disabled state.
Use the following CSS
.dijitButtonDisabled .dijitButtonText{
color: black;
}
Live example: https://jsfiddle.net/Lzrzoor5/1/
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
disabled: true,
style: 'color: red'
}, "progButtonNode").startup();
});
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I got many buttons that I need to disable or hide the HTML default tooltip which results from the title attribute in the <Button title='test'></Button>
I read several posts here that advise using the CSS pointer-events which disables the the hover tooltip but also the button click. <Button title='test' style={{pointer-events: none}}></Button>
I could not find any posts here on remove the title attribute from the button in React component like removeAttr('title') so I move on to
trying to hide the HTML Tooltip content box and text with styling the tooltip border, text, and background to white with something like this
const buttonStyle = {
hover: {
color: '#fff", backgroundColor: '#fff'
}
//'&:hover':{
// color: '#fff", backgroundColor: '#fff'
//}
}
tried both hover: and '&:hover' : {} with white background to hide the html tooltip, but the styling is not taking effect.
<Button title='test' style={buttonStyle}></Button>
So far no luck and removing the title attribute from button control is not an option.
In a few places, vuetify sets text color to the "primary color" defined in its theme (eg. hilighting selected drop down menus). With my company's colors, this looks ugly. How can I set this to be different?
From what I can tell, this comes from these css rules:
.v-application.primary--text {
color: #0064a2 !important;
caret-color: #0064a2 !important;
}
When I change those, I can make the text color look nice. Unfortunately, they're generated by vuetify and marked as !important, so I can't seem to change them outside of the browser inspector.
I can add something like 'primary--text': 'color: #FF00FF' to the style theme, but that changes the background color, not the text color.
Here's a codepen example
I could use vuetify's themes exclusively for text, and set the rest of the element colors manually, but this doesn't seem to be their intended use. What should I do to change the text color?
You can add a class to the app and create a more-specific CSS rule like so (this example doesn't actually run here, but you can copy it over to your codepen):
new Vue({
el: '#app',
vuetify: new Vuetify({
theme: {
dark: true,
themes: {
dark: {
// Color is applied to selected drop down item
primary: '#0064A2',
// Uncomment this to make things worse
// 'primary--text': '#FF00FF'
}
}
}
}),
})
.my-app.v-application .primary--text {
color: white !important;
}
<div id="app">
<v-app class="my-app">
<!--Click the dropdown to see ugly colors-->
<v-select :items="[undefined]"/>
</v-app>
</div>
Was having the same issue and Roy's answer guided me to this solution:
.my-app.v-application .primary--text {
color: inherit !important;
}
This way, you aren't screwing up styling for other items that are using the primary color.
function fader(){
$('#numbers').animate({backgroundColor: '#FFFFFF'}, 900);
}
HTML
<div id="numbers" style="background-color: blue; width:200px;" onclick="fader()">1234567890</div>
The code above changes the background color of the div from blue to white on click event. But it works for the first click only.
How to change the color every time I click on the div?
You need to make it blue again!
function fader()
{
$('#numbers')
.css('background-color', '#FF0000')
.animate({
backgroundColor: '#FFFFFF'
}, 900);
}
Try setting the background-color using a separate CSS style rather than using inline CSS.
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck