I want to develop new features in Quod Libet music player.
I need to increase size of specific scrollbar.
There's a function already exists to apply css to a widget:
def add_css(widget, css):
"""Add css for the widget, overriding the theme.
Can raise GLib.GError in case the css is invalid
"""
if not isinstance(css, bytes):
css = css.encode("utf-8")
provider = Gtk.CssProvider()
provider.load_from_data(css)
context = widget.get_style_context()
context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
So I try to apply css as this:
self.scrollwin = sw = ScrolledWindow()
sw.set_shadow_type(Gtk.ShadowType.IN)
#get scrollbar
vscrollbar = sw.get_vscrollbar()
# 1rst attempt
# qltk.add_css(vscrollbar, '* slider {min-width: 20px;}')
#2nd attempt
qltk.add_css(vscrollbar, 'scrollbar.vertical slider {min-width: 20px;}')
I've got same error with 2 attempts:
'min-width' is not a valid property name (3)
Update 1
I try #Herbalist solution, scrollbar component is resized but "slider" always have same size. It add spaces on right and on left of "slider".
vscrollbar.set_size_request(50,-1)
Is it possible to resize slider of scrollbar ?
Screenshot of result (I outline part of scrollbar in green):
I'm not able to success with css, so I use deprecated method:
GtkRange:slider-width has been deprecated since version 3.20 and
should not be used in newly-written code.
Use the min-height/min-width CSS properties on the slider element. The
value of this style property is ignored.
As this:
qltk.add_css(vscrollbar, '* {-GtkRange-slider-width:40px}')
get_vscrollbar() returns a Gtk.Widget so you could try setting the "width-request" property
Related
This is an angular app (but anyone with css knowledge can help), where there is a text area with dynamic content.
So as the content item.text changes the text area should grow or shrink according to the content to fit the content perfectly without any overflow.
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
// dont worry about the placeholder. you can ignore that.
Currently in my case scrollbar appears & it is not shrinking or growing with the dynamic content.
How can I achieve that?
Or if there is a way to convert a regular html <div> to a textarea, you can suggest that too. But prefers a solution for the above one.
I've tried css rules like, max-content fit-content etc... nothing is working out!
Install npm install ngx-autosize
in html add autosize
<textarea autosize [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
then in appmodule
put in imports: [AutosizeModule ],
Demo
This can't be accomplished with just css, it needs JavaScript that has quite a few corner cases and can be tricky. Such as, pasted input, input populated programatically, auto filled input, handling screen size changes correctly, and on and on, and doing so in a way that is reusable and performs well.
Given all that, I recommend using a lib for this.
I've used angular material's plenty of times with no issues, just add material to your project (can be done via angular CLI with ng add #angular/material) and either import the MatInputModule from #angular/material/input or TextFieldModule from #angular/cdk/text-field (TextFieldModule is quite a bit smaller) to the module where you want to use it, then do:
<textarea cdkTextareaAutoSize cdkAutosizeMinRows="5" [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
you can exclude the cdkAutosizeMinRows option and then it will default to 1 row, but you can use that option to set however many minimum rows you'd like to display. You can also use the cdkAutosizeMaxRows option to make it stop growing at a certain number of rows if you wish, otherwise it will grow indefinitely with the content.
blitz: https://stackblitz.com/edit/angular-4zlkw1?file=src%2Fapp%2Ftext-field-autosize-textarea-example.html
docs: https://material.angular.io/components/input/overview#auto-resizing-textarea-elements
https://material.angular.io/cdk/text-field/overview
You can't change the height of the textarea without Javascript. But you can use an editable div instead. In plain HTML something like this would serve the same purpose as an textarea and will resize automatically based on the content.
<div class="font-xl font-bold" contentEditable>Hello World</div>
If you use a <div> which you can edit then it can grow or shrink accordingly.
<div contenteditable="true">This is a div. It is editable. Try to change this text.</p>
The below will loop over the item and compare height to scrollHeight incrementing the height by lineHeight. Then resets the rows once the height is greater than the scroll height
(function () {
const el = document.querySelector('textarea');
dynamicallyResize(el);
el.addEventListener('change', function () { dynamicallyResize(el); });
})();
function dynamicallyResize(el) {
el == undefined && (el = this.target);
const lineHeight = 16;
let i = el.getAttribute('rows'),
height = Math.ceil(el.getBoundingClientRect().height);
el.style.overflow = 'visible'; //triger redraw
while(height < el.scrollHeight) {
height += lineHeight;
i++;
el.setAttribute('rows', i);
}
el.style.overflow = 'auto';
}
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold" rows="2">Starting text that exceeds the 2 row limit initially placed on this particular text area.</textarea>
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
I have an instance of TabLayoutPanel where number of tabs would be set dynamically. Therefore to align tabs to fill whole width of the screen I need to
1) Override gwt-TabTayoutPanel default value width 16384px with auto !important (done);
2) Set width of gwt-TabTayoutPanelTab to proper percentage value (e.g. 2 tabs = 50%. 3 tabs = 33%, 4 tabs = 25% and so on).
I have a simple function for that which goes like this (simplified):
Double cssValue = 100.0/getWidgetCount();
(done)
3) Now here goes my question: how can i set the width of gwt-TabTayoutPanelTab from Java? I bolded Tabs because when i use this.getStyleName(); i got in return gwt-TabLayoutPanel not gwt-TabLayoutPanelTab .
In sum, I can divide my question in two:
-how to access TabLayoutPanelTab css class from GWT?;
-how to set said class width with my dynamically generated percentage number?;
EDIT:
Proper edit of function to determine percentage value.
-how to access TabLayoutPanelTab css class from GWT?;
int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++)
System.out.println(panel.getTabWidget(i).getParent().getStyleName());
}
As you can see there is no direct way to access the tabs. What you can do is access the widgets in the tabs, and get their parent, which is the tab in question.
-how to set said class width with my dynamically generated percentage number?;
If you have a certain amount off possible percentages then you can declare those classes (e.g. custom-Width-25, custom-width-33 etc.) where you specify the width with the !important annotation in order to override everything else.
If the previous solution is not acceptable then you can only use inline css. This means that the element must be already loaded in the DOM. Somewhere in your code where you know that the element is loaded you can call something like this :
int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++) {
com.google.gwt.user.client.Element tabElement = panel.getTabWidget(i).getParent().getElement();
tabElement.getStyle().setWidth(100/widgetCount, Unit.PCT);
}
I am using Jquery UI like this:
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
});
$('.ui-multiselect').css('width', '100px');
What I'd like to do is set the .ui-multiselect for only the #companyType div. Something like this:
$('#companyType.ui-multiselect').css('width', '100px');
Is there a way to do this?
Thank you!
Try this code with minWidth option. It is the minimum width of the entire widget in pixels. Setting to “auto” will disable, and the default is: 225
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
minWidth:100
});
not sure what version you use, but v1.5 includes a new "classes" parameter that you can set for styling your multiselect element.
Have a look here on how to use it :
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
it says
Additional class(es) to apply to BOTH the button and menu for further
customization. Separate multiple classes
with a space. You’ll need to scope your CSS to differentiate between the button/menu:
Example
$("#companyType").multiselect({
classes : "myClass"
});
then in the css file use:
/* button */
.ui-multiselect.myClass {}
/* menu */
.ui-multiselect-menu.myClass {}
If you want to set that particular css rule for only elements with class .ui-multiselect contained in the div #companyType I think jquery ui has no influence in it.
Try this:
$('#companyType .ui-multiselect').css('width', '100px');
This will set width = 100px to all elements contained in #companyType that have a class 'ui-multiselect'
Another simple method for adding width to the multiselect list box is like these
It is easy than adding another class or inline styling
$('#companyType .ui-multiselect').width(200);
This will set a with of 200 px to the specified list box
For the reference, if you want to a percentage for the width (e.g 100%) apply it within resize event of the window.
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', '100%');
});
You can also assign it to another element's width dynamically:
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width'));
});
Here is the problem. I've created custom RectangularBorder and set it as border skin for TitleWindow. After this manipulation inner content of window is starting at 0,0 point of it. How could I set offset of it?
Just setting top padding does not work because scroll bar still begins from the top of the window after this manipulation.
There are lots of problems with trying to skin panels in Flex 3, and TitleWindow inherits from Panel.
This is the best explanation I've seen. (I'm not the same Glenn referenced in the italics :)).
For programmatic skin it went out pretty simple. One should override function get borderMetrics to do so:
public override function get borderMetrics():EdgeMetrics
{
var borderThickness:Number = getStyle("borderThickness");
var cornerRadius:Number = getStyle("cornerRadius");
var headerHeight:Number = getStyle("headerHeight");
return new EdgeMetrics(
borderThickness,
borderThickness + headerHeight,
borderThickness,
borderThickness);
}
try to use padding-top , padding-left etc as a style for your TitleWindow