I'm using Materialize to generate modals on a php website, only the data below is clearly visible.
This is based on data from a MySQL database. For each hard drive in said db, generate a card and populate with drive data.
For testing purposes I removed all php code to see if that was what was breaking it, sadly I still had normal text punch through.
Any ideas? Are there css options I can use to force the opaque settings? Or maybe an alternative altogether, I did have a look at css overlays but had the same problem.
In the code below I've removed all php. The complete website source code can be found at my repo
here (albeit without the modal stuff as not committed to master yet)
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<!-- Drive stats on index -->
<div class="card-content center">
<h6>Hard Drive Canonical Name Goes Here via PHP</h6>
<ul>
<li>Hard Drive Size Goes Here Via PHP</li>
<li>Hard Drive Temp Goes Here via PHP</li>
<li> </li>
<li>Last updated at database timestamp goes here via PHP</li>
</ul>
</div>
<div class="container center">
<a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
<div id="modal" class="modal">
<div class="modal-content">
<div class="card graphcolour">
<div class="card graphcontent">
<canvas id=1></canvas> <!-- <?php echo htmlspecialchars( $drive['DiDriveId'] )?> is what would normally be in here -->
</div>
</div>
"hello there!"
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
<!-- Status Images -->
<!-- Images would go here based on PHP if else statements -->
</div>
</div>
The materialize modal code snippets were edited versions of below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>A Demo of Modal</h3>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn pink darken-1 modal-trigger" href="#demo-modal">Launch Modal</a>
<!-- Modal Structure -->
<div id="demo-modal" class="modal">
<div class="modal-content">
<h4>A Demo of Simple Modal</h4>
<p>Content of the modal goes here. Place marketing text or other information here.</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
</body>
</html>
Thanks to SeanDoherty for clarifying what I felt was the answer. I moved the Modal outside of the card, added three empty line breaks to the bottom of my card, then re-added the modal script with css offsetting. It's cheap, but it works!
.modalPosition{
top: -100px;
}
I was trying to use a DateTimePicker in the Asp.net core Razor page.
I searched the internet and found this page seems works good.
So, I went to the NuPackage and found Bootstrap.v3.datetimepicker 4.17.45, and downloaded it.
After install, I got a warning:
Bootstrap.v3.Datetimepicker 4.17.45 depends on bootstrap.less (>= 3.3.0) but bootstrap.less 3.3.0 was not found. An approximate best match of bootstrap.less 3.3.5 was resolved.
Since the bootstrap version in the project is 3.3.5, and it is a warning instead an error, so I think it should be fine. I copied the sample code into my cshtml file, and run it.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
The DateTimePicker showed up. How ever, when I clicked on the calendar button, nothing happened. It seems javascript is not running?
I searched everywhere, and I found this part in the layout page.
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
It seems I need to include the js file which contains the datetimepicker here. However, I search the whole project, cannot find any js file contains 'datetimepicker' string.
I am not familiar with front-end structure. what I did wrong or missing? Is my datetimepicker installation not success? is the js script not working on my razor page? How do I diagnose it?
Added:
I enabled the javascript debugging, and I got the following exception. It looks really wired as exception comes from the sample code, which runs with no problem on the original webpage.
The DateTimePicker.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.You could copy it in your project and add #section Scripts { and } in your project.
The better way is to use either LibMan or npm to get your client-side libraries.
Here is a simple sample in my project as below.Anyway,the version up to you:
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
#section Scripts
{
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap-theme.min.css" />
<script type="text/javascript" src="~/lib/jquery/1.9.1/Content/Scripts/jquery-1.9.1.js"></script>
<script src="~/lib/moment.js/2.9.0/Content/Scripts/moment.min.js"></script>
<script src="~/lib/bootstrap/3.3.0/content/Scripts/bootstrap.min.js"></script>
<script src="~/lib/bootstrap.v3.datetimepicker/4.17.45/content/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
Note: moment.js should render before the datetimepicker.js
I have a very simple HTML page that in summary includes the Fabric UI CSS file and has a body (body.ms-Fabric) with
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
Column 1
</div>
<div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
Column 2
</div>
</div>
</div>
but is displaying two rows instead of the expected two columns
What am I doing wrong?
Am I missing any other CSS include or class?
Thanks
It does work. :)
They seem to have forgotten to update their guide when they included rtl support. Simply add dir="ltr" to the html tag or at least the div parent to .ms-Grid-col
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
</div>
</div>
</div>
I have the same issue here, I dont know why we are missing float left:
.ms-Grid-col{
position:relative;
min-height:1px;
padding-left:8px;
padding-right:8px;
box-sizing:border-box}
[dir=ltr] .ms-Grid-col{float:left}
[dir=rtl] .ms-Grid-col{float:right}
if you add float:left; to .ms-grid-col class then it will be ok
iam using these codes in my website to make a bxsilder
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
mode: 'fade'
});
});
</script>
<div id="slider1">
<div class="slide">
<img src="images/thumbnails/slide1.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide2.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide3.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide4.png">
</div>
<div class="thumbs">
<img src="images/thumbnails/slide1-thumb.png" />
<img src="images/thumbnails/slide2-thumb.png" />
<img src="images/thumbnails/slide3-thumb.png" />
<img src="images/thumbnails/slide4-thumb.png" />
</div>
</div>
CSS
#slider1{
width:500px;
height:400px;
background-color:#ccc;
}
.slide {
width:500px;
height:350px;
}
.slide img {
width:500px;
height:350px;
}
.thumbs {
width:125px;
height:75px;
}
But nothing appear in the page! except prev & next words
what's wrong with this code?
the post is refused because of this message "Your post does not have much context to explain the code sections; please explain your scenario more clearly."
so that iam repeating these words till it's accepted!
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
I tested you code with bxslider un jquery - ir works "fine". Are You sure, You have Your images correctly added?
Test Your site with Chrome Developer tools, look into Networking and Console - does it shows any errors?
Are the paths to the 2 .js files correct? That is, do you have a folder named "js" with the two files in there? Or did you just copy/paste the code from web examples??
Before I implemented a small web interface using dojo 1.5 and with just referencing the paths to the local folders (dojo,dijit,dojox) and using dojo.require to load the modules I wanted, it worked perfectly. Now I upgraded to 1.7 and all of a sudden it does not work even when usin g the url reference. I am referencing one of the demo projects
http://download.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dijit/themes/themeTester.html
and was hoping to recreate the page with a few changes. I broke it down to the most simplest form by only having the main menu and it does not appear that way but just as mere text terms below each other.
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Theme Previewer</title>
<script type="text/javascript" dojoConfig="parseOnLoad:false,
async:true"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" > </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="Styles/demo.css"/>
<script type="text/javascript">
var dojoConfig = {
baseUrl: "//ajax.googleapis.com/ajax/libs",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
{ name: "dijit", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
{ name: "dojox", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" }
]
};
</script>
<!--script type="text/javascript" src="Scripts/src.js"></script-->
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:=false">
<div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top'">
<div data-dojo-type="dijit.PopupMenuBarItem" id="edit">
<span>Edit</span>
<div data-dojo-type="dijit.Menu" id="editMenu">
<div data-dojo-type="dijit.MenuItem" id="cut" data-dojo-props="
iconClass:'dijitIconCut'
">Cut</div>
<div data-dojo-type="dijit.MenuItem" id="copy" data-dojo-props="
iconClass:'dijitIconCopy'
">Copy</div>
<div data-dojo-type="dijit.MenuItem" id="paste" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div>
<div data-dojo-type="dijit.MenuSeparator" id="separator"></div>
<div data-dojo-type="dijit.MenuItem" id="undo" data-dojo-props="iconClass:'dijitIconUndo'">Undo</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="view">
<span>View</span>
<div data-dojo-type="dijit.Menu" id="viewMenu">
<div data-dojo-type="dijit.MenuItem">Normal</div>
<div data-dojo-type="dijit.MenuItem">Outline</div>
<div data-dojo-type="dijit.PopupMenuItem">
<span>Zoom</span>
<div data-dojo-type="dijit.Menu" id="zoomMenu">
<div data-dojo-type="dijit.MenuItem">50%</div>
<div data-dojo-type="dijit.MenuItem">75%</div>
<div data-dojo-type="dijit.MenuItem">100%</div>
<div data-dojo-type="dijit.MenuItem">150%</div>
<div data-dojo-type="dijit.MenuItem">200%</div>
</div>
</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="themes">
<span>Themes</span>
<div data-dojo-type="dijit.Menu" id="themeMenu"></div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="dialogs">
<span>Dialogs</span>
<div data-dojo-type="dijit.Menu" id="dialogMenu">
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="inputPadding">
<span>TextBox Padding</span>
<div data-dojo-type="dijit.Menu" id="inputPaddingMenu">
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="help">
<span>Help</span>
<div data-dojo-type="dijit.Menu" id="helpMenu">
<div data-dojo-type="dijit.MenuItem">Help Topics</div>
<div data-dojo-type="dijit.MenuItem">About Dijit</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" data-dojo-props="disabled:true">
<span>Disabled</span>
<div data-dojo-type="dijit.Menu">
<div data-dojo-type="dijit.MenuItem">You should not see this</div>
</div>
</div>
</div>
</div>
I have a separate file that references the items to include:
define([
"dojo/_base/array",
"dojo_base/config",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/_base/kernel",
"dojo/query",
"dojo/ready",
"dojo/_base/window",
"dojo/_base/fx",
"dijit/registry",
"dijit/MenuItem",
"dojo/date/locale",
"dojo/parser",
"dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel",
"dojo/number", //// dojo/number/format
"dojo/dnd/Source",// // dojo/dnd/Source
"dojo/_base/json", //// dojo/toJson
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dojo/parser",
"dijit/form/DateTextBox",
"dojox/widget/AnalogGauge",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/BorderContainer",
"dijit/layout/AccordionContainer",
"dijit/form/Button",
"dojox/widget/AnalogGauge",
"dojox/widget/gauge/AnalogArcIndicator",
"dojox/widget/gauge/AnalogNeedleIndicator",
"dojox/widget/gauge/AnalogArrowIndicator",
"dijit/MenuBar",
"dijit/PopupMenuBarItem",
"dijit/Menu",
"dijit/MenuItem",
"dijit/Tree",
"dijit/MenuSeparator",
"dijit/Calendar",
"dijit/ColorPalette",
"dijit/dijit-all" // dijit.*
["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
}]);
hope this clarifies it a bit.
The HTML you've pasted specifies 'parseOnLoad: false' when it pulls Dojo in. That'll prevent Dojo from actually parsing any of your data-dojo-type unless you explicitly call parser.parse(). If you change it to 'parseOnLoad: true', does that help? (That's no longer the recommended way to do it, but it would still be useful to try.)
You also seem to have a mixture of Dojo 1.7.2 and 1.7.1 references in the HTML, which is a little odd. Do you need that dojoConfig at all? Dojo ought to be able to find dijit + dojox as siblings of the dojo directory even on the CDN.
But it would definitely help to know what "does not work" actually means: do you get errors, no content appearing?
Later additions to answer:
make sure you're running your files from a web server, not local files, otherwise the XHR requests will fail
get rid of your dojoConfig object: it's not helping
your separate file looks dodgy: you have some strange array bracketing going on
your data-dojo-props on your top div is a bit broken. Write "gutters: 'false'", not "gutters:=false"
Add this in your HTML. It'll load the right modules and kick the parser off manually.
<script>
require(["dojo/parser", "dijit/dijit-all", "dojo/domReady!"], function(parser) {
parser.parse();
});
</script>
That'll get your menu items displaying, although it won't work completely until you add your onClick handler functions.
Finally, make sure you look in your browser console for errors and warnings: that'll provide lots of output that'll help people diagnose future problems. And if you do get problems loading modules, try switching async off because async can sometimes make diagnostics harder.