Using a theme that extends Triton, I find that the resize handles on instances of Ext.window.Window are 10px wide. That thickness interferes with scrollbars (and maybe other things). I cannot, however, figure out how what theme variable influences resize handle thickness.
https://fiddle.sencha.com/#fiddle/1fun
I'm not sure which version of Ext you're using, so hereby I assume you use 6.0.2. I found in the documentation there's a Resizer component that is used by several components including Window. Here's a link: http://docs.sencha.com/extjs/6.0.2-classic/Ext.resizer.Resizer.html
If you there look into the theme veriables you'll find this: $resizer-handle-size. By default this is set to the same width of $panel-frame-border-width. To override that you'll need to change the number in your sass yourself.
Hope this helps you out!
Related
In my app, on iphone as well as in the iPhoneX skin on the simulator, the size of StatusBar (inside the Toolbar) is for some reason too small/thin, so the title of the Form is shown partially hidden by the iPhoneX notch.
I've tried to understand how to fix this, but I simply can't figure out how the size of the StatusBar is set. I don't change the size of the StatusBar UIID in my css file, nor in my code and yet it is smaller than if I create a fresh Hello World example with the iPhoneX.skin.
I first thought it could be the SafeArea which changed the size, but it doesn't seem so. Then I thought the default theme (or the values of the Default UIID in the css) could change the size, but it doesn't seem to be that either. I probably miss something obvious, but I'm stuck so any help would be greatly appreciated.
PS. I could of course force the size of the StatusBar in css myself, but then I'm not sure it will work on the various devices, so I prefer rely on the default value defined by CN1.
The StatusBar UIID is defined internally and is generally hard coded to a value that fits for most themes. This very much depends on the padding in your Title UIID which is often large and works in tandem with the status bar. Assuming your title has 0 padding you might need more padding to the StatusBar.
Assuming you're using CSS you can use something like:
#media platform-ios {
StatusBar {
padding: 7mm;
}
}
I started a Codename One project with the "Hello World bare bones". I used to define the styles in the Theme tab from the Designer but now it is becoming tedious.
Actually for some selectors, even if I override (unchecking the Derive box) some properties the style is not changed in the Designer (see below) or in the app itself.
However, in the list of selectors, the color is not the one I selected but the alignment seems to be it.
It seems that the theme is locked somewhere. Do I make a mistake, or should I set a constant to "unlock" the theme, or even should I clear some directories?
Please note that I am using NetBeans with designer V 1.1
.
Edit March 1st 2017
Following #Diamond's great tips, I was able to change the foreground color by setting the Border to empty (instead of NULL). However now the alignment is still not what I expect (see below). How can I do for this property ?
Any help appreciated,
In the Designer, Border is superior to background color and background image. Which means if the border image is set, a background color will have no effect unless the border is just a stroke or line.
Always solve this with these few steps:
Go to the Border tab and uncheck the override.
Click the ... button next to Border Help and a new Dialog will show.
Change the Type (First line) to Empty and click Ok.
Your background color will now have an effect.
I want to apply RoundBorder style to MultiButton Line2 label when horizontal layout is set to true but calling mb.setHorizontalLayout(true); but I can't because LineX labels are not accessible outside the MultiButton.
I know that I can create curved border using theme designer and applying the uiid to the label using any of the setUIIDLineX() method but I don't want to use it because it didn't give me what I want in some device pixel density.
Is there any other way to style MultiButton internal components(Labels) through code?
Again, why is it that LineX labels are not exposed like icon label?
Exposing the LineX labels will equally enable developers to set icons for the individual labels depending on what the developer want to accomplish.
Thanks.
No one asked for that so we didn't add such getters. You can file an RFE for that or submit a pull request which will probably be quicker.
Notice you can style the round border in the current version of the designer so you can use a the UIID's to set the round border too.
Comparing Extjs crisp and classic themes, apart from styling, the there is a difference with size / scale of ui.
The Crisp theme looks its zoomed up 110% of classic.
Is it possible to scale down the size of crisp theme to that of classic ?
I realize that with styling comes padding, borders and image sizes which would be set for compoentns under each theme.
But i would still like to know if scaling down the size is possible ?
Thanks in advance
Yes, the font size is larger (13px in crisp, 12px in classic), plus each them is using a different font scheme, which will add a bit of a difference as well.
To your question of scaling down the font size, the answer, of course, is yes this is possible. You could go down a bad road of creating a bunch of CSS rules to override what's already in crisp, and that would certainly work.
However, the better option would be to create your own theme altogether. You could create a theme that extends crisp, and then simply tweak the various areas that you want to be different (font sizes, paddings on different components, etc). If you do this, keep in mind that the crisp theme extends the neptune theme, while classic only extends neutral (which neptune also extends). I say this because if you look at the actual crisp theme, it's pretty bare in terms of the things you're looking to tweak (padding, margins, etc). That's because the majority of these derive from the neptune theme, so you'll probably do yourself a favor to become acquainted with both themes in order to most efficiently achieve the result you're after.
If you've not done a custom Ext JS theme before, be sure to check out the guide here: http://docs.sencha.com/extjs/5.0/core_concepts/theming.html. This guide also has a nice chart that illustrates the theme inheritance for the default theme packages, so be sure to take a look at that as well.
Hope that helps!
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
Sounds like you want to have pretty fine control over the font sizing.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
Something like:
p {
font-size: 2vmax;
}
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
SlabText
FitText