I got this problem with Firefox and input elements.
JsFiddle
In this menu, if you navigate to "Strumenti" -> "Colonne" -> "Prova6", you will see a table inside a li with two inputs and one combobox.
The inputs seems to be disabled but only with Firefox: with Chrome or IE it's all working as expected.
Any ideas?
After a deep search, I finally found the problem:
$( ".sortable" ).disableSelection();
This line, included in this jqueryUI demo, disable the input in FF.
JsFiddle of the solution
There is also this css -moz-user-select: none; that I personally wrote for disable selection over the text of my menu that cause a wired behavior, alwasys in FF: I will delete it for my solution.
Related
Is it possible to change columns width in Firefox Developer Tools? How can I do it?
When I point over column edge (like Status, etc. on the screenshot) there's no resize tool so I can see whole content.
Update: This feature is now available and enabled by default in Firefox 67. You can disable it (are you crazy?) using devtools.netmonitor.features.resizeColumns flag.
Original answer: As you probably know there is no option to change the column(s) size (as of FF57), the only option you have is hide/show columns. it's easy to do, just right-click on any column, you should see the list of columns and can select/un-select them.
But that's it?! no, you can change the column(s) size using CSS (hack the dev tools), here is the steps:
Open up the dev tools (using F12 or ...)
Click on the gear button, up right corner Go to Settings, shortcut: F1
Check this 2 options:
Enable browser chrome and add-on debugging toolboxes
Enable remote debugging
Hit Ctrl+Shift+Alt+I and Click OK (on security prompt) to open Browser Toolbox
You should be able to inspect the Dev tools using opened Browser Toolbox
Play with CSS (same as you do with normal web page)
Save your custom CSS in userChrome.css file
Need more info about userChrome.css, head to userchrome.org
Here is steps to create/modify userChrome.css:
Open up about:support
Click on Open Folder (in Profile Folder row)
Open/Create chrome directory
Open/Create userChrome.css file
Do what I said in first section
To demonstrate how it works, I change the background color of one of Network tab's columns to red.
And here is my userChrome.css file content (for above example)
.requests-list-file.requests-list-column {
background-color: red !important;
color: #fff !important;
}
I used !important just for time's sake, don't use of that if you can
While there seems to be some recent progress on the feature request and its dependency, the latter was created in 2016 so it's fairly safe to assume it could be a while yet before Firefox supports column resizing by default.
In the meantime, here's the CSS I've added to my userChrome.css:
.requests-list-header-button {
padding-inline-start: 0px !important;
padding-inline-end: 0px !important;
}
.requests-list-method {
min-width: 30px !important;
}
.requests-list-status {
min-width: 40px !important;
}
.requests-list-file {
min-width: 100px !important;
}
I wanted to enlarge the File column, but found that reducing the width of the Status and Method columns instead made a big improvement alone. The styles also remove side padding from the column headers to avoid the text being truncated with ….
These are the classes for the default columns:
requests-list-status
requests-list-method
requests-list-file
requests-list-domain
requests-list-cause
requests-list-type
requests-list-transferred
requests-list-size
requests-list-waterfall
Note that if you reduce column widths too much, it may throw off the alignment. See Mehdi's answer if you don't know where to save your userChrome.css or you need to find classes of other columns.
In the Firefox developer tools rules view the selectors are pink. Sometimes there grayed out selectors together with the pink ones. What do they do?
In my experience, the greyed out html elements are those with display: none;
If a rule has multiple selectors, the ones that apply to the selected element are brighter (for me, green; but apparently for you, pink) and the ones that do not apply to the selected element are dimmed.
I would like to use CKEDITOR.replace('mytextarea') but when my page loads it will grey out my text in textarea (so it seems to be blank) as well as items in toolbar are greyed out so I can't to modify it.
Why this happens and how to do it correctly?
I found problem! There must be something wrong with ckeditor files. I downloaded new package and now it is working.
I am not able to make the rich text editor from YUI 2 (see http://developer.yahoo.com/yui/editor/) works in Firefox
My project--> A forum
Here are images of what's happening:
In IE with no comment:
http://imageshack.us/photo/my-images/39/ienocomment.jpg/
In IE with comment:
http://imageshack.us/photo/my-images/13/iecomment.jpg/
In Firefox with comment:
http://imageshack.us/photo/my-images/217/firefoxcomment.jpg/
The bug happens here:
In Firefox with no comment:
http://imageshack.us/photo/my-images/444/firefoxnocomment.jpg/
For some reason, the UI shows X X X X X and the top bar is buggy...I have NO idea why it would do that in Firefox when there is no answer for the question..
To workaround this, I tried to download YUI 3 Editor, but I can't seem to be able to add the toolbar proprieties correctly. All I want is a workable text area to put things in bold, specify colors, etc (basic stuff). If you can provide me an editor that will do that, i would be very happy.
If you need other information, let me know, thanks.
Here is the code:
http://pastebin.com/yiEiYH2V
The default margin is specified for Firefox as:
$(".test_div").css("margin-top","5px");
This is revealing the xxxx toolbar placeholder labels which are hidden otherwise. Adding a comment suppresses the margin due to collapsing margins.
In the Webkit Inspector, I can go to the elements panel and unfold the DOM elements so I can see what I'm interested in.
So far, when I find what I'm looking for, change code, and reload the page, the DOM tree in the Elements panel is folded back up.
Is there any way to either, A) Get the Inspector to remember where I was and try to open the DOM tree to where I was, or B) Keep the DOM tree unfolded by default?
I had this same question. I'm using Chrome on Win XP so I can only tell you the solution I found for Chrome, but I imagine the process is very similar for other Webkit browsers.
I navigated to the Chrome Application Data folder:
C:\Documents and Settings\[USERNAME]\Local Settings\Application Data\Google\Chrome\Application[NEWEST VERSION]\Resources\Inspector
Obviously fill in [USERNAME] and [NEWEST VERSION] with the folders YOU have on your computer.
Closed the browser.
I opened DevTools.js in Notepad++ and started hunting. It turns out that the webkit inspector adds a css property of "expanded" on tags when you click on the little arrow.
On line 1484 There is a boolean for the default value. I simply changed
this.expanded=false to this.expanded=true
Fired up Chrome and badda-bing, all the elements in the inspector are expanded by default.
With the help of this article I managed to get this to work with OSX Safari.
Open up the inspector, find an element (any will do) then right click and "Inspect Element". You'll need to pop this out (bottom left button) and then make a note of the path in the title bar. Mine is
/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js
Then, I used vi in the terminal:
sudo vi /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js
You need sudo as it's a read-only file for most users.
Then I did a search for this.expanded = false; (you can do this in grep by hitting a / and then typing the search term and pressing enter, then n for the next match.)
On line 1175 I found:
this.expanded = false;
and changed it to:
this.expanded = true;
it's underneath:
function TreeOutline(listNode)
{
Saved the file (ZZ in vi) and restarted the browser. Now elements stay expanded. YMMV.
Safari v5.1.7 (6534.57.2), OSX 10.6.8
You need to select the DOM element in Webkit Inspector, rather than just leaving it highlighted via the right click 'Inspect Element' contextual item.
If editing content in the Inspector, make sure you re-select the DOM element itself; As opposed to it's textual content, or the DOM element will fold itself back up.
I did not want to play around with internals so found a workaround.
Give the element an ID.
<div id="inspectMe" className={classes.answerGroup}>
Open Web Inspector
Select the Elements Tab
Search for the ID
Click on the result to open the Styles
Web Inspector remembers the search term, so just need to hit search again after reload.