For some weird reason all the buttons I place inside any gridview appear as really shrunk (like in pic below) even though the gridview is default and has no CSS attached to it.
Could it be some other CSS as I have way too many code to list it here (downloaded free template)?
What could the problem be? How can I fix it?
It is inheriting some style from parent or global input css file. To know where exactly the problem is use IE Developer tool...Select the button in the developer tool and see styles that are not crossed out on the right side of the developer tool
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.