I just updated the JCE extension to JCE Pro(version - 2.9.10) in Joomla 3.9.27.
Now, in the article content in Joomla at the admin panel, I am adding the style tag with the comment like below
<style>
<!--
.wrapper {
display:block;
padding: 10px;
}
-->
</style>
Now when I switch the editor to the Code tab then it adds the space between < & ! like below
<style>
< !--
.wrapper {
display:block;
padding: 10px;
}
-->
</style>
before updating to the JCE pro it worked fine.
Please check the below image for more details.
Editor tab
Code tab
If you want to comment code in CSS, you wrap it inside /* */ marks, eg
<style>
/*
.wrapper {
display:block;
padding: 10px;
}
*/
</style>
You've unintentionally used the HTML comment marks <!-- -->
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
I am working on an quiz application and I am trying to make it responsive so that it looks good on all devices. The application is an html5 application and is contained in an iframe and set to fill the entire iframe. The native width of the application is 640px and the height is 880px (this is how I calculated the padding-bottom to be 137.5%). It works great on computers and on Android devices but it does not work on iOS devices. Everything I'm reading seems to suggest that I've done it correctly but on the iphone the application is too wide for the screen in portrait mode.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>
</head>
<body>
<!--comment: this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">
<div class="intrinsic-container"><!--comment: iframe div begins-->
<iframe src="scrolling/index.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!--comment: iframe div ends-->
<div class="ad"> <!--comment: ad div starts-->
This is an add div...
</div><!--comment: ad div ends-->
</div><!--comment: pagecontainer div ends-->
</body>
</html>
and here is the CSS code:
body {
margin-left: auto;
margin-right: auto;
background-color: black;
}
.intrinsic-container {
position: relative;
clear:both;
height: 0;
overflow: hidden;
/* to get padding-bottom divide the numbers of aspect ratio */
padding-bottom: 137.5%;
z-index: 3;
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border:0px;
margin:0px;
}
.ad{
background-color:lime;
height:80px;
width:100%
}
/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
I have included (to my knowledge) the correct meta viewport tag. Why does this work so well in Android but fails in iOS?
I found that the solution was to add the following code to the canvas element on the page
style="width: 1px; min-width:100%"
I had seen this code on stack overflow before but it didn't work until I added the above css to the canvas. I hope this helps someone with a similar problem.
Brett
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
In order to get the styling I want on Chrome in OS X, I have to use the -webkit-appearance: none; attribute.
See this question and this answer.
The issue is, now when I select an answer, it doesn't show up. The field just remains blank.
This is how it looks without that attribute:
This is how it looks WITH the attribute:
For what it's worth, this is how I am creating this select menu - with Simple Form:
<%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %>
This is the HTML it generates:
<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]"><option value=""></option>
<option value="231" selected="selected">United States</option></select>
How do I fix this?
Edit 1
This is the CSS:
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
I had this problem and it turned out to be the height property causing it.
select {
padding: 20px;
height: 20px; /* suddenly invisible text! */
-webkit-appearance: none;
}
Check out this fiddle
http://jsfiddle.net/bpYGv/2/
Test in Chrome for OSX (10.8.2) and this works fine:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Testing Select</title>
<style>
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form class="simple_form">
<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]">
<option value="">test</option>
<option value="231" selected="selected">United States</option>
</select>
</form>
</body>
</html>
You have an empty option as the first one. That's why you get the blank select.
The issue is not reproducible if I start a fresh HTML page (on Mac Chrome and Safari). To me, this sound like a clashing CSS rules issue. Is color: #fff; style defined in one of the classes used by select? You might want to try inspecting the select or option element in Chrome/Safari to see if there are any classes applying that style.
The padding is pushing the contents of the select out of view, try decreasing the padding in Chrome's web inspector to make it appear again.
A solution might be to hard set the padding AND height, ie.
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;
But bottom pixels from letters still tend to fall off in different browsers, a 53px height should be sufficient (2*border + 2*padding + 1*line-height), but Chrome 34 needs 55px, IE11 56px and FF28 57px to completely display letters.
See my fiddle at http://jsfiddle.net/lmeurs/tLkAR/.
Also see Formalize to "teach your forms some manners" and Select for "styleable select elements".
for me I have to set this:
padding-top: 0;
padding-bottom: 0;