I cannot change attributes of HTMLFlow, i would like to use my defined css for the HTMLFlow and then setAttribute for FontSize in the constructor but nothing changes.
First I extend HMTLFlow like this.
class MyHTMLFlow extends HTMLFlow{
public MyHTMLFLow(width, fontSize){
setStyle("myHtmlFlow");
//here i tried all posibilites but nothing works
setAttribute("fontSize",fontSize);
getElement().getStyle().setProperty("fontSize",fontSize);
//the width works ok
setWidth(width);
}
.myHtmlFlow{
width:250;
font-size:12px;
}
Please help me to make HTMLFlow size defined.
Use setStyleName, I used this and it works:
HTMLFlow newsFlow = new HTMLFlow();
newsFlow .setPadding(7);
newsFlow .setStyleName("plSectionText");
with my css:
.plSectionText {
font-size: 1.3em;
}
Related
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.
In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?
try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}
You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.
If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.
It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}
Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class
Has anyone had any success applying your own CSS style to GWT's NotificationMole.
If I add my own stylename then that style only applies to the outer DIV which is NOT removed when the mole is hidden, and I can't fing a way to apply style to the inner divs...
A dirty solution :
package com.google.gwt.user.client.ui; // important for package visibility access
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;
public class NotificationMoleHelper {
protected NotificationMole notificationMole;
public NotificationMoleHelper(NotificationMole notificationMole) {
super();
this.notificationMole = notificationMole;
}
public SpanElement getNotificationText() {
return notificationMole.notificationText;
}
public DivElement getHeightMeasure() {
return notificationMole.heightMeasure;
}
public DivElement getBorderElement() {
return notificationMole.borderElement;
}
/**
* Change heightMeasure's background color
*
* #param backgroundColor
*/
public void setBackgroundColor(String backgroundColor) {
getBorderElement().getStyle().setBackgroundColor(backgroundColor);
}
}
Example :
final NotificationMoleHelper notificationMoleHelper = new NotificationMoleHelper(notificationMole);
notificationMoleHelper.setBackgroundColor("#FF1111");
Well your NotificationMole has an associated ui.xml file, so any custom styles you want to apply should be applied there.
This might be easy: define your own style first, after init of the NotificationMole, just replace its built-in class with your defined ones, that's what i did in my project. Using DOM to replace classes or using gwtquery, both are OK.
A further alternative which might be more palatable for some people:
Set the id of the mole mole.getElement().setId("mole"); or mole.ensureDebugId("mole")
Then in your ui binder file add style:
width: 200px !important;
height: 60px !important;
}```
I tried without the !importants but gwt was including default widths and height so it wasn't listening to my styling. You won't need the !important if you add styles that gwt doesn't add by default.
I created a "Slider" subclass of QWidget and would like to be able to style it with Qt's stylesheets. Is there a way to declare the widget to Qt application so that this setting in the application stylesheet is applied to all sliders ?
Slider { background-color:blue; }
Or if this is not possible, can I use a class like this ?
QWidget.slider { background-color:blue; }
The widgets have a "className()" method that is accessible via the meta object. In my case this is:
slider.metaObject()->className();
// ==> mimas::Slider
Since the "Slider" class is in a namespace, you have to use the fully qualified name for styling (replacing '::' with '--'):
mimas--Slider { background-color:blue; }
Another solution is to define a class property and use it with a leading dot:
.slider { background-color:blue; }
C++ Slider class:
Q_PROPERTY(QString class READ cssClass)
...
QString cssClass() { return QString("slider"); }
While on the subject, to draw the slider with colors and styles defined in CSS, this is how you get them (link text):
// background-color:
palette.color(QPalette::Window)
// color:
palette.color(QPalette::WindowText)
// border-width:
// not possible (too bad...). To make it work, you would need to copy paste
// some headers defined in qstylesheetstyle.cpp for QRenderRule class inside,
// get the private headers for QStyleSheetStyle and change them so you can call
// renderRule and then you could use the rule to get the width borders. But your
// code won't link because the symbol for QStyleSheetStyle are local in QtGui.
// The official and supported solution is to use property:
// qproperty-border:
border_width_ // or whatever stores the Q_PROPERTY border
And finally, a note on QPalette values from CSS:
color = QPalette::WindowText
background = QPalette::Window
alternate-background-color = QPalette::AlternateBase
selection-background-color = QPalette::Highlighted
selection-color = QPalette::HighlightedText
I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:
TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
And:
public interface MyResources extends ClientBundle
{
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
String slickTab();
}
In the CSS
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
But the appearance don't change. What I am doing wrong?
You might be able to force this in CSS.
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000 !important;
font-weight: normal !important;
}
Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.
Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):
.gwt-TabBar.slickTab .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
The interface MyCssResource need to be inside MyResources.
Here's an exemple :
public interface Resources extends ClientBundle
{
public static final Resources INSTANCE =
GWT.create( Resources.class );
/***********************************************
* Home
***********************************************/
#Source( "./css/home.css" )
public HomeCss getHomeCss();
public interface HomeCss extends CssResource
{
String loginBtn();
}
/***********************************************
* Another Page
***********************************************/
#Source( "./css/AnotherPage.css" )
public AnotherPage getAnotherPageCss();
public interface AnotherPage extends CssResource
{
String title();
}
}
This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :
HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );
Don't hesitate to ask if there's anything you didn't understand.
.slickTab .gwt-TabBar .gwt-TabBarItem is going to match something with class gwt-TabBarItem inside something with class gwt-TabBar inside something with class slickTab. I think you just want .slickTab .gwt-TabBarItem for the CSS selector.
I highly recommend using FireBug to inspect the HTML structure generated by GWT and how your CSS selectors are applied to it.
The line:
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
Modifies the class element attribute. And INSTANCE.css().slickTab() does not do what you think. These methods without annotations bring back to java the #def's in the css. To make what you want add to MyCssResource:
#ClassName("slickTab")
String slickTab();
So, when GWT garbles the css upside down that method will return the corect class, ej "awEs". These GWT guys are obsessive about squeezing stuff :)
And remember, firebug & chrome-inspector are your friends.