I am playing with the popover component in the Dart "bee" Web Components package (bee)
However, I can't see a way of changing the default styling for internal elements of the component. I want to change the style of the <div class="x-popover-dialog"> so that it has rounded corners. However, if I add the following to my app's css file, it just gets removed by the time it gets to the "out" folder.
.x-popover-dialog {
border-radius: 6px;
}
Is this possible, or is the only way to actually modify the Web Component itself (or perhaps extend it)?
Thanks.
Okay, there are a number of factors here. First, is you cannot redefine a class defined within a component. You can currently apply your own styling to a component if that element does not specify its own styles. For instance, you can change the font-size on on 'p' elements within a component. Or say div#someid { color: red; } but you cannot redefine a class, or add definitions to a class.
The very fact that you can modify the styles at all, unless explicitly allowed, is a bug in the web_ui. Currently tracked as: Issue 374: Support apply-author-styles.
Ideally, when full support is implemented, you will not be able to apply your own styles to a web component unless explicitly permitted by the web-component itself. For more information on apply-author-styles and the related reset-style-inheritance see the great Shadow DOM 201 tutorial.
Related
I have a quill js editor on a html (MVC C# .Net Project). I want to preserve white-spaces (including tabs/indent). Adding white-space: pre to the editor solves it, however when pasting from Microsoft Word some strange line breaks appear.
With white-space: normal I can paste from Microsoft Word with no problems - it keeps the indentation. However when saving the HTML string to a database and presenting it again on the editor, the white space is not preserved. (Makes sense, since white-space is normal).
However if I set white-space: pre (or pre-line, or pre-wrap), everything works great with the database saves and presentation. But when pasting from Microsoft Word line breaks appear in the middle of every sentence...
I ended up solving this issue by redefining the block generated by Quill!
var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Block.className = 'pre';
Quill.register(Block, true);
By doing so, I register the text blocks on the quill editor as being <div> with class "pre": <div class='pre'>.
After this declaration I set the 'pre' class style (css):
.pre {
white-space: pre-wrap !important;
}
Now what happens is that every block of text is turned into a <div> with a customizable style. This solved my issue! Microsoft Word copies are now preserved, as well as normal text input!
From this question (Hyperlink inside label field in Vaadin 12) I was able to use Vaadin's HTML component to create custom html code (and it worked fine, including putting in ahref links etc.)
However, Vaadin provides the "Anchor" component which appears to be the far more powerful (and potentially more secure) way of creating links that can be used to navigate to either other classes I built or to external website (or even to download dynamically generated data in a streaming fashion).
However, what if I want to have both normal "label-like" text and an achor link all appear in a single paragraph? For example, in "normal html", I could just do this:
<p>
This is my normal text.
Download <a href="/resources/excelTemplate.xlsx" download> this Excel file</a>
and follow the instructions therein
</p>
and it would create the link somewhere within my <p>...</p> paragraph. How can I do this in Vaadin with the Anchor object? The best I came up with thus far is to use Horizontal Layout and then add a label, an achor, and then another label -- but that is really really ugly and doesn't technically have the same effect (it won't wrap properly.) The other option is to NOT use "Anchor" but instead just use "HTML" component and just create ahref links everywhere, but that seems a tiny big ugly too (though I suppose it's an ok workaround.). (I'm assuming I can call any UI I build by sticking the url links in the ahref calls....) Thoughts on the "right Java Vaadin" way to do this?
Paragraph p = new Paragraph("para");
Anchor a = new Anchor("go", "www.go.com");
p.add(a);
p.addClickListener(e-> UI.getCurrent().navigate(a.getHref()));
Vaadin 10+ offers you (atleast) three ways to handle this kind of case. You mentioned two of the..
Make composition of components in Java. Instead of VerticalLayout you could wrap the content in Div and using Text component also in Div instead of Label. You can make this kind of custom component by extending Composite.
The second alternative is to use HTML component as you mentioned.
The third alternative is to create custom html polymer template and connect to it with PolymerTemplate class. That will result in custom component that behaves like the custom component of the first option. It is just different way of implementation.
Which one of the three is a correct way. From framework perspective all of them. Which one is correct for you depends on your preference and application.
I am working with Umbraco 7.5 grid and I've created some macros that work with javascript. I need a javascript array on the page on top of my grid so I can add my items to it.
<script>
if (!_components) _components = [];
</script>
I can do it on the normal view since I have access to master page. but how can I do it in the back office?
It will be easier to maintain if you will create separated, custom grid property editor for your control / macro. Then you'll be able to add anything you want in the output of the editor and it will be included only when the specific control will be used in backoffice.
Check documentation here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/build-your-own-editor
You can also check LeBlender package - https://our.umbraco.org/projects/backoffice-extensions/leblender/. I've used it to play with the Grid a couple of times. It's giving you a visual UI to create and manage those custom editors with params and anything you need there.
I use Swashbuckle to add Swagger documentation to my ASP.NET Web API project. How can I hide default header (with swagger logo) from documentation page without injecting CSS?
When I injected JS as suggested above, header was blinking at the page loading. It was shown for a second and then was disabled by script.
There is approach that works better for me. https://github.com/domaindrivendev/Swashbuckle/issues/476
You can inject CSS instead of JS:
#header {
display:none;
}
Unfortunately I think you can do it olny by javascript right now.
In your SwaggerConfig.cs you can inject a .js file like this:
.EnableSwaggerUi(c =>
{
c.InjectJavaScript(thisAssembly, "yournamespace.yourscript.js");
});
So in this script you can do whatever you want, like hide the header:
document.querySelector("#header").style.display = "none";
This post shows how to customize the header putting two text boxes on it.
Edit:
The approach suggested in #dimaKudr's answer is better. Inject a CSS style is enough to hide the menu (JS is not necessary).
When I first ran into this I started injecting css/js but each time it was a struggle and kind of "hackish" to hide stuff with injected css. So after a while I simply replaced the index file with a modified version of this index.html
You can modify it as you like. Removing the div with the id=header will remove the header. Also this makes things such as replacing the logo etc much simpler. For the logo part you could set the logo src to en 64-bit encode as shown here encode image. Also removing the linked favicon in the tab is as simple as removing the line. Also adding links to other pages etc is trivial. Injecting the index in you swaggerconfig as this
c.CustomAsset("index", thisAssembly, "Path.To.index.html");
Remember to set your index to embedded resource.
Even if you hide by doing CSS or JS tricks, you cant actually hide it when you try it out.
CSS alternate is as folows;
.server {display: none;}
[Stackoverflow disallows the word help in the title. Hence the h3lp]
We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:
<xforms:input ref="#code">
<xforms:alert ref="$resources/required-field"/>
<xforms:help ref="$helptext"/>
</xforms:input>
In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.
In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.
I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?
There are two changes with Orbeon Forms 4.x which might be relevant to this:
The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.
This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.
If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.
Look at this post : http://blog.orbeon.com/2014/01/improving-how-we-show-help-messages.html
and this : http://discuss.orbeon.com/how-to-use-the-quot-new-quot-xforms-help-in-4-5-td4658348.html
julien