I'm currently implementing a mockserver for my UI5 Application.
Everything works fine, which means my ui5 controls get the mocked data correctly.
The only thing I’m still struggling with are source paths of images.
Here an example:
Within an XML Fragment, I have the following image content
<ImageContent src="images/logo_green.svg" press="navToDashboardPage"/>
The Image can be displayed, when I run my normal index.html.
When I run the mockserver.html (which in in the test-folder) the path has to be like "../images/logo_green.svg".
How can I set the paths independently from the index.html / mockserver.html?
Or is there a way to figure out (within xml) which .html page is currently running?
Thanks for your help :)
Did you try to add a <base href="../"> to your mockserver.html?
You'll probably need to adapt the data-sap-ui-resourceroots element in the bootstrap. From the UI5 tutorial, this is the invocation in index.html:
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
and this in test/mockServer.html:
<script
id="sap-ui-bootstrap"
src="../resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "../"
}'
I don't have an example with an image at the moment but css/styles.css is correctly referenced in both cases, so that should be it.
Also, you should adapt the src path as well, if you're booting from a local copy instead of the CDN. sap.ui.demo.walkthrough of course should be the name of your app.
Related
I'm trying to use GitHub as required of my class to launch a website. Unfortunately, I have to be doing something wrong. My filepaths in the index.html file are as follows:
link href="/css/style.css" rel="stylesheet"
for the style sheet
Now for the image I'm wanting to use I'm using:
img src="/images/TomEdwards.jpg" alt="Tom Edwards"
and I'm getting this instead at this location:
https://ladywebdevelop.github.io/bioSite/index.html
my file tree looks like this:
css (Folder)
images (Folder)
README.md
index.html
What are my possible solutions, please?
I've tried several different ways in the file path names to access both the stylesheet and the images.
I'm expecting the stylesheet to render correctly with a colored background and the image to appear on the right-hand side under the horizontal navigation list.
I was able to load the stylesheet by changing this:
<link rel="stylesheet" href="/css/style.css">
To this:
<link rel="stylesheet" href="css/style.css">
The stylesheet must be referenced correctly relative to the index file.
As for the image, I don't see it in the application's sources. Are you sure that it's committed to the repository, and located in the right place? The current codes has it here, which looks like a typo:
<img src="TomEdwards/TomEdwards.jpg" alt="Tom Edwards">
I want to set base url to load template from /templates and associated /controller. The problem is that it is not getting loaded on base url, base url has index.html as it is and then base url+"/#/" loads my second page which i want to be loaded with index.html at the app launch. I believe i am going wrong with setting state. I want to configure a single state for now, a single page whose template gets mapped into index.html. Any solution?
angular.module('starter', ['ionic', 'CalendarCtrl' ,'onezone-datepicker'])
.config(function($stateProvider) {
$stateProvider
.state('/',
{ url: '/',
templateUrl: 'templates/calendar.html',
controller: 'CalendarCtrl'
});
})
try this
.when("/", {
templateUrl : "templates/page.html"
})
Correct me if I'm assuming wrong, but from your question it seems you are new to Ionic. Since there's not much explanation to your question, I'll clarify what you are looking at in your code.
Basically what you want to do is make a file called "page.html" in your templates folder and control it with the 'PageCtrl' you have declared here.
If you want to simply use Index.html for all your html, then I guess you can do that too. Make sure in your index.html you have:
<html ng-app="starter"> ....
<script src="js/controllers/main.js"></script>
</html>
<head>..... </head>
<body ng-controller="MainCtrl">
</body>
</html>
Replace "MainCtrl" with whatever controller you decide to control your index page with.
Hope that helps. Don't give up!
Given the following code:
<html>
<body>
<%- partial('myPartial.html') %>
</body>
</html>
It will work if I place myPartial.html in the views folder, however what I'm trying to do is to pull the view from the .tmp/public folder.
I've tried importing a script from the same location and it work so I think it might be related to partial().
Does anyone has solved this before?
The .tmp/public is generated from the assets folder, processed by default grunt tasks. It is used by Sails when serving assets at runtime. So when serving assets, like scripts and styles, the path is relative to .tmp/public.
On the other hand, partials are used when rendering ejs, and the relative path depends on the view that you working on. Partials really belong to the views folder. But if you really need to use an html from the assets in a partial, then you have to access myPartial.html relative to the current view.
Let us say you myPartial.html is in .tmp/public/myPartial.html, then your view should be something like
views/homepage.ejs
<html>
<body>
<%- partial('../.tmp/public/test.html') %>
</body>
</html>
I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
I'm using Bootstrap 3 together with Zend Framework 1.12.3. Everything is working fine but when testing my site in Internet Explorer 7 the layout breaks because of the IE box model.
I'm now trying the coliff / bootstrap-ie7 and Schepp / box-sizing-polyfill but i can't get it to work. I've pasted the *behavior: url(/public/css/boxsizing.htc); after all box-sizing properties in the bootstrap.css file and i have placed the following code in my layout.phtml file:
<!--[if lt IE 8]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
I have also pasted "AddType text/x-component .htc" in my .htaccess file.
Does someone know why this is not working?
Thanks!
Inside the bootstrap-ie7.css is the path to the htc file. Make sure you've upload the .htc itself file to your css or js folder and put the path from the root in that .css.
First line of the -ie7.css file {box-sizing:border-box;behavior:url(/js/boxsizing.htc)}
This path must be your relative root path. If the .htc is in the assets/js folder, put that in the behavior url parenthesis.
{box-sizing:border-box;behavior:url(assets/js/boxsizing.htc)}