In sitefinity how can I access the bootstrap Icons? Do I need to add a resource-package?
<span class="glyphicon glyphicon-envelope" onclick='addRow(#item.Value,0)'></span>
Related
Using angular 8 I want to display bootstrap datepicker. I want the same datepicker to be displayed in my page
First Install bootstrap-datepicker using command of npm i bootstrap-datepicker
After installation add "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" and "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" in angular.json
add this code <div class="input-group date" data-provide="datepicker"><input type="text" class="form-control"><div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div></div>
For more information visit https://www.npmjs.com/package/bootstrap-datepicker
Does Bigcommerce Stencil support a global header image?
If a user has uploaded a header image in 'store setup/design'. How can I get that image in a stencil theme?
There isn't a way to access this image within stencil at this time.
On the cornerstone theme in the stencil framework, the store logo content is located in the "store-logo.html" file.
If you're developing in the stencil framework, and want to reference just the logo image use (if you want just the url for the store logo, take the handlebar from the "src" attribute):
<img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
If you want to include the links and the store logo, use the following:
<a href="{{urls.home}}">
{{#if settings.store_logo.image}}
<img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
{{else}}
<span class="header-logo-text">{{settings.store_logo.title}}</span>
{{/if}}
</a>
Hope this helps!
I try to set an icon to menuitem, So I find that the attribute icon is supported, but No change happen when I change its value.
I want to know if it is still supported by menuitem in odoo v7/8. If not, how to add an icon to a menu item?
Edit:
I try to customize the view of the menu in odoo. So I override the template that render the menu in "webClient_templates.xml" from web module like this:
<template id="my_menu_link" inherit_id="web.menu_link">
<span position="replace">
<span class="oe_menu_text">
<i class="fa fa-check"></i>
<t t-esc="menu['name']"/>
</span>
</span>
</template>
Likely, all the menu items will have the same icon (i.e. fa-check) from font-awesome lib.
Now, I try to add a specific icon for each menu item, that I can define it somehow in the xml description of menuitem as a kind of attribute or anything else, and retrieve it like this:
<i t-attrs-class="menu['icon']"></i>
I tried to use icon attribute of menuitem, even if it's deprecated, but menu['icon'] is not recognized in the template level.
Please any suggestions ?
AFAIK displaying icons in menu items is deprecated and does not work on the web client. Probably the to achieve you would need to create a module for the web client extending it with that capability.
I'm using odoo v12 now, and there is also an unused field for icons on ir.ui.menu model.
I managed to show icons on backend's menus, here are the difference with your code:
The icon field is named web_icon, it may be specific to v10+ , I don't have a v8 to verify this.
The templating syntax to set attributes is t-att-<name> and not t-attrs-<name>
And most important: the menus in backend are generated using javascript, so the templates to modify are to find in web/static/src/xml/menu.xml
There are 3 places to add an <i> markup in 2 templates:
<t t-name="Menu.link">
Line 47: <span><i t-att-class="menu.web_icon"></i> <t t-esc="menu.name"/></span>
Line 59: <span><i t-att-class="menu.web_icon"></i> <t t-esc="menu.name"/></span>
<t t-name="Menu.sections">
Line 81: <i t-att-class="second_level_menu.web_icon"></i> <t t-esc="second_level_menu.name"/>
The data to set in menu's icon field is the whole font-awesome CSS classes:
fa fa-check
This is good if you add more icons sets, you won't need to modify again the templates.
But if you want to force the usage of font-awesome, or want to use another icon set like font-awesome solid (using fas class), you can use this markup in templates:
<i t-attf-class="fas fa-#{menu.web_icon}"></i>
(note t-attf-<name> to use "attribute function")
And so the data in the field will be only check...
And finally, the best should be to create a module to inherit the templates and make this modification against modifying it directly as I did...
And also add some more CSS styling to align icon and text correctly (here icons are not the same sized).
I am new to working with worklight enviroment and started working it on recently.
I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).
I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator.
The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements.
Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar.
also onclicking the TabBarButtons an error popsup in chrome console -
Uncaught TypeError: undefined is not a function
This error pops up on each click .
here is the structure of my source code of in the body tag of index.html file :-
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Hello world'"></div>
<button data-dojo-type="dojox.mobile.Button">Hello</button>
<input data-dojo-type="dojox.mobile.TextBox"><input type="range"
data-dojo-type="dojox.mobile.Slider"
data-dojo-props="orientation:'H'">
</div>
<div data-dojo-type="dojox.mobile.View" id="view1"
data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'About',moveTo:'view0'">
</div>
<div data-dojo-type="dojox.mobile.RoundRect">
Hello, we are a leading company in innovations
</div>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
</ul>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
// Rest all is default code, no changes in jquery version or anything else
I have also tried the following things and none of them seem to work:-
-Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files.
-Kept the Tabbar out of any view directly into body tag and linked views to it.
-Added id attribute to tabBar and tab button elements, and view elements.
-turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.
The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:
data-dojo-props="moveTo:'view0',
Once fixed, your sample will work.
But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead.
Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.
Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation
I am working on a Worklight project, and I am trying to use custom listview. I use the Dojo toolkit to implement it, but it's not coming up to my expectations. Regarding design I am confuse. Here is my code:
<div id="bookmarks" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox/mobile/Heading">Some Heading</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"><button
data-dojo-type="dojox.mobile.ToggleButton">Label</button></li>
</ul>
</div>
I want this type of listView which include image tag, icon tag and a checkbox in each list item
Check out the Dojo documentation on ListItems for examples of adding built in options like icons.
dojotoolkit.org/reference-guide/1.8/dojox/mobile/ListItem.html#dojox-mobile-listitem
For more complex layout, such as the larger title, small sub-title, and timestamp, you can use span tags and css.