My Footer is not fixing in my Windows mobile app.
code :
.newFooter {bottom:0; position:absolute !important; width:100%;}
Note: This codes works for Android,BB,Ios.
Can any one help me with some Good Solution.Thanks.
Solution :
/* Start - Used to display the footer at the bottom of the page */
html,
body {
margin:0;padding:0;height:100%;
}
#container {
min-height:100%;position:relative;
}
#header {
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;position:absolute;bottom:0;left:0;
}
/* End - Used to display the footer at the bottom of the page */
Related
Hi I'm working on a custom text editor, on a linux 64 machine (if it can help).
Since the javascript "document.execCommand" has been deprecated, I'm working with "selection" and "range" and other javascript objects and functions.
I'm using an external div (as textarea) with the attribute contenteditable = true.
Everything seems fine until the text editor generate, inside the main editable div, tags like: span, ol, li ...
In Firefox (Chrome, and Opera work fine) the editor let the user write inside the tag until he press enter to go to a new line.
At this point if the user try to get back (to correct something for example) these tags are not editable anymore.
I tried to give to those tags the same attribute contenteditable = true, but no luck;
The only way I can get back and edit them is by clicking with the mouse right button.
Any idea on how I can keep all the tags "contenteditable" inside the main div?
The file I'm working on is thousands of lines long so I simplified the problem in the snipped below.
/**
the text editor object
*/
function TextEditor( args ){
this.editorId = args.editorId;
this.container = document.querySelector('#' + this.editorId );
var self = this;
this.setOrderList = function(){
document.execCommand('insertorderedlist');
}
this.initialize = function(){
if( self.textArea.innerHTML === '' ){
var div = document.createElement('div');
self.textArea.appendChild(div);
}
}
if ( this.container ) {
this.textArea = this.container.querySelector('.text-area');
this.orderedList = this.container.querySelector('#orederd-list');
this.orderedList.addEventListener('click', this.setOrderList);
this.textArea.addEventListener('focus', this.initialize);
}
}
var args = {
editorId : 'container'
}
var editor = new TextEditor( args );
<div id="container">
<div id="buttons-container">
<ul id="buttons">
<li id="orederd-list" class="button"><i class="fas fa-list-ol"></i></li>
</ul>
</div>
<div class="text-area" contenteditable="true">
</div>
</div>
I found What's the problem is.
In the main style sheet I have the following instruction:
a, li, span, h1, h2, h3, h4, h5, h6, p{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */}
this instruction prevent users to select text from the website.
In Browsers like Chrome, Edge, Opera... this css instruction does not work inside "contenteditable" elements, while for some reason in Firefox it does.
For those interested, the I changed for the text editor main div the instruction:
-moz-user-select: none;
into:
-moz-user-select: text;
and now everything is fine.
In Kendo for Angular 2, how do you replace the grid's column sort icon, which is currently a arrow, with Kendo Glyphicons?
I tried this in my scss file, but it did not work
.k-grid-header .k-header .k-link > .k-icon {
background-image: none; /* remove Kendo's sprite image */
font-family: KendoUIGlyphs;
}
.k-grid-header .k-header .k-link > .k-icon.k-i-sort-desc::before {
content: '\e61a'; /* KendoUIGlyphs down arrowhead */
}
.k-grid-header .k-header .k-link > .k-icon.k-i-sort-asc::before {
content: '\e618'; /* KendoUIGlyphs up arrowhead */
}
The default arrows in Kendo UI for Angular 2 use font icons, so there is no need to change the font-family or remove the sprite image. Instead, just set the pseudo-element content:
.k-grid-header .k-i-arrow-n::before {
content: '\e61a';
}
.k-grid-header .k-i-arrow-s::before {
content: '\e618';
}
See this runnable demo.
I know it is very old question, but just in case if somebody wants to use content with font-family for pseudo-element:
.yourClass : after {
content: "\e014";
font-family: 'WebComponentsIcons';
}
I am using the Swashbuckle package for WebAPI and am attempting to customize the look and feel of the swagger ui default page.
I would like to customize the default swagger logo/header. I have added the following to SwaggerConfig
.EnableSwaggerUi(c =>
{
c.InjectJavaScript(thisAssembly,
typeof(SwaggerConfig).Namespace + ".SwaggerExtensions.custom-js.js");
}
The contents of custom-js.js are as follows:
$("#logo").replaceWith("<span id=\"test\">test</span>");
This works for the most part but the visual is a bit jarring, in that the default swagger header is visible while the page loads and after a brief delay the jquery below kicks and the content of the #logo element is updated
Is there a way to avoid this so that the jquery kicks in as part of the initial load/render and it appears seamless?
Here are the steps instead of using the index.html
Step 1:
Create your logo en put it into a folder, in my case I created a separate folder(I am not using the wwwroot) and I named Content. Use StaticFiles for stream content from this folder access via /Content
app.UseStaticFiles(); // For the wwwroot folder if you need it
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "Content")),
RequestPath = "/Content"
});
Stem #2:
Create an image folder inside Content and place your logo.jpg file. Right-click over the file and change the Build Action to Embedded resource
Step #3:
Create a css folder inside Content and place a new file swagger-mycustom.css and change the Build Action to Content
On your Startup Configure method add this code
app.UseSwaggerUI(setupAction =>
{
....
setupAction.InjectStylesheet("/Content/css/swagger-mycustom.css");
...
}
Step #4:
Add this to your css:
img[alt="Swagger UI"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: url('/Content/images/logo.jpg');
max-width: 100%;
max-height: 100%;
}
The output looks like this:
This worked for me with the last version of Swagger UI in Swashbuckle
.swagger-ui img {
content: url([logo_path]);
width: 140px; /* width of your logo */
height: 40px; /* height of your logo */
}
If you don't want to create the index.html, you can also update the logo with injected css, this is a lot faster than js injection.
In swagger config enable the c.InjectStylesheet and point to the css you created
In the css itself:
.logo__img {
background: url([PathToLogo]) no-repeat;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 64px; /* Width of new image */
height: 25px; /* Height of new image */
padding-left: 64px; /* Equal to width of new image */
}
credits for css trick:
https://css-tricks.com/replace-the-image-in-an-img-with-css/
I ended up adding a new "index.html" based off this version
instead of trying to modify the behavior of the default generated one
To replace logo in swagger in api for .net core, you have to add the custom.js file.
Follow below steps to change logo.
Step 1 - Create custom.js file and add following code in it
(function () {
window.addEventListener("load", function () {
setTimeout(function () {
var logo = document.getElementsByClassName('link');
logo[0].children[0].alt = "Logo";
logo[0].children[0].src = "/logo.png";
});
}); })();
Step 2 - Inject thar custom.js file in startup.cs file. See below
app.UseSwaggerUI(c =>
{
c.InjectJavascript("/custom.js");
});
Step 3 - Enable static file in the api if not enabled. Add below line of code in Configure method of startup.cs.
app.UseStaticFiles();
#MichaelD can simply do the following instead:
.logo__img {
content: url([PathToLogo]);
width: 72px; /* Width of new image */
height: 31px; /* Height of new image */
}
The custom-js.js need to be placed after all js file.
This one got me stuck.
I want to add a background image to #page-title based on the body class.
I was sass to compile to:
body.front #page-title {
background-image: url('front.png');
}
body.blog #page-title {
background-image: url('blog.png');
}
Obviously the real code is more complex (and the actual will contain background-position and not a distinct image) but you get the idea. Each of the elements in the tree already has significant styling.
What is the best way to make this happen?
Thanks much!
EDIT: Well, I found a solution which works:
body {
/* body attributes */
#page-title {
/* #page-title attributes */
}
&.front #page-title {
/* body.front #page-title attributes */
}
&.blog #page-title {
/* body.blog #page-title attributes */
}
}
This renders properly, but reentering #page-title after each page class just feels wrong. Somehow I wonder if I'm not yielding to the sass way, but until I have a better solution (#import?), this works.
Thanks!
I would simplify the CSS before writing the SASS.
Assuming .blog and .front are the only classes you are using for body, then you have one too many classes. Why not set a default class (.blog) and then add a selector for .front?
body #page-title {
background-image: url('blog.png');
}
body.front #page-title {
background-image: url('front.png');
}
Alternatively, you could set the default value and then add the class to the #page-title element.
#page-title {
background-image: url('blog.png');
}
#page-title.front {
background-image: url('front.png');
}
I'm having trouble with CK4 and getting the styles for headers reflected in the styles-dropdown.
The .css should be shared of both back- and frontend and uses #page as css-id
Is there any way to tell the dropdown to parse headers with the #page-prefix.
I'm using
CKEDITOR.config.bodyId = 'page';
and css
.cke_editable {
}
#page {
/* works - editor area goes black..
font-family:Arial;
margin:10px;
font-family:Arial;
background-color:#000;
font-size: 10px;
color:#fff;
}
#page h1 {
/* works in editor-area, but not dropdown */
font-family: Verdana;
color:#999;
}
.cke_editable h2 {
/* same as h1.. */
font-family:Arial;
color:#f00;
font-size:16px;
background-color:#999;
}
h3 {
/* work BOTH in editor and style shows in dropdown. */
color:#0f0;
}
I guess that you're about to use stylesheetparser plugin to parse additional selectors. This issue has already been answered here: CKEditor - Stylesheet Parser - Valid Selectors
It's not straightforward but I believe you'll manage to do this. Good luck!
The problem is that CKEditor doesn't apply the bodyId and/or bodyClass to the styles combo: http://dev.ckeditor.com/ticket/7452
As you can see that bug was reported almost two years ago and it has been without activity from the developers most of that time.
I achived a working solution by parsing the css e.g.
#page h1 {...}
when attaching to CK like:
['config']['css'] = 'parseMyCss.php?theFile=style.css
and in parseMyCss (simplified):
$s = file_get_contents($theFile);
$s = str_replace('#page ','', $s);
header('content-type:text/css');
echo $s;