GTK+3.0 - Scrollbar on Treeview/ScrolledWindow - CSS properties to control scrollbar - gtk3

Developing on GTK+3.0 (3.22.30), openbox on X11, Ubuntu 18.04 server.
I've have been struggling to figure out the CSS model to control the appearance of the scrollbar on a GtkTreeView ScrolledWindow. I have had very limited success. The only thing I have been able to control is the color of the slider when clicking/moving on it and the background color of the trough. The other properties don't seem to have any effect. I found that the color property of the trough is not supported and seems to cause a parsing error.
The application uses a touch screen so I need the scroll bar to appear all the time, not just when a cursor-pointer hovers over the control. There is no cursor-pointer in the touch application.
I have tried these CSS definitions below. Some of this is simply experimental trying to get something to work. I've tried moving the width, min-width and the 'has-xx-stepper' but they don't seem to have any effect. I'm still stuck with the same simple default slider but with some basic color control. I can't interpret how the CSS node model for a scrollbar is to be referenced as I can't find an example.
scrollbar {
has-backwards-stepper: true;
has-forward-stepper: true;
has-secondary-backward-stepper: true;
has-secondary-forward-stepper: true;
min-width: 80;
}
trough {
background-color: #00ee00;
}
slider {
color: #00FF00;
slider-width: 80;
min-width: 80;
has-backwards-stepper: true;
has-forward-stepper: true;
}
Using the GTK+ Inspector (which allows some examination of Gtk apps' CSS attributes) I can't find the 'has-backwards-stepper' and other properties as referenced in the GTK3 GtkScrollbar documentation. This is handy place to test the CSS syntax but I can't figure out how to control the appearance as I need.
What is the syntax that I should be using to get the stepper buttons, to fix the width and have it appear at all times? A pointer to the documentation that explains this would be helpful. I've already been through the GTK 3 CSS Overview exhaustively which is no help here.

I was able to determine that the has-xxxx-stepper properties appear to be read only but don't actually connect to anything as I can change.
I was able to get the scrollbar to appear to the right of the scrollwindow with the 'overlay-scrolling' property.
sw = gtk_scrolled_window_new(NULL, NULL);
gtk_container_set_border_width( GTK_CONTAINER(sw), 0 );
gtk_scrolled_window_set_policy( GTK_SCROLLED_WINDOW(sw), TK_POLICY_NEVER, GTK_POLICY_ALWAYS ); //scroll bars
//Set scrollbar to ALWAYS be displayed and not as temporary overlay
g_object_set( sw , "overlay-scrolling", FALSE , NULL);
I was able to further control the width of the scrollbar trough with this:
GtkWidget * ptrVscrollBar = gtk_scrolled_window_get_vscrollbar ( TK_SCROLLED_WINDOW(sw) );
g_object_set( ptrVscrollBar ,
"width-request", 30 ,
"margin-bottom", 30 ,
"margin-top", 30 ,
NULL);
Update: I found the that CSS syntax was a little different for the slider. With some experimentation I was able to override the width and height of the slider component. The px units are required for these property values and without them they are ignored.
slider {
min-width: 28px;
min-height: 80px;
}
I have not figured out how to enable the stepper buttons to appear. Do these now have to be manually / separately created with GTK3? I have some prototype code using the vadjustment object properties of the scroll window but what a pain to hook up for every scroll bar I have.

Related

Allow pointer event to propagate to mapbox map

I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.
Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.
Here is a codepen showing what I'm talking about
You were super close. The correct answer is pointer-events: none;
Updated codepen.
(Edit - John)
For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class
CSS
.no-pointer-events {
pointer-events: none !important;
}
JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');

resize jPanel on VLCJ fullscreen for controlsPanel

I am using netbeans to create a media player using vlcj-3.8.0.jar.Here is the source code for netbeans users,vlcj gui netbeans based just unzip and open project in netbeans(contains playlist, volume, plays in canvas)I know placing the whole code violates the SSCCE standards but it might be informative for others. Another reason is that if you are a netbeans user then running the code and finding the problem is very easy for you, u wont need to search the entire code. So my problem, all works fine but i am having problem when i toggle the fullscreen. The controlsPanel as you can see in the picture below wont resize and i dont how how to do it. I tried to put the panel in border layout but it messes everything inside it(i have jslider and jlabels inside it).
http://postimg.org/image/kcxuwgjgx/
Here is a code to toggle on and off for fullscreen, where
jPanel2: is in border layout that has canvas inside it,
controlsPanel: panel in absolute layout that has jslider and jlabels has properties i set through netbeans as horizonal size and vertical size as default, horizontal resizable as ticked
private void toggle_fullscreenMouseClicked(java.awt.event.MouseEvent evt) {
if(fullscreen_check==1){
controlPanel.setVisible(true);
titlePanel.setVisible(false);
mediaPlayer.setFullScreen(true);
//at fullscreen the controlPanel should be resized horizontally to the end of the screen
controlPanel.setPreferredSize((new Dimension(1200,100)));
controlPanel.setSize((new Dimension(1200,100)));
controlPanel.revalidate();
//here is the problem:controlPanel stays the same...why??
fullscreen_check=0;
}
else{
mediaPlayer.setFullScreen(false);
Dimension ss = new Dimension (10,10);
jPanel2.setPreferredSize(ss);
jPanel2.setSize(ss);
jPanel2.revalidate();
fullscreen_check=1;
}
} `
I tried to use the code:
controlPanel.setPrefferedSize((new Dimension(1200,900);
controlPanel.revalidate();
//OR:
controlPanel.setSize((new Dimension(1200,900);
controlPanel.revalidate();
but it wont work...any help or idea will be greatly appreciated!! If any of you guys tried my code and make the controlsPanel to be resized to full screen, i will be very grateful!!

Issue with scrolling in iOS 5 using -webkit-overflow-scrolling

I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.

Gtk Spinner Not Appearing

I'm trying to get a Gtk::Spinner object to display while calculations are in progress but nothing appears to be happening. The snippet of code looks like...
{
Gtk::Spinner spinner;
spinner.start ();
// do some work...
spinner.stop ();
}
I'd have thought the spinner needed to know which dialogue it appears over but I can't see any way of feeding that into the object. Does anyone know where I could find a worked example? I can find the Gtk documentation in many places, but that isn't helping much.
In short, here is a quick checklist if Gtk::Spinner is not appearing on screen:
Make sure librsvg is installed.
Check if your currently active Gtk theme has an image file with base name "process-working-symbolic" (e.g. /path/to/your/theme/icons/scalable-up-to-32/status/process-working-symbolic.svg).
In your app code: Make sure you added the spinner object to some parent widget / container: vbox.pack_start(spinner, Gtk::PACK_SHRINK);
In your app code: Ensure all widgets are actually made visible: show_all_children();
In your app code: Finally you need to call spinner.start() for the widget to actually appear and spin on screen.
In detail:
The actual Gtk spinner widget code (see function gtk_spinner_class_init() in gtkspinner.c) is not doing any drawing on its own. In fact its code is very little. All it does is adding CSS code to the gtk widget:
it assigns the CSS class "spinner" to the widget
and it automatically adds and removes the CSS pseudo-class "checked" whenever the widget's boolean gtk property "active" changes.
So the actual look (icon) and the animation is defined by your current theme's CSS file. E.g. in Gtk's default theme's gtk-contained.css file you find the following:
spinner {
background: none;
opacity: 0;
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
};
Which means it will automatically search for an appropriate image file with base name "process-working-symbolic" in the theme's "icons" directory tree. And the actual spinning animation is defined in the same CSS file by this:
spinner:checked {
opacity: 1;
animation: spin 1s linear infinite;
};
In most other themes these CSS code portions for the spinner widget are pretty much identical.
Now here is a common problem with this: in most themes the spinner image is an SVG file (e.g. typically "process-working-symbolic.svg"), but the stock Gdk pixbuf loaders do not support the SVG format at all. They support a variety of other image file formats, but for actually allowing Gdk/Gtk to load .svg files you need to install a third-party pixbuf loader capable to do so like librsvg.
Alternative:
In case you cannot or don't want to bother to install an SVG capable Gdk pixbuf loader like librsvg, then you can also simply add image file(s) with the same base name, but in another file format like "process-working-symbolic.png" to your theme's icons directory tree. So either draw or download some spinner picture then scale it and place them several times to the resolutions listed in your theme's "icons" directory, e.g.:
/THEMEDIR/icons/8x8/status/process-working-symbolic.png
/THEMEDIR/icons/16x16/status/process-working-symbolic.png
/THEMEDIR/icons/22x22/status/process-working-symbolic.png
/THEMEDIR/icons/24x24/status/process-working-symbolic.png
/THEMEDIR/icons/32x32/status/process-working-symbolic.png
/THEMEDIR/icons/64x64/status/process-working-symbolic.png
/THEMEDIR/icons/256x256/status/process-working-symbolic.png
/THEMEDIR/icons/512x512/status/process-working-symbolic.png
Also you should know: Whenever you do spinner.start() the spinner icon immediately appears on screen, but even on a decent machine it typically takes almost a second before the spinner starts its animation.
Did you call
spinner.show ();
and add it to some window?
Moreover, your calculations may block the UI, so it is not updated. Call
while (Gtk::Main::events_pending ())
Gtk::Main::iteration ();
once in a while.
To change the mouse cursor to "busy" you can do the following:
Glib::RefPtr<Gdk::Window> window = dialog.get_window();
if(window) {
window->set_cursor(Gdk::Cursor(Gdk::WATCH));
Gdk::flush();
}
To change it back, do
window->set_cursor();
instead.
Disclaimer: I usually work with GTK in C, and have translated this on the fly...

How to change background color of GtkTextView?

How to change background color of GtkTextView? I tried with normal widget set bg functionality but gtk is just changing border color of GtkText View.
Plus can some some please explain me with simple example, that how to change Text Color/Font/Text Size in GtkTextView (Whole text in GtkTextView)?
I fond some examples but they are not working..
Thnaks,
PP.
gtk_widget_override_background_color()
This the GTK 3.x+ way (until GTK 3.16). From
https://developer.gnome.org/gtk3/unstable/GtkWidget.html#gtk-widget-modify-base
"gtk_widget_modify_base has been deprecated since version 3.0 and should not be used in newly-written code. Use gtk_widget_override_background_color() instead"
UPDATE: thegtknerd notes that this method too is now deprecated and it has been since 3.16.
gtk_widget_modify_base()
http://library.gnome.org/devel/gtk/unstable/GtkWidget.html#gtk-widget-modify-base
As of gtk3, I believe the proper way to do that is through CSS. Register a gtk style sheet though GtkCssProvider, then you can write this CSS:
textview text {
background-color: #theme_bg_color;
}
We can see the relevant CSS nodes in the documentation for GtkTextView. In this case I put #theme_bg_color which is an adwaita CSS variable, but you can as well put anything that goes in a usual CSS file, like red or #ff0000.