At the beginning - I am sorry if title is not accurate. I just don't know how to call it properly.
Is there a way to find all paths related to some file, in my case it is bootstrap.min.css (it could be with unminified version) within a project? I mean, like on this screen:
So I want to find in DevTools (or may be in WebStorm, if it is simpler to do so) all Bootstrap paths that are related to all elements in project. At above screen i selected <nav> element with some Bootstrap classes, which I can see on the right. I emphased (red rectangle) Bootstrap CSS source file paths - already filtered by DevTools (orange rectangle). I could of course manually click on each link to exact line, but there are many HTML elements and some of them have multiple classes, there are few pages also. So it will take long time to click in all such links.
Is there a quick way to filter/find all such paths (that marked as red), which are used by Bootstrap CSS selectors to match all HTML elements in project?
Open DevTools
Overflow Menu > More Tools > Coverage
Click record in the toolbar of the drawer panel
Stop recording and view results
When viewing results you will be taken to the appropriate file in the Sources panel. This will then highlight each line in the gutter either red or green to indicate whether or not it was used. This works for CSS and JavaScript.
Related
I am designing my app UI with the GUI Builder. I created a new Form and defined a style as follow :
FinishFlagIcon {
background-image: url(pics/FinishFlag.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
font-size: 11.9mm;
}
I set this style on a label and it appears on the GUI Builder.
However when I launch the project in the simulator it does not appear anymore.
I also tried to use a Scaled Label and defined the icon as FinishFlag (which was present in the res file), and again it appeared in the GUI Builder but not in the simulator. Of course there is no error printed in the console telling me the file could not be found.
Please note: the res/myCustomTheme.css folder holds all the subfolders related to the png (and those subfolders are populated with low to hd pngs) and the src/theme.res has the pictures (folowing Shai's advice) :
So what should I do to make the picture appear in the simulator ?
Edit : I tried to hand code the UI and added a Label (with the UIID defined above) to the the central area of a BorderLayout. I does not appear either until I add 3 spaces or more to the Label. I did not try again with the GUI Builder. It looks odd to me, is it done on purpose ?
Edit September 13th 2017 : If I build the app and open it on a real Android device then the labels appear.
Edit September 15th 2017 : For people having the issue of component not showing, as advised in the accepted answer the solution consists in removing top or bottom constraint of the component not showing and setting it to auto (click on the lock) so that there is enough space for the components. So eventually after setting to "auto" the bottom constraint of the progress bar an labels the expected result appear on the simulator :
Any help appreciated,
The images in your issue are a red herring. It looks like the problem is with your layout insets. Notice that none of your lower components are showing up in the simulator. The "progression" label, the three zeroes, etc...
I can't see the constraints you are using for the flags or the zeroes labels, but I can see that the "progression" label has fixed insets on both top and bottom. This may result in a zero height if there isn't enough space for it. Try changing either the top or bottom insets to "auto" so that they are flexible.
Try changing the simulator to use the desktop theme so that you can resize the window and see how the form looks at different sizes.
You can also easily verify this by overriding the layoutContainer() method of the form, and check the height that your flag label is getting:
public void layoutContainer() {
super.layoutContainer();
System.out.println("finishflag height: "+gui_FinishFlag.getHeight());
}
I'm not sure what's the "right" solution for this so maybe Steve can interject but this is what's happening.
You have two resource files: theme & theme.css.
The images in theme.css work great for your styles. However, since the loading process loads theme and not theme.css the simulator is unaware of these images as the theme res file doesn't know of them.
The GUI builder is probably scanning all the res files here so it lets you do that which might be a mistake... You have the following options to workaround this:
Load theme.css and discard theme - you will need to define the inheritNativeThemeBool flag and should no longer use the designer tool if you take that approach
Use the designer tool to load the images rather than CSS
Explicitly load the css res file using Resources.open and explicitly pass it to the Form
Explicitly load the css res file using Resources.open and set it as the global resource file
Getting started with Eclipse Neon.
Pleasantly surprised to see that we can now recapture nearly all wasted space from the UI with little effort.
For example, Gtk 3.20 (on Linux) streamlines scrollbars and gutters to the point where there's no longer a need to create a custom plugin to hide space-wasting elements. To hide entire toolbar row, just a click away: Window > Appearance > Hide ToolBar. Bottom status bar? Just define override attribs and import custom css file into target theme a la #import('custom_gtk.css'):
#org-eclipse-ui-trim-status,
#org-eclipse-ui-trim-vertical2,
#org-eclipse-ui-main-toolbar {
visibility: hidden;
}
There is, however, one issue I have been unable to workaround via custom css: in split editor layouts a separate top row appears with min/max buttons. The row serves no purpose since max button is not attached to any editor panel file (i.e. clicking max button does nothing). The end result is 20-30px of wasted vertical space.
Have tried various override incantations using CSS Spy, but none have worked. Would love to find a solution to this problem as out of the box space preserving VIM-like editing is nearly at hand in Neon.
Here's E4 Bugzilla tracker issue (generally not much activity there so trying SO in hopes of finding a solution or possible workarounds).
This is a bit heavy handed but does the trick. In my eclipse plugins/org.eclipse.ui.theme.../css directory I have a custom_gtk.css file with, among other overrides, the following:
CTabFolder {
swt-maximize-visible: false;
swt-minimize-visible: false
}
Hides all min/max elements and the extraenous row in which the elements are defined (if editor tabs exist then the row remains, only min/max buttons are hidden).
I'm working on application for embedded and we have 256x64 grayscale screen. Qt 5.3 perfectly renders on that screen with -platform linuxfb option. Obviously, we save every pixel of space, so I faced with trouble: Qt Designer adds excess 1 pixel spacing for every layout element deeper in hierarchy. So they accumulate for the most deep widgets. More precisely, for some reason child element of layout components gets coordinates (1,1) relative to parent. So, it's true for every widget except for root widget. Picture below demonstrates accumulated spacings (thin and thick red lines), and (1,1) coordinates of the very first child widget.
I believe it's Qt behavior itself, not just Qt Designer issue (not tested yet). But I can't work further even if it's shown in Designer only: I need to have pixel-exact view while designing.
Of course, every spacing and margin of every component in form set to 0.
Manual coordinates assigning (from code) eliminates the problem of course, but I need to generate code by uic.
So, my question is: how to avoid such spacings? Fixing Qt core sources can be (hard) option too, since anyway we recompile Qt for the project.
Mirror post on Qt forums
Thanks.
Ilia.
If you select Form > View Code, you can see that the geometry is not actually used for widgets which are inside a layout. So the numbers you see in the Property Editor are purely informational and have no relevance to the eventual code that is generated from the ui file (which is why they are greyed out).
The one pixel offset is there because Qt Designer needs space to draw the red boxes around layouts. They have to be be represented somehow, so I don't see how this can be avoided given the way Qt Designer currently works. If you want a more accurate reprentation of the final results, I suppose you will have to show a preview.
There is a facility in Settings > Preferences > Embedded Design that allows you to specify device profiles (which determine things like style, font, and screen resolution). This will add a new entry to the Preview In menu, which should allow you to refine the accuracy of the previews even further.
I am having a problem with displaying my navbar within my Joomla 3 website when resized to a tablet/mobile size.
For some reason I have a grey nav button appearing on the left and when i click this a blue nav bar appears on the right hand side with the menu then dropping down.
How can i make it so that I have either the grey or blue box and then when clicked the dropdown appears but all from one side.
I am confused as to why both are appearing.
When checking with firebug, I can see that one is navbar pull-left class and the other class is nav-collapse.
There are several variables to deal in this matter.
First, make sure version of bootstrap want to use and what you're really using.
Second, if you want to use the bootstrap version 3, make sure it is not charging well, version 2, which is the default Joomla brings. This will you manage in your template.
Third, you may also need an override of template for the code generated by joomla, run right.
I leave part of the code that you need for all this.
Get bootstrap 3 in joomla template. Copy js and css files to directorys and...
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
I edited some files (CSS and PHP) on a website. Now Firebug (2.0.9) displays the same line number for every CSS rule within the Style side panel. I've tried uninstalling and re-installing Firebug - no luck.
Even on this website, every rule I inspect says (line 1).
Anyone knows how I can get Firebug to display the correct line numbers again?
Since you say the changes were to the files, not to Firebug, I would say the issue is the CSS file and Firebug is reporting the line number correctly. That is to say there is no new lines in the file - all rules are on a single line.
Take a look at the .css file in a basic text editor and make sure the white space hasn't been removed. If it has, you may still see the text wrap and look to be on separate lines but this is just how the editor is showing it - word wrap can usually be turned on/off in editors.
If it looks like a big block of text then your CSS has been minified most likely.