Since probably version 13 or 14 Netbeans is forcing new line after every property so:
#nav { #include flex; flex-wrap: nowrap; align-items: stretch; flex: 1; }
becomes
#nav {
#include flex;
flex-wrap: nowrap;
align-items: stretch;
flex: 1;
}
Tools > Options > Editor > Formatting
has only Tabs And Indents option for CSS
Is there any way to disable new lines in formatting?
I can reproduce your issue in NetBeans 15, but cannot resolve it. As you point out, NetBeans is hellbent on only allowing one CSS property per line when you format, regardless of how you configure your CSS settings. That must be intensely annoying.
You are not the only person to want to retain multiple CSS properties on a single line. See item #6 on Jira Bug Report NETBEANS-4605
Advanced CSS (LESS, SASS) formatting options which requests the following GUI enhancement to be able to achieve what you want:
Unfortunately that bug is still OPEN and Unasssigned, and for some reason does not seem to exist on the current NetBeans bug reporting system on GitHub.
All I can suggest is that you additionally raise a NetBeans Bug Report on GitHub specifically for this issue, citing the affected version(s) of NetBeans and the most recent version of NetBeans that was unaffected (if possible). I confirm that it is a problem on NetBeans 15.
Also, since multiple CSS properties on a single line used to be possible, be sure to present the issue as a bug (i.e. existing functionality became broken), rather than merely a feature request as shown in the screen shot above. I'm guessing that approach may result in your bug report getting higher priority.
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 this css class .number in my React app which I use for numbers in a code editor. This style works perfectly locally, when I start the app with npm start. However, when deployed, this .number class gets overridden by some other .number class, which I have no idea where it comes from, it's no where in my code, and it breaks my style. Тhis is the style from my deployed app (pic 1). The first .number is my class, defined in index.css and this other is defined in other.sass but this file doesn't exist in my code.
The second photo describes the style used in my local app. As you can see, this style and that from other.sass do not correspond. This is the code as well:
.number {
align-items: center;
border-radius: 9999px;
display: inline-flex;
text-align: center;
vertical-align: top;
}
Do you happen to know what is the potential reason for this kind of bug, how can I debug it and how can I fix it?
This looks like some kind of bundler (webpack, parcel) or postprocessing (PostCSS, ...) is runnning via an npm script and generates the "confusing" part which you don't understand and is wrong here.
I would first try to understand which npm script runs when you deploy the app to find out which process generates the interfering class and fix it there. Usually, the command for this script can be found in the package.json in the build script.
If this does not work, simply rename the .number class to .example-number to give it a higher specificity, so that the correct styles are being applied.
In my Codename One app the styling is defined in css. Namely the side menu which I styled based on this great video tutorial. So I have a style defined as follows :
SideMenuTagLine {
cn1-derive: "SideCommand";
text-align: right;
padding-left: 0mm;
padding-right: 0mm;
padding-top: 1mm;
padding-bottom: 0mm;
margin-right: 3mm;
font-family: "native:ItalicLight";
font-size: 3mm;
}
When I tested the tagline showed in Italic, but then I worked further on the css to add other styles and all of a sudden the tagline lost its Italic (simulator and real device).
To make it reappear I have to delete the myTheme.css.res file. But again when I make changes to a css style (not SideMenuTagLine nor SideCommand), the tagline Italic gets lost. Maybe other stylings are also lost but I did not notice.
Here is the previews that I get when the res file is first generated (starting from no existing myTheme.css.res file). One may notice that the KmLabelProgress alignment changes between the unselected and the selected tabs although I did not change it. :
Then if I change anything in the css file (eg : color for a selector) I get the following generated res file. In this case the afore mentionned alignment changes do not occur :
Please note : this is the behaviour too in the latest (3.7.3) CN1 plugin version (as in the previous version).
What can I do to be sure the css styles that I defined in the css file are applied ?
Any help appreciated,
Edit October 9th 2017 :
Here is the beginning of the stack trace that I get when I open the generated res file with the designer from the command line :
2017-10-09 10:37:09.388:INFO:oejs.Server:jetty-8.0.y.z-SNAPSHOT
2017-10-09 10:37:09.441:INFO:oejs.AbstractConnector:Started
SelectChannelConnector#0.0.0.0:9000 STARTING
oct. 09, 2017 10:37:09 AM org.jdesktop.application.LocalStorage getId
AVERTISSEMENT: unspecified resource Application.id using ResourceEditorApp
Exception in thread "AWT-EventQueue-0" java.lang.StackOverflowError
at java.awt.KeyboardFocusManager.getCurrentKeyboardFocusManager(KeyboardFocusManager.java:216)
at java.awt.KeyboardFocusManager.processCurrentLightweightRequests(KeyboardFocusManager.java:2621)
at java.awt.KeyboardFocusManager.retargetFocusEvent(KeyboardFocusManager.java:2946)
at java.awt.Component.dispatchEventImpl(Component.java:4752)
at java.awt.Container.dispatchEventImpl(Container.java:2294)
at java.awt.Component.dispatchEvent(Component.java:4711)
at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:758)
at java.awt.EventQueue.access$500(EventQueue.java:97)
at java.awt.EventQueue$3.run(EventQueue.java:709)
at java.awt.EventQueue$3.run(EventQueue.java:703)
Please note : the full stack trace is longer than the allowed length on SO.
As Shai indicated, this was a but in the CSS generation related to native fonts. I have fixed this bug and released a new CSS plugin (v.1.1.4). To update, simply download the latest cn1css-ant-task.jar into your project's lib directory.
https://github.com/shannah/cn1-css/releases/tag/1.1.4
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.
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!