I've created a number of widgets that are loaded as tab panes in a tabcontainer. Everything seems to work well, except I'm getting different results when using my custom widgets vs. creating everything in markup (tab content isn't taking up the whole page, 3rd party widgets aren't behaving properly, etc). This all leads me to think that I might not be creating my widgets correctly. The trick seems to be that they are not interpreted as contentpanes.
I am using dojo 1.3.2.
The following markup, for example, works great:
<body class="soria" style="overflow-y: hidden;">
<!-- Container for whole page -->
<div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
<!-- Header container -->
<div dojoType="dijit.layout.ContentPane" region="top">
Title
</div>
<!-- Left side -->
<!--<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true" style="width:100%; background-color: #F0F8FF;">-->
<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
<div style="text-align: center;">
<!-- address -->
<span id="addressInstructions">Address Contents</span>
</div>
</div>
<!-- Tabs -->
<div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
<div dojoType="dijit.layout.ContentPane" id="tab1" title="map">
<p>Change map to:</p>
<div id="divMapList"></div>
<div style="padding: 10px 10px 10px 10px;">
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
Some text in here.
</div>
</div>
</div>
</body>
Looking at the resulting HTML code, I can see that the tab itself has the following class: "dijitContentPane dijitTabPane dijitTabContainerTop-child dijitTabContainerTop-dijitContentPane dijitVisible".
Below is the HTML of one of my custom widgets:
<div>
<div style="text-align: center; padding: 5px 5px 5px 5px;">
<div>${i18nStrings.mapChangeMap}:</div>
<div dojoAttachPoint="divMapSelection"></div>
<div style="padding: 10px 10px 10px 10px;">
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
</div>
And here is part of the custom widget JS (I can provide more code if necessary):
dojo.declare("xxxx.Widget.Map", [dijit._Widget, dijit._Templated],
{
//Specify the path of the HTML file that sets the look of the widget
templatePath: dojo.moduleUrl("xxxx", "widget/templates/Map.html"),
//The strings used to populate standard text. Populated in postMixInProperties
i18nStrings: null,
//The widget's root div identifier. Value overwritten in postMixInProperties
id:"tabMap",
//The tab's title. Value overwritten in postMixInProperties
title: "",
//True to activate the tab. False otherwise.
activate: false,
//The map & current layer
map: null,
currentLayer: null,
//Sets up some basic properties
postMixInProperties: function() {
this.inherited(arguments);
var _1 = dojo.i18n.getLocalization("dijit", "loading", this.lang);
this.loadingMessage = dojo.string.substitute(this.loadingMessage, _1);
this.errorMessage = dojo.string.substitute(this.errorMessage, _1);
if (!this.href && this.srcNodeRef && this.srcNodeRef.innerHTML) {
this.isLoaded = true;
}
this.i18nStrings = dojo.i18n.getLocalization("IndyVIP","applicationStrings");
this.title = this.i18nStrings.mapTabTitle;
},
</div>
I am adding the widget to the container by creating the widget, then adding it as a child to the tabcontainer.
This results in the following class assigned to my tab: "dijitTabPane dijitTabContainerTop-child dijitVisible".
Does anyone know what I am doing wrong?
Thank you!
Emmster
UPDATE:
I have decided to try inheriting from dijit.layout.ContentPane & dijit._Templated. I am still having problems with that though, the main one being that if I add my widget to a TabContainer, I get the error "node is null" on line 4467 of dojo.js.uncompressed.js, but the tab seems to work just fine IF it's the active tab starting out. If I add the widget to a page that only contains the widget, it works fine without errors.
See the code below that gives me the expected results, but causes that one "node is null" error.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true,
useXDomain: true,
debugAtAllCosts: true,
baseUrl: './',
modulePaths: {IndyVIP: 'js'}
};
</script>
<link rel="Stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/soria/soria.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("IndyVIP.Widget.Map");
dojo.addOnLoad(init);
function init() {
var tab = new IndyVIP.Widget.Map({title: 'Map'});
var tabContainer = dijit.byId('tabs');
tabContainer.addChild(tab);
}
</script>
</head>
<body class="soria" style="overflow-y: hidden;">
<!-- Container for whole page -->
<div dojoType="dijit.layout.BorderContainer" design="headline" id="borderContainer" style="height:100%;width:100%;">
<!-- Header container -->
<div dojoType="dijit.layout.ContentPane" region="top">
Title
</div>
<!-- Left side -->
<div dojoType="dijit.layout.ContentPane" region="left" id="addressContainer" splitter="true">
<div style="text-align: center;">
<!-- address -->
<span id="addressInstructions">Address Contents</span>
</div>
</div>
<!-- Tabs-->
<div dojoType="dijit.layout.TabContainer" id="tabs" region="center" tabPosition="top">
<!-- uncommenting the following results in map not acting the way it should -->
<!--
<div dojoType="dijit.layout.ContentPane" id="tab2" title="other">
Some text in here.
</div>-->
</div>
</div>
</body>
</html>
Map.js:
dojo.provide("IndyVIP.Widget.Map");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.declare("IndyVIP.Widget.Map", [dijit.layout.ContentPane, dijit._Templated],
{
map: null,
//Specify the path of the HTML file that sets the look of the widget
templatePath: dojo.moduleUrl("IndyVIP", "widget/templates/Map.html"),
//The tab's title. Value overwritten in postMixInProperties
title: "",
widgetsInTemplate: true,
startup: function() {
this.map = new esri.Map('divMap');
dojo.connect(this.map, 'onLayerAdd', this, this.onLayerAdd);
var layer = new esri.layers.ArcGISTiledMapServiceLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
this.map.addLayer(layer);
},
onLayerAdd: function() {
//Create symbol
var lineColor = new dojo.Color('black');
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,lineColor,1);
var pointColor = new dojo.Color('red');
var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,12,lineSymbol,pointColor);
//Create point
var x = 4.92;
var y = 50.625;
var point = new esri.geometry.Point(x,y,this.map.spatialReference);
//Create template
var template = new esri.InfoTemplate('A title','Some content');
//Create graphic
var graphic = new esri.Graphic(point,pointSymbol,null,template);
//Add graphic to map
this.map.graphics.clear();
this.map.graphics.add(graphic);
}
});
And finally, here's the widget's HTML template:
<div>
<div id="divMap" dojoAttachPoint="divMap" style="width:300px;height:300px;border:1px solid #000;display:block;margin-left:auto;margin-right:auto;"></div>
</div>
I very much appreciate all of your suggestions so far. I feel like I am missing something elementary, but I can't quite figure it out.
Emmster
The issue I was having when inheriting from dijit.layout.ContentPane was that my top div in my widget template did not specify dojoAttachPoint="containerNode". Doing this took care of the "node is null" error I was getting.
I am still having issues with the map not behaving properly, but this seems related to the tab not being visible initially as dante hinted.
UPDATE:
The other error I was having (the map not acting as it should) was due to the widget's template HTML having items above the map in the widget HTML as in my first example above (map.html). In the second example I provided, I took that extra stuff out, and that fixes the problem.
Inheriting from the ContentPane and having dojoAttachPoint="containerNode" on the root node seems to be mandatory for the tabs. This helped me to resolve a similar issue.
Related
I have installed printJS on my vue project using npm install print-js --save
Print Preview is now successfully displaying but the problem is that it is printing the whole page together with the side panel and the scroll bars. I have implemented it like this:
<template>
<b-modal>
<div id="print-form">
<table style="border-collapse: collapse; width: 100%" border="1px">
</table>
<button onclick="print()" class="btn btn-primary btn-block">Print</button>
</div>
</b-modal>
</template>
import * as Printjs from "print-js";
export default {
method: {
print() {
Printjs({
printable: "print-registration-form", //Id to print content
type: "HTML"
});
}
}
}
When I click print, it will print the whole page and not the page section specified by the id. Is there a way I can only print the specific div content?
Looks like you are using the wrong id. Did you mean to use print-form instead?
printJS({
printable: "print-form",
type: "HTML"
});
I can propose you this solution:
#media print {
body * {
visibility: hidden;
}
#targetDiv, #targetDiv * {
visibility: visible; border: none;
}
}
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<div>
<p>Click the button to print the current page.</p>
</div>
<div id="targetDiv">
<p>Lorem ipsum kjng kq fev lnb fesl</p>
</div>
<button onclick="window.print()">Print this page</button>
</body>
</html>
I am using yii2 basic.
I have installed Admin LTE and is working.
Now I have Employee CRUD. When admin views the view of particular employee, then the details are going out of the screen horizontally i.e, there is no horizontal scrollbar to scroll the page to view the details completely.
How to accomplish this?
I was having the same issue with AdminLTE. I solved it by overriding the css of 'container-fluid' class with .container-fluid { overflow-x: scroll; }.
Here is the general example:
<html>
<head>
<style>
.container-fluid {
overflow-x: scroll;
}
</style>
</head>
<body class="skin-black sidebar-mini" role="document">
<div class="wrapper">
<!-- AdminLTE Main Header here -->
<!-- AdminLTE Sidebar here -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<section class="content-header">
<h1>View Employees Header Page</h1>
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Employees</li>
</ol>
</section>
<section class="content container-fluid">
<!-- Employees table view with horizontal scrollbar -->
</section>
</div>
<!-- /.content-wrapper -->
<!-- AdminLTE Footer here -->
</div>
</body>
</html>
If you want to enable the horizontal scrollbar to body instead of a certain div, you have to delete the code below from your adminlte.js
And set all divs before to width:100%;
Layout.prototype.fix = function () {
// Remove overflow from .wrapper if layout-boxed exists
$(Selector.layoutBoxed + ' > ' + Selector.wrapper).css('overflow', 'hidden');
// Get window height and the wrapper height
var footerHeight = $(Selector.mainFooter).outerHeight() || 0;
var neg = $(Selector.mainHeader).outerHeight() + footerHeight;
var windowHeight = $(window).height();
var sidebarHeight = $(Selector.sidebar).height() || 0;
// Set the min-height of the content and sidebar based on
// the height of the document.
if ($('body').hasClass(ClassName.fixed)) {
$(Selector.contentWrapper).css('min-height', windowHeight - footerHeight);
} else {
var postSetHeight;
if (windowHeight >= sidebarHeight) {
$(Selector.contentWrapper).css('min-height', windowHeight - neg);
postSetHeight = windowHeight - neg;
} else {
$(Selector.contentWrapper).css('min-height', sidebarHeight);
postSetHeight = sidebarHeight;
}
// Fix for the control sidebar height
var $controlSidebar = $(Selector.controlSidebar);
if (typeof $controlSidebar !== 'undefined') {
if ($controlSidebar.height() > postSetHeight)
$(Selector.contentWrapper).css('min-height', $controlSidebar.height());
}
}
};
add the following:
<style>
.grid-view {
overflow: auto;
}
</style>
considering your yii2 grid-view class is default grid-view;
There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.
this is the code, showErrorMsg is false
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<i></i>
<p v-text="errorMsg"></p>
</div>
How to fix this?
Just include this code to your css file
[v-cloak] { display:none; }
http://vuejs.org/api/#v-cloak
Usage example:
<div class="xpto" v-cloak>
Hello
</div>
This directive will remain on the element until the associated Vue
instance finishes compilation. Combined with CSS rules such as
[v-cloak] { display: none }, this directive can be used to hide
un-compiled mustache bindings until the Vue instance is ready.
http://vuejs.org/api/#v-cloak
I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.
HTML:
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS:
[v-cloak] {
display:none;
}
Codepen Example:
https://codepen.io/Frontend/pen/RjoKQm
I fixed this problem by rewriting the CSS and adding a class in the CSS file
CSS:
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML:
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<i></i>
<p v-text="errorMsg"></p>
</div>
If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
I have a scenario where I've got a search form and below, the results with a v-if block, waiting for submit.
I changed the v-if to v-show, that seemed to help. I tried the v-cloak--hidden class but didn't work either (v-cloak is already styled to display: none). What did work apparently was to set the data results container display style to none and then when submitting the form (in the processForm method), setting the display to block and show all the results.
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
Without that change, on a full page refresh I could still see the moustaches coming up. Here the full HTML page, simplified.
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" #submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.
If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}
I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials
Creating Pinetrest like Layout in ASP.NET
How to use Masonry
However, I made changes in the first tutorial based on second and I am getting below output
Clearly, this isn't what I was looking. The gap between two rows and columns is high.
Below is my code:
<
style type="text/css">
body
{
background-color:#EEEEEE;
}
#imgLoad
{
position:fixed;
bottom:0;
left:40%;
display:none;
}
.item {
width: 220px;
margin: 10px;
float: left;
background-color:honeydew;
}
</style>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%# Eval("Url") %>" />
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
How do I fix it?
I believe this is related to the height, may be the row height of repeater control takes the highest among the column.
I did tried to do it with ASp.NET MVC
Controller
IEnumerable<Product> model = ProductRepository.GetData(1, 25);
return View(model);
View
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.item {
width: 220px;
margin: 5px;
float: left;
background-color:honeydew;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Mansory.js" type="text/javascript"></script>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: 100,
isAnimated: false
});
});
</script>
#foreach (var item in Model) {
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
}
but same result
EDIT 1
I have changed my script to
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
</script>
and code to
#foreach (var item in Model) {
<div id="container">
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
</div>
}
but same result
Ok, a few things:
You have spelled "Masonry" wrong when initializing the script
Put a div with Id "container" around your items list
In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded
Like this:
$(function(){
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
Then it should work.
This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.
https://github.com/yury-egorenkov/pins-grid
I have created a tree using dojo.
I want to add right click context menu on the root of the tree.
Following is the code
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
</head>
<body class="tundra ">
<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">
Item #1
</li>
<li dojoType="dijit.MenuItem">
Item #2
</li>
</ul>
<div dojoType="dojo.data.ItemFileReadStore" jsId="menuContinentStore"
url="http://docs.dojocampus.org/moin_static163/js/dojo/trunk/dijit/tests/_data/countries.json">
</div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="menuContinentModel"
store="menuContinentStore" query="{type:'continent'}" rootId="continentRoot"
rootLabel="Continents" childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="menuTree" model="menuContinentModel" showRoot="false"
openOnClick="true">
<script type="dojo/connect">
var menu = dijit.byId("tree_menu");
// when we right-click anywhere on the tree, make sure we open the menu
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e) {
// get a hold of, and log out, the tree node that was the source of this open event
var tn = dijit.getEnclosingWidget(e.target);
console.debug(tn);
// now inspect the data store item that backs the tree node:
console.debug(tn.item);
// contrived condition: if this tree node doesn't have any children, disable all of the menu items
menu.getChildren().forEach(function(i) {
i.attr('disabled', !tn.item.children);
});
// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});
</script>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
But the problem is this code creats right click context menu for all non leaf children.
I want right click context menu only for root.
How to achieve this?
root node or first level's node ?
If for root only than tn.getParent() is null if this is a root node.