How to change the default style (bar color, content color, etc) of the dijit ConfirmDialog? Please see codes below. Neither width or color were changed for the Confirm Dialog.
var confirm = new ConfirmDialog({
title: "Confirmation",
content: "This is the content",
style: "width: 400px, color: grey"
}).show();
I believe you just need to change the , to a semi-colon ;
var confirm = new ConfirmDialog({
title: "Confirmation",
content: "This is the content",
style: "width: 400px; color: grey"
}).show();
BTW, the color property in style is just the content color. To change the title bar background color, this link says:
You'd have to override the background-color on the .dijitDialogTitleBar css. For example,
<link rel="stylesheet" type="text/css" href="dojo-release-1.6.1-src/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="dojo-release-1.6.1-src/dijit/themes/claro/claro.css" />
<style> .claro .dijitDialogTitleBar { background-color: #00FF00 } </style>
Here, the color is changed to green.
Related
I wanted to implement an interactive slider using ReScript, so I wanted to translate this JavaScript to ReScript (courtesy: https://www.w3schools.com/howto/howto_js_rangeslider.asp):
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
}
where the target HTML (slider.html) is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<script src="./bundled.bs.js"></script>
</body>
</html>
where the bundled.bs.js is a result of bundling the compiled .bs.js code with Browerify.
So far, I have the following piece of code written using the rescript-webapi:
open Webapi.Dom
open Belt.Option
#val external document: Document.t = "document"
let slider = getExn(Document.getElementById("myRange", document))
let output = getExn(Document.getElementById("demo", document))
Element.setInnerText(output, getExn(Element.getAttribute("value", slider)))
Element.addEventListener("value", _ =>
Element.setInnerHTML(output, getExn(Element.getAttribute("value", slider))), slider)
However, this does not work as intended; I can see the slider and slide it around, but the input tag's value does not get updated:
What is missing from my ReScript translation?
+Update:
#glennsl has provided me with this code below:
open Webapi.Dom
open Belt
let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn
output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)
slider->Element.addEventListener("input", _ => {
let value = slider->Element.getAttribute("value")->Option.getExn
output->Element.setInnerHTML(value)
})
I can see the Value: with the correct initial value, 50.
However, even if I repositioned the slider, the value does not get updated:
As mentioned above, I compiled this code (dubbed slider.res) into slider.bs.js and bundled it with browserify slider.bs.js -o bundled.bs.js.
There's no event called value. The JavaScript code you're translating from is using input (oninput).
You're also mixing "data first" and "data last". rescript-webapi uses "data first", while bs-webapi, which rescript-webapi is forked from, uses "data last". You might be basing this on example code from bs-webapi.
In any case, this should work with rescript-webapi:
open Webapi.Dom
open Belt
let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn
output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)
slider->Element.addEventListener("input", _ => {
let value = slider->Element.getAttribute("value")->Option.getExn
output->Element.setInnerHTML(value)
})
Ugh, the main problem was twofold:
As #glennsl pointed out, the event name was wrong. It should be "input", not "value".
I mistook the this.value to refer to the value attribute of this, which is slider. Actually, this is considering slider to be an HTML input element, and referring to its input value.
As we cannot directly cast an Dom.Element.t to an Dom.HtmlInputElement.t, we first convert this to Dom.Node.t and then to Dom.HtmlInputElement.t. So, building upon #glennsl's code, the code is:
open Webapi.Dom
open Belt
let slider = document->Document.getElementById("myRange")->Option.getExn
let output = document->Document.getElementById("demo")->Option.getExn
output->Element.setInnerText(slider->Element.getAttribute("value")->Option.getExn)
slider->Element.addEventListener("input", _ => {
let value = slider->Element.asNode->HtmlInputElement.ofNode->Option.getExn->HtmlInputElement.value
output->Element.setInnerHTML(value)
})
I have to add a custon SVG file instead of the navigation icon from ArcGIS in the 'locate' widget ('esri-icon-locate'). Here the problem is, the default icon is appearing top of the custom svg file. Is there any way to hide the default icon?
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList += " mapnavigation"
}
});
and the css,
.mapnavigation:before{
display: block;
background: url('mapnavigation.svg');
background-repeat: no-repeat;
background-size: 17px 17px;
background-color: #ffffff;
}
You were really close to the solution, you just need to make it the only class of the node. Take a look at the example I put for you,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.my-svg-icon {
background: url(https://openlayers.org/en/latest/examples/data/square.svg);
width: 20px;
height: 20px;
}
</style>
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Locate"
], function (Map, MapView, Locate) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-56.049, 38.485, 78],
zoom: 3
});
var locateBtn = new Locate({
view: view
});
// Add the locate widget to the top left corner of the view
view.ui.add(locateBtn, {
position: "top-left"
});
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList = 'my-svg-icon';
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I want to show an iframe as in http://chesstao.com/test.php (click the green box). But I don't see a method or class to style the height and width of the iframe.
HTML: <div>
Show iframe popup
</div>
the js:
<!--Magnific-popup-->
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.8.9/jquery.magnific-popup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.iframe-link').magnificPopup({type:'iframe'});
});</script>
the css:
.my-popup {height:900px; width:1200px}
How can I code the style (height and width) for the magnific popup iframe? I am baffled. The style above is simply ignored.
This isn't a complete answer but it might help.
Change your options to something like this:
$('.iframe-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler your-special-css-class">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen> </iframe>'+
'</div>'
}
});
Then in you css Class do something like this:
.your-special-css-class {
max-width: 320px !important;
height: 85%;
margin: auto;
max-height: 780px;
padding: 140% 16px 0 13px !important;
}
the important part to adjust the height is the padding....
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+
'<div class="mfp-iframe-scaler" >'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div></div>'
}
});
});
Adding this after the popup call did it for me:
$('.mfp-content').css('height','100%');
This allows me to not have to change the CSS so I can vary the height as needed. Used alongside
alignTop: true
How can I keep the horizontal scroll bar from displaying?
An example of what I am attempting is at http://jsfiddle.net/fdlane/gjkGF/3/
Below is an example page of what I am attempting to do. With the width of the container div set to greater than the grid width, I was expecting that the horizontal scroll bars would not be displayed.
Using the current height of 200px and with the number of rows greater than 6, the vertical is displayed (good). However, the horizontal is then also displayed (bad).
What am I missing?
Thanks
fdl
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/tundraGrid.css">
<title>Grid Scrolling</title>
</head>
<body class="tundra">
<div id="container" style="width: 350px; height: 200px">
<div id="myGrid">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"> </script>
<script>
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function () {
var myStore = new dojo.store.Memory({
data: [{ id: "RecId1", values: "fooValue1" },
{ id: "RecId2", values: "fooValue2" },
{ id: "RecId3", values: "fooValue3" },
{ id: "RecId4", values: "fooValue4" },
{ id: "RecId5", values: "fooValue5" },
{ id: "RecId6", values: "fooValue6" },
{ id: "RecId7", values: "fooValue7" },
{ id: "RecId7", values: "fooValue7"}]
});
dataStore = new dojo.data.ObjectStore({
objectStore: myStore
});
var grid = new dojox.grid.DataGrid({
store: dataStore,
structure: [{
name: "ID",
field: "id",
width: "100px"
}, {
name: "Values",
field: "values",
width: "100px"
}]
}, "myGrid");
grid.startup();
});
</script>
</body>
</html>
add this style override to your head element:
<style>
.dojoxGridScrollbox { overflow-x: hidden; }
</style>
Reason may very well be, that when the grid overflows vertically, the vertical (-y) scroller appears and consumes 30 ( or so ) pixels of width, making the grid container also overflow in horizontal orientation
You can try to make use of the grid resize function - if a borderlayout.resize fixes your issue, reason is that it recursively resizes its children (at some calculated abs value). With Grid, you'd see this flow:
resize: function(changeSize, resultSize){
// summary:
// Update the grid's rendering dimensions and resize it
// Calling sizeChange calls update() which calls _resize...so let's
// save our input values, if any, and use them there when it gets
// called. This saves us an extra call to _resize(), which can
// get kind of heavy.
// fixes #11101, should ignore resize when in autoheight mode(IE) to avoid a deadlock
// e.g when an autoheight editable grid put in dijit.form.Form or other similar containers,
// grid switch to editing mode --> grid height change --> From height change
// ---> Form call grid.resize() ---> grid height change --> deaklock
if(dojo.isIE && !changeSize && !resultSize && this._autoHeight){
return;
}
this._pendingChangeSize = changeSize;
this._pendingResultSize = resultSize;
this.sizeChange();
},
I am using SenchaTouch 2 how to set different color on each list row.
SenchaTouch fiddle example:
http://www.senchafiddle.com/#MfLkR#wqVi1#eqWct
You could add a specific color to each row with css like
.x-list-item:nth-child(1n){
/* First Row */
background-color: Green;
}
.x-list-item:nth-child(2n){
/* Second Row */
background-color: Blue;
}
.x-list-item:nth-child(3n){
/* third Row */
background-color: Yellow;
}
Create a css file, name it whatever you want. Paste the code from my answer inside that css file. Reference that css file in your index.html. Or you can just put the style tags around the css code and place it directly in the head of your index.html.
<link rel="stylesheet" type="text/css" href="touch2/resources/css/apple.css">
<link rel="stylesheet" type="text/css" href="newCssCode.css">
You could add an "bgcolor" field to your data and change the itemTpl:
items: [ {
xtype: 'list',
itemTpl: '<div style="height:35px; background: {bgcolor};">{title}</div>',
data: [
{ title: 'Red BackGround', bgcolor : 'red' } // same thing for all the other items
#bork
Change the padding of "x-list-item-label" so that it is 0 with css
Then create a new div which will be a kind of new container for your item inside your template, change the bckground color of this div.