I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}
Related
I use plugin link of tinyMCE to insert links but the problem that it is very small
How can I contol its size ?
My init code
tinymce.init({
target: this,
plugins: "table, link, textcolor",
toolbar: [
'undo redo | bold italic | bullist | numlist | tabel | link | forecolor | fontsizeselect | Extra',
],
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
setup: function (editor) {
editor.addButton('Teksten', {
type: 'menubutton',
text: 'Extra',
icon: false,
menu: createTempMenu(editor)
});
}
});
I had the same issue for months if not years, without any solution.
But i think i finally cracked it.
In my case i was using materilazie.css and it has this for all input fields:
input:not([type]),
input[type=text]:not(.browser-default):not(.mce-textbox),
input[type=password]:not(.browser-default):not(.mce-textbox),
input[type=email]:not(.browser-default):not(.mce-textbox),
input[type=url]:not(.browser-default):not(.mce-textbox),
input[type=time]:not(.browser-default):not(.mce-textbox),
input[type=date]:not(.browser-default):not(.mce-textbox),
input[type=datetime]:not(.browser-default):not(.mce-textbox),
input[type=datetime-local]:not(.browser-default):not(.mce-textbox),
input[type=tel]:not(.browser-default):not(.mce-textbox),
input[type=number]:not(.browser-default):not(.mce-textbox),
input[type=search]:not(.browser-default):not(.mce-textbox),
textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
The issue lies with the following two lines:
input:not([type]),
and
width: 100%;
You see, the link field in the tinymce popup is an input without a specified type. Therefore the width of the field will be set to 100%. Given the complex resizing logic behind tinymce, the popup receives the width of 222px (inline css) (or at least in my case, but the screenshot in the questions looks exactly what i had)
Once I removed the width element the popup loaded just fine (but everything else became ugly :) )
Upon further investigation I found that tinymce adds the class "mce-textbox" to the input field.
So here is what I added to my css file
input:not([type]).mce-textbox {
width: inherit;
}
This overrides the width:100% part and allows tinymce to measure the width correctly and set the width of the popup as it should.
Given the fact that the main css still have some effect on the popup input fields - the overall look and feel is still not the original tinymce style - but at least the popups are now back to their normal sizes.
Note: I am by no means a frontend developer, therefore I am sure there is a better, more elegant solution for this issue. but at least we know where to look now.
I hope this helps (though I know the question is rather old now :) )
I solved by add custom css
.mce-window-body {
width: inherit !important;
}
.mce-window-body > .mce-container {
width: 100% !important;
}
.mce-window{
width: 30% !important;
left: 50% !important;
top: 50% !important;
margin-left: -15% !important;
margin-top: -150px !important;
}
But i don't consider this as answer as till now i don't know why it is
displayed small
I'm trying to fit a DataTables table inside a Bootstrap panel.
I have tried setting the option dom as:
dom: '<"panel panel-default"<"panel-heading"lf>t<"panel-footer"ip>>',
The elements are placed correctly where they should, but DataTables applies alot of styling to the elements, so the layout is quite ugly.
Can I disable the css styling? For instance, DataTables aligns the filtering and pagination at right, which seems to be done with position: absolute or something. I would rather use Bootstrap's <div class="row"><div class="col-md-6">.... or just <div class="pull-right">...</div>.
Edit
Thank you for your answers
I have tried disabling styling with
.dataTables_length {
}
.dataTables_length label {
float: none !important;
}
.dataTables_filter {
}
.dataTables_filter label {
float: none !important;
margin-bottom: 0 !important;
}
.dataTables_info {
padding-top: 0 !important;
}
.dataTables_paginate {
float: none !important;
}
.dataTables_paginate ul.pagination {
margin: 0 !important;
}
and made the columns with
dom: '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>',
It almost works but I guess I should rather add col-md-6 as class to the existing div elements instead of adding more div elements in the dom option.
Is this really the correct way to do it?
It simply goes on CSS classes - .dataTables_<context>, here is some CSS to play around with :
.dataTables_length {
background-color: red;
}
.dataTables_filter {
background-color: blue;
}
.dataTables_info {
background-color: yellow;
}
.dataTables_paginate {
background-color: green;
}
demo -> http://jsfiddle.net/g860g5bm/
If you want to alter the classes for those elements, then you have id's on the scheme <id>_<context> :
#example_length {
background-color: red;
}
#example_filter {
background-color: blue;
}
#example_info {
background-color: yellow;
}
#example_paginate {
background-color: green;
}
completely alter the class for the lengthmenu :
$('#example_length').removeClass().addClass('col-md-6');
If you want something like <div class="row"><div class="col-md-6"> for example for the lenghtmenu - then use jQuerys wrap :
$('#example_length')
.wrap($('<div>', { 'class' : 'row' }))
.wrap($('<div>', { 'class' : 'col-md-6' }))
SOLUTION
Bootstrap requires certain structure in dom option, see Styling for more information.
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
});
The styling libraries that DataTables supports will override the default value of the dom parameter and replace it with a value that is suitable for their layout system. For example the Bootstrap integration makes use of Bootstrap's grid layout.
"dom":
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
DEMO
See this jsFiddle for code and demonstration.
I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You
You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I am trying to use select2 on a webpage I am creating. However the combobox background seems to be transparent but I need to change it to another color. I tried modifying the select2.css file but nothing seems to work. Any Ideas ?
If you are trying to target the combo box wrapper use
.select2-search { background-color: #00f; }
If you are trying to target the input use
.select2-search input { background-color: #00f; }
And if you are trying to target the results wrapper use
.select2-results { background-color: #00f; }
Hope this helps!
It's a little late to help the OP, but I'll leave this answer in the hope it might help somebody.
I don't know about other versions, but using select2-rails 3.5.9.3 (which according to their github page means the version of select2 being used is 3.5) I was only able to change the background color as follows:
.select2-choice { background-color: #00f !important; }
The selector mentioned by Matthew for the results works, though.
Anyway, I didn't try it using "vanilla select2," so I don't know if there is any difference in this case.
For combo box
.select2-container--default .select2-selection--single{
background-color: #000;
}
For options search box
.select2-search--dropdown{
background-color: #000;
}
.select2-search__field{
background-color: #000;
}
and for options list
.select2-results {
background-color: #000;
}
A few more snippets below where I overrided the CSS in order to change the appearence of the Select2 dropdown select to suit my custom dark theme. (I'm using Bootstrap 5)
https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/
I accessed the non minified css file through the CDN to find what bits i needed to override and through trial and error, i came up with the below:
/* ------------------------------------- */
/* ---------- Select2 Library ---------- */
/* ------------------------------------- */
/* See https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.2.0/select2-bootstrap-5-theme.css */
/* Change the appearence of the bakground colour surrounding the search input field */
.select2-search {
background-color: #343A40 !important;
}
/* Change the appearence of the search input field */
.select2-search input {
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the appearence of the search results container */
.select2-results {
background-color: #343A40 !important;
}
/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
border-color: #6c757d !important;
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #ffffff !important;
}
Tested and worked for me with disabled Select2 4.1.0 :
.select2-container .select2-selection--single .select2-selection__rendered{
background-color: #fff;
}
.select2-container--default.select2-container--disabled .select2-selection--single{
background-color: #fff;
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
border: none;
}
.select2-selection
{
background-color: #f5f5f5 !important;
}
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.