I ran into an issue while using Worklight 5.0.5 for an Android mobile project today. This project does make use of Apache Cordova, Dojo Mobile, and Worklight libraries, if that helps.
The problem is that Worklight automatically generates unwanted inline CSS in some cases during build time. I cannot find which component of Worklight is responsible for this, nor can I find out how to alter or prevent this behavior when required. This may seem like a small problem, but the fact that it's inline CSS, and during build, means that I'm prevented from affecting it!
A search through the JavaScript and CSS, both those that I have built and those that are imported for Dojo, do not seem to show anything that would add the CSS.
Example:
I have the following tag in my HTML:
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">
After build, this shows in a WebKit-based browser (Google Chrome) as:
<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">
The final inline CSS, the "padding-left", is what I'm trying to seek and destroy. Does anyone know what is responsible for this behavior, and how I can change or prevent it?
I don't know much about the technologies, but in case you cannot get rid of the CSS being inserted you can use !important in your own CSS. For example:
.segmentContainer {
padding-left: 0px !important;
}
This prioritizes the padding-left statement moving out of the normal prioritization order. Normally I bvelieve it goes inline, ids and then classes but with !important your class prioritizes.
Are you sure this Worklight's build process adding this style and not Dojo's parsing of the ? I would check Dojo mobile api to ensure it's not adding that by default. OOTB Dojo, for TabBar generates the following markup with inlined CSS.
<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">
This is the default Dojo style. You override it writing this code in your AppName.html:
...
<style>
.segmentContainer {
//your personalization
}
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">
Related
Suppose we added the image in CKEdtitor and aligned it to right:
CKEditor will add image and image-style-align-right classes to figure element:
<p>Lorem ipsum of something like this </p>
<figure class="image image-style-align-right">
<img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>
Now we want the inputted HTML will be submitted by email? Above HTML must be submitted to the backend, then all styles must be converted to inline CSS. But how the backend will know about .image, .image-style-align-right and similar CSS rules?
There are below styles in theme/imagestyle.css file of #ckeditor/ckeditor5-image package:
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
:root {
--ck-image-style-spacing: 1.5em;
}
.ck-content {
& .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
& .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
& .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
& .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
}
Problem 1: The source styles are in frontend and written by PostCSS
First, above code is PostCSS. Because I must not migrate to PostCSS just because using the CKEditor, I can not include this file to my source code written by other CSS preprocessor. In frontend, the Webpack compiles these styles an apply it dynamically when application starts (I mean, no file with compiled CSS available):
But how to bring up these styles to server?
Problem 2: How to bring up to server only these CSS classes which will be used and no more?
Well, even if I convert above .image-style-side , .image-style-align-center etc. to CSS and submit them to server, I will be enough only for Image feature. But the other CKEdtitor plugins adds other CCS classes and these classes are in numerous of other files!
Сonversely, there are a lot of CKEditor classes in which we are don't need on backend, e. g. ck-editor__editable, ck-rounded-corners, ck-editor__editable_inline: there classes are for CKEditor's GUI and will not require once editing will done?
Problem 3: The CSS variables
Above listing includes the CSS variables like --ck-image-style-spacing, --ck-image-style-spacing etc. To make inline CSS, server must know about them too.
As you stated, there are several major time consuming problems to be solved with approach that you took.
Key to a successful email template is compatibility with many different email clients.
Email clients support archaic HTML tags, such as <table> for creating layout. Inline styles are also preferred. Many modern CSS properties are not supported at all. For example, border radius is not compatible in some clients, so rounded buttons will actually be button images instead of code. Different fonts are also not rendered.
If I were you (and if CKEditor doesn't have email templating), I'd post the template you created to some of the freelancer platforms out there and say 'guys, how much to convert this HTML to email compatible HTML'. That's the fastest and cheapest way. Test resulting code by sending it in email and checking it out in different email clients.
Other way is for you to get to know what creating HTML and styling for emails is all about. Good starting point is to analyze (and perhaps reuse) HTML from HTML emails that you received from, let's say, your local cell service provider.
You'll need to do a research on the topic to find out what suits your needs, but here are some basic guidelines:
supported HTML tags in emails
step-by-step guide to creating email templates
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.
I'm working on a Polymer app. I keep running into oddities. At this time, I'm trying to put a paper item in my app. At runtime, these elements appear to add an HTML element that looks like this:
<div id="contentIcon" class="content-icon style-scope paper-icon-item">
</div>
For some reason, this element is always 56px in width. In the Chrome Developer tools, I can see width:56px. If I set it to width:0px in the Chrome Dev tools, the UI looks how I want. In an attempt to do this, I added the following to my CSS:
.content-icon.paper-icon-item {
width:0px !important;
}
However, the 56px width still remains. I do not understand why at I have to do to remove this 56px width.
Thanks,
Why are you using a class attribute for defining a web component?
That syntax seems quite weird.
Can you please provide with more specific description regarding this issue as it doesn't seems clear.
AFAIK, the correct syntax for including a paper-item component in your code should be:
<paper-item>
<paper-item-body two-line>
<div>Show your status</div>
<div secondary>Your status is visible to everyone</div>
</paper-item-body>
<iron-icon icon="warning"></iron-icon>
</paper-item>