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;
}
Related
I'm learning Vue framework, could not understand how to use slot, who can show me a sample demo please?
thanks a lot.
#Doc thank you for your answer and prompt. And i make out the demo:
<!DOCTYPE html>
<html>
<head>
<title>39、slot !</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<alert-box>
Something bad happened.
</alert-box>
</div>
<script>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
As a quick code example from https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
Lets say you want to render the given template called 'base-layout'
<div class="container">
<header>
<!-- We want header content here -->
</header>
<main>
<!-- We want main content here -->
</main>
<footer>
<!-- We want footer content here -->
</footer>
</div>
So you can see we have three slots 'header', 'main' and 'footer'.
If you write
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>
Then the first h1 tag value goes inside the slot named 'header' in our template.
And similarly other values.
The result would be
<div class="container">
<!-- this is where the 'header' slot was -->
<h1>Here might be a page title</h1>
<!-- this is where the main slot was -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<!-- this is where the footer slot was -->
<p>Here's some contact info</p>
So slots are basically like placeholder which can be named and you can send information at exact part.
I have a script that needs to output the results of an answer on a modal window. But currently it isn't rendering. The results output correctly outside of the modal HTML; even inspecting the modal source when it is visible shows the data isn't rendering; i.e. the results aren't hidden from view, they aren't calculated at all.
The full source is at
http://www.sic-parvis-magna.com/sicpm/mayan-vue/index.html
The variables in question are userAnswer, userAnswerDisplay, and userMessage
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<div v-if="userAnswer !== -1">
<div id="user-answer" v-html="userAnswerDisplay"></div>
<div id="user-answer-message" v-html="userMessage"></div>
<div id="user-hint"></div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button modal-close">Cancel</button>
</footer>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
The problem is your modal template is outside the Vue app (i.e., section#mainapp), so that template is not processed by Vue:
<section id="mainapp">...</section>
<div class="modal">...</div> <!-- FIXME: Move this into section above -->
Move the modal into section#mainapp for the computed properties to be evaluated.
demo
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">
The docs at bootstrap-datetimepicker don't really explain what version of jquery and moment are required to use the widget (if specific versions are needed). I don't have any jquery errors according to dev tools, and I tested the calendar icon button by adding some quick jquery which worked fine.
($("#datetimepicker10 span").click(function(){
alert('working!');
};
));
Otherwise, I have everything required in the docs loaded in the correct order (I think). However; the icon link doesn't work and thus I cannot select a date nor time. I assume it is something with how files are being loaded or the version of jquery/moment I am using because I tried dropping in this jsfiddle, and it wouldn't work either.
Any ideas would be appreciated. Any hints on how to debug this sort of js error as well would be nice for the future.
Current Code:
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
End of body..
<script type='text/javascript' src="/static/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/bootstrap-datetimepicker.min.js"></script>
$( document ).ready(function() {
$('#startDate').datetimepicker();
});
Lastly, the html:
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Please have a look at this fiddle:
BS Datetimepicker
$('.datepicker').datetimepicker({
format: 'DD-MM-YYYY HH:mm:ss'
});
For custom format, just use data-date-format in your input. For example:
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" data-date-format="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
That is format in Latin-America, Day/Month/Year
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html