I want to do inline editing in ui-tinymce. Its the text area and I want to hide its border. It should edit only when user clicks on text area. I am inline as true, but still it shows border.
$scope.tinymceOptions = {
inline: true,
menubar: false,
toolbar: "bold italic underline styleselect",
statusbar: false,
skin: 'lightgray',
theme : 'modern'
};
Try this in your tinymceOptions :
inline_boundaries: false
If still doesn't work you can always override the border from your css by :
.mce-container {
border: 0px !important;
}
When using inline mode, i had a persistent border that was visible when the editable area is active, i solved it by adding the following to my inline styles:
:focus-visible {
outline:0;
}
you can probably make it not add outline in a more "proper" way, but i find it hard to edit in the theme css files due to their messy nature.
Related
If I use #tailwindcss/forms it will be styled like Unstyled on the following site.
chackbox should look like Simple on the following site.
Currently, when you press down on the checkbox like Unstyled on the site, a border is displayed. I want to eliminate it.
enter link description here
//taiwind.config.js
plugins: [
require('#tailwindcss/custom-forms'),
]
You will have to override the the style for box-shadow which is applied on checkbox and radio:
[type='checkbox']:focus, [type='radio']:focus {
box-shadow: none;
}
Im working with MUI-datatable and my table options contain
options:{
search: false,
searchOpen: true,
...
}
according to the docs "search:false" should only hide the icon to toggle the search bar, and searchOpen, should show the search bar by default.
But at the moment it removes the search bar AND icon.
Here is a sandbox where I have search set to disabled which only disables the icon (but actually want to set to false)
https://codesandbox.io/s/vigorous-haslett-40jlf?file=/src/App.js
Adding theme and overriding it by:
createMuiTheme({
overrides: {
MUIDataTableToolbar: {
iconActive: {
display: 'none',
},
},
},
})
Where iconActive is the Search Button
I have a dark-blue toolbar, and I need that buttons situated on TitleBar have $button-color: #fff;
and some another color in all other cases, like on the attached image.
What's the right way to do it?
As the buttons located in the title toolbar are a particular case, you should create a separate ui for this kind of button using theme mixins. You extend the default mixin, give it a new name, set the desired parameters
#include extjs-button-small-ui(
$ui: 'titlebarbutton',
$color: #fff
);
#include extjs-button-medium-ui(
$ui: 'titlebarbutton',
$color: #fff
);
#include extjs-button-large-ui(
$ui: 'titlebarbutton',
$color: #fff
);
And then use it in your button configuration like so:
{
xtype: 'button',
ui: 'titlebarbutton',
...
}
OR
As #D.V. suggested in the comments, you can simply use a css rule:
{
xtype: 'button',
cls: 'app-titlebar-button',
...
}
Note that the button is composed of multiple elements, and this class will be applied to the top one, but the color of the text is determined by the inner element with the class of x-btn-inner, so you css rule will look like this:
.app-titlebar-button .x-btn-inner {
color: #fff;
}
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}