I am not able to PASTE text on React-Quill Editor on Safari(Only) While I am able to COPY , CUT, REDO and UNDO the text using shortcut keys.
Try to set -webkit-user-select: text to the .ql-clipboard div element
.ql-clipboard {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
My mistake was that I used user-select: none; in a parent div
Related
How can I have multiple rows with tabs on Firefox 57+, after the add-on Tab Mix Plus no-longer works (all legacy extensions are dropped with Firefox 57). Perhaps I should just wait?
This is perhaps the only functionality which I couldn't find in Opera or Chrome (and Chrome has some privacy issues), the last time I tested them. So it seems I have a few options, not just a single one.
As suggested in this thread, I can downgrade to FF 52 ESR (with possible issues...) or use a nightly build...
Another possible option is to use a [FF Current Profile Folder]/chrome/userChrome.css file (folder may need to be created), where I can place some code. Here is what I tested under FF 57, using 500+ tabs:
(EDIT 1: Added few css rules to hide some spaces/buttons, similar to the R4zen's answer, as mine contain one more rule and is perhaps more complete... but the result could be the same for most people! I had this code tested when I posted the question, but decided to post less code for easier understanding of what is happening. Now I am posting my full code, so others can benefit from it.)
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] {
min-width: 0px;
max-width: 40px;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
/* Active tab's style - visuallyselected="true" === ACTIVE TAB */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
font-weight: bold;
}
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
}
Where 5 in max-height: calc(5*var(--tab-min-height)) !important; are 5 rows, dynamically calculated height.
The above code shows tabs, but their behavior is quite bad:
the worst thing - when you scroll between the tabs using Ctrl+Tab (in the last recent order), and the tab switched to is on a different row (5+ rows away), the row with the tab doesn't scroll to the active tab. The slider must be used to manually scroll the rows and visually find the selected one...
(To clarify: I have set 5 visible rows out of 15 rows total)
tabs can't be dragged as FF core calculates it incorrectly and moves the tab to a random position
To use a fork of the legacy code, someone mentioned WaterFox (or another fork).
Are there any other (better) solutions as of today?
I'm pretty sure we'll have more options in the future, so the correct answer today may not be the best after a week or month(s)...
EDIT April 2019 (Firefox 66.x): After updating to Firefox 66, I had too many rows covering entire screen (that's 1000+ tabs). I needed to edit the original code above and added a few extra rules:
#tabbrowser-tabs .arrowscrollbox-scrollbox {
max-height: calc(5*var(--tab-min-height)) !important;
overflow: auto;
margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}
You may need to adjust them for you, in case you have different rows number (I have 5 rows with tabs). Good luck!
Multirow tab bar with working tab dragging (tested on FF 61):
Download and extract https://luke-baker.github.io/Firefox_chrome.zip
Copy userChrome.xml to your chrome folder.
Add content from userChrome.css to your userChrome.css.
Download MultiRowTabLiteforFx.uc.js
to your chrome folder.
Your chrome folder is a folder named chrome located under your user profile, e.g. ~/.mozilla/firefox/g7fa61h3.default/chrome. It does not exist by default, so create it if needed.
UPDATE
userChrome.xml file could now be obtained from Izheil's Quantum-Nox-Firefox-Dark-Full-Theme repo. There are also two versions of MultiRowTab script, for limited and unlimited number of tab rows.
I did few modifications, now should be without bugs (even if you pin tabs, move/drag window, scroll between tabs e.t.c.):
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
display: none !important;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
If you find the first row of tabs is invisible, open about:config and change the value of browser.tabs.drawInTitlebar from the default value of true to false.
browser.tabs.drawInTitlebar false
if you want to drag firefox window by clicking on free space of titlebar more than using 5 or more rows just delete code:
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
It's enable to scroll between rows by holding scrollbar when it's more then 5 rows, but on the other hand is disable posibility to drag ff windows by titlebar.(If you don't use more then 5 rows then you can delete it)
For those interested in how this CSS UI change works, there is a helpful article on ghacks.net that describes what's being done: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/
The article refers to the git hub project "Custom CSS tweaks for Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx That project contains many different UI tweaks that can be mixed and matched. The README file there gives good insight into how to pick and choose among the options.
With regards to whether or not the chrome directory needs to be created:
On the Fedora system I used, that directory did need to be created. On the Mac system, it was already present and contained example files, userChrome-example.css and userContent-example.css.
In the userChrome-example.css file was the following:
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
Although I needed to set browser.tabs.drawInTitlebar to false, once I did that, R4zen's code worked fine for me both with and without the #namespace line present.
Just thought I'd add how to do this. (though it's provided on other linked websites, it's better to have all the info in one place.)
Start firefox
enter "about:support" in the address bar
In the table, there is a row "Profile folder". Click the button "Open folder".
under "chrome" there should be files "userChrome-example.css" which you can rename to "userChrome.css" and edit.
This saved me a lot of time because in my case, the %appdata% pointed to the wrong drive. Moreover I had to install notepad++ because the line endings were not seen by notepad.
Izheil's github repo has been referred to in the comment stacks above though the URL shared above did not work for me (hence re-sharing). The steps called out there helped me recover my Firefox look and feel to an acceptable level after upgrading to FF66 betas (non-dark and scrollable tab bar with 3 rows). I've been stuck on the FF Quantum beta channel so these may or may not help you.
The following steps have worked for me on OSX starting with FF 66 b4.
.
The selected 4 files shown above are needed at a minimum in your profile's chrome folder.
Further if I wanted to add my own customizations (unloaded, pinned tab colors, etc) I made changes to the respective files (the js files) and went through steps 3 and 4 to make them effective.
cleared all files in Macintosh HD -> Users -> [ACCOUNT] -> Library -> Caches -> Firefox -> Profiles -> [PROFILE_NAME] -> startupCache. Note the [PROFILE_NAME] folder is hidden by default.
and then I restarted my Firefox instance.
Make sure your chrome folder only has the css, js, and xml files you want to use. Backup/move everything else to some other [safe] location.
I am thinking maybe editing the prefs.js file? See post here for why. Thanks.
I found a solution. It is not the same as Tab Mix and lacks a whole bunch of usefulness, but it does put the tabs on multiple rows.
First, locate your profile directory (see e.g. Mozilla Support), mine is at
~/.mozilla/firefox/xxxxxxxx.default
(where xxxxxxxx is some random characters), on a typical Linux system.
If it does not exist yet, create a subfolder chrome and within that a file userChrome.css (I think the capitalization of the filename does matter, but I did not test that):
~/.mozilla/firefox/xxxxxxxx.default/chrome/userChrome.css
In userChrome.css, add the following code, which I got from this source:
.tabbrowser-tab {
flex-grow:1;
min-width:150px;
}
.tabbrowser-tab,.tab-background {
height:29px;
}
.tab-stack {
width: 100%;
}
.tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
}
.tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: visible;
display: block;
}
.tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button{
display: none;
}
After saving, you need to restart Firefox.
Bonus: another nice feature that Tab Mix brought, is the placement of a close button on each separate tab. This can be done by adding another piece of code to the same file (from this source)
.tab-close-button:not([pinned="true"]) {
display: -moz-box !important;
}
I use a custom CSS stylesheet for CKEditor and want to disable the preview of all styles and format tags on the dropdowns, and just display the name in a div for example. Right now CKEditor create the corresponding tag with the class to style a preview. (like on the screenshot) :
If in the dropdown there is a h2 tag it will display it under block elements in a h2 tag. It make the dropdown inherit the whole site style for h2 tags.
I can do this by adding rules for the specific dropdown but was wondering is there is a built in configuration to stop that in a more generic way. Maybe to force it to always use simple span or div. To have just a classic dropdown, no groups, no style added.
Thanks for your help.
Thanks
This is a bit of a brute force approach but you can override the list item style .cke_panel_listItem with some relevant children selectors in the content.css file.
In this example I'm controlling the display style of h1, h2, h3 and div items in the list:
.cke_panel_listItem h1,
.cke_panel_listItem h2,
.cke_panel_listItem h3,
.cke_panel_listItem div {
font-size: 12px !important;
font-style: normal !important;
font-weight: normal !important;
color: #000000 !important;
background-color: #ffffff !important;
border: none !important;
}
The original style definitions (such as those defined in ckeditor's styles.js file) will still be applied to the selected text, but the dropdown menu itself will display the labels using simple 12px text.
I have implemented KendoUI in my WebApp, is there any way of making the grid responsive?
Like, showing fewer columns on smaller resolutions!
Here's my bootstrap-styled Kendo UI grid BEFORE applying the following styles
And here's what you get afterwards. May not be perfect, or what some will consider 'responsive' enough. But, for my users, this works a treat. Phone isn't our target platform anyways, but, now we can at least see what's in the grid, even if we cannot sort it.. etc.
And here are the styles inspired by #Vel's codepen, from earlier in this thread.
His codepen styles are missing a statemetn to hide the colgroup element.. which is integral for this approach.
Be sure to put this CSS in your page flow somewhere AFTER the main kendo CSS file
#media screen and (max-width: 800px) {
.k-widget table {
border: 0;
}
.k-widget table thead, table colgroup {
display: none;
}
.k-widget table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
border-radius: 20px;
}
.k-widget table tr td:last-child {
background-color: #313444;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
background-color: #313444;
color: #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: bold;
padding-top:1em;
}
.k-widget table td {
display: block;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
There is now a minScreenWidth setting for each column, which hides the column when the browser width is less than the specified. In our application we have set some constants corresponding to the Bootstrap media query breakpoints, so instead of manually specifying the width every time, we use these constants and thus some columns are hidden when you are below e.g. the Bootstrap sm or xs breakpoints.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth
Yes. using the below link you can acheive the kenod grid responsive design.
http://codepen.io/anon/pen/QwPVNW
In media query please use like this
#media screen and (max-width: 600px) {
.k-grid-content > table {
}
}
I am afraid the Grid currently does not provide you with such responsive design.
I have this working in a bootstrap site via jQuery. Here's how I hid the 3rd and 4th (index 2 and 3) columns when the browser is narrow (under 768 px).
dataBound: function () {
$("#contacts tr > td:nth-child(2)").addClass("hidden-xs");
$("#contacts tr > td:nth-child(3)").addClass("hidden-xs");
$("#contacts thead th:nth-child(2)").addClass("hidden-xs");
$("#contacts thead th:nth-child(3)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(2)").addClass("hidden-xs");
$("#contacts colgroup col:nth-child(3)").addClass("hidden-xs");
}
Unfortunately this creates an index dependency, so you can't shuffle your columns around without updating these rules.
I have written a JQuery based widget with can be used to make a Kendo Ui Grid responsive.
You can get the widget here: https://github.com/loanburger/ResponsiveKendoGrid
Usage: After creating your grid add the following code:
$('#GridId').responsiveGrid(
{ columnsToShow: ['date','name','surname'], columns you want to show in responsive view
mobileWidth: 860, // screen width to trigger the change
idColumn: 'Id', //ID column
tools: ['excel'] // if you have the excel export option or blank if not
});
What it does is is basically only keeps the first column and hides the other columns but changing the client template used. It then created a items using the columns you specified and stacks then top down.
This works for me in most cases where I am just displaying data but not for inline editing or inline custom controls - that's coming later..
Yes., you can do it by setting width for Grid columns.
if you set columns width, kendo will automatically enable horizontal scrolling for smaller resolutions.
I would like to use Font Awesome icons:
<i class="icon-edit"></i>
in the jqGrid pager area instead of the physical images by default.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
Does anyone know how to achieve this?
It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.
jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.
One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:
The original navigator using jQuery UI icons
The navigator with Font Awesome icons:
The code which I used is very simple. Instead of usage
$grid.jqGrid("navGrid", "#pager", {view: true});
I used
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
I added the CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.
UPDATED: I added the code which allows top replace more icons from the pager:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
As the result one get the following pager:
instead of
UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
and then change it after every click on the icon:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Additionally one need to add the CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
To fix the sorting icons I used the code
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
and the CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
As the result one will get the following:
UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.
UPDATED 4: The answer provides solution for Font Awesome version 4.x.
Figured I would put a CSS alternative answer for those interested. One of our developers implemented a JS option, which did functionally work, however, there was a delay before it rendered correctly (not ideal).
We used font-awesome icons for our paging options, and here is how we implemented it.
Found the four classes that jqGrid was using for the paging icons we desired to customize and created the following css to apply base font awesome styles
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Then it is simply a matter of grabbing the content from font-family icon and using them as your own.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So the entire CSS together looks like this
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
And the output on our grid without JS and without delay
By looking at answer from Oleg above, I did the following to simplify things.
Additional CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px;padding-right:2px; is optional
And this only works with icons only with no caption ...
And then just start adding fontawesome icons in navButtonAdd like
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
etc .. You can use all extra functionality from font-awesome like icon-rotate-XX too.
Thisway i did`nt have to remove ui-icon class from spans.
Inspired by #afreeland answer, I created a css available on github which allows you to convert your icons to Font-Awesome icons.
The performance advantage of this over the jquery method that #Oleg described is important in my opinion.
It is also a very elegant solution in my opinion.
You are welcome to use it: https://github.com/guylando/ToAF
Note: you must give priority for this ToAF.css file styles over your other icons styles so that can be achieved for example by copying the css content into a tag in your document.