I work on a RCP-application and use the eclipse-css-feature too change the overall font of the application. But when used, the table-elements in the main-perspective does not adapt to the changes. In createPartControl(Composite) the table is filled with content and TableColumn.pack() is called on each one. Before I changed the overall font to Verdana 9px columns always were large enough to hold their content, e.g. "My very long text that is long". Now, however, the columns only display "My very long text that i...". Re-setting the content of the table (clear, fill and pack()) during the setFocus()-function seems to be working, but it also is a pretty bad workaround. Also, this does not solve the problem that I have to wait for the first click to do this.
How do I get my application to pack() table-columns properly on startup?
This is my css:
* {
font: Verdana 8px;
background-color: White;
}
The problem is that the CSS styles are not applied until the SWT.Skin event is generated after the controls are created.
So you need to run your pack after that event. One way to do that is to use Display.asyncExec to run your pack code after the createPartControl has completed. The asyncExec Runnable should then run after the SWT.Skin.
Alternatively you can get the CSS styling engine and force the styling to happen. In a 3.x compatibility view/editor use:
IStylingEngine engine = getSite().getService(IStylingEngine.class);
engine.style(control);
Related
I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)
I have an application which loads a .qss styling file and apply the stylesheet to the whole application. My problem is that it modifies the default QGroupBox styling instead of a subclass of it, and I would like a default-style QGroupBox in one place.
Here is an example of the styling applied application wide that I'm trying to replace by the default one.
QGroupBox {
border: 0px solid gray;
border-bottom: 1px solid block;
}
I have tried to reset the stylesheet by using
_ui->setupUi(this);
_ui->myGroupBox->setStylesheet("");
But this does not work. From what I've gathered, the application-wide styling should have happened duing the setupUi() phase though, and thus be overwritten by the empty (default) stylesheet. This does not seem to be the case.
I have also tried without success to set it directly from Qt Designer, or from the qss file using.
myGroupBox {
}
However, if I put border-bottom: 1px solid red; in the qss file, it is correctly registered and overrule the default style. I do not now the default parameters though, so I cannot set them all by hand if needed.
If I remove the annoying qss rule, it works fine, but it breaks the application ui in 50 other places and I sadly do not have the time to refactor it right now.
Am I missing something when it comes to resetting to the default stylesheet?
Thanks.
You seem to be mixing up the styles with stylesheets. These are different beasts. When a widget has a stylesheet, it is not styled by the style mechanism anymore, because the styles in general aren't flexible enough to be modified by stylesheets, since they e.g. depend on platform-provided images etc. The two mechanisms are exclusive of each other: either one can control the appearance of the widget, but once you use a stylesheet, it's all-or-nothing: the style mechanism is out of the picture.
Simply fix your stylesheet to apply only to the group boxes it should apply to - you can select them by name or name path.
I've a problem while using BIRT report developed tool, the value in parameter is not fully shown. The parameter is display from a dataset (just a simple select statement), the output is correct, just the the dropdown list not fully display the value.
The example below actually is a list of value, but some of the value is very long, the parameter cannot fully display it.
Hope someone can help me or give me some idea to solve this, thanks!
This is a CSS rule. You can't make the width of a combobox dynamic depending on the content of select items, but it can be adjusted for your requirements.
Edit this file: [birt viewer home]/webcontent/styles/style.css
And increase "width" attribute as you like, for example set it to 350px.
.birtviewer_parameter_dialog_Select {
font: Verdana;
font-size: 8pt;
width: 250px;
}
You might have to restart your Eclipse or Application server to take it into consideration, and clear your web-browser caches.
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
I can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?