Page goes blank when inserting a Date Picker

OS info

  • Operating System : Windows 10.0.17763
  • Wappler Version : 2.4.5

Problem description

I think I am hitting a weird situation.
When I insert a date picker in my page, the entire (Design) screen goes blank.
The page in my browser also shows blanks. I also get these two messages:

I think the warning is because I have the notification object in the SSI of the page header. I get it the first time I load a Design page and If I refresh it, the warning goes away. In this case, it does not, and I think it’s because the Error message below.

I ventured into the Code area (not a programmer, thus the word “ventured” truly applies to me) and found several lines at the end of the head area that if I remove, along with the offending date picker in the body area, the problem goes away.

These are the lines in the head area

<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js"></script>

<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">

    <link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">

    <script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>

The date picker in my file reads like this:

<input id="date1" name="date1" is="dmx-date-picker">

which looks pretty harmless :frowning:

There is a big “however”, though.
I created a simple page with just a datepicker. It works flawlessly. The head and the body has basically the same corresponding lines to the ones that break this page.

I tried to upload the page I was working on but the site does not let me upload a php file.

Steps to reproduce

  1. Insert a date picker in my page - I could not reproduce by creating a simple page from scratch.
  2. Watch the problem unravel.

Any guidance will be appreciated.

Many thanks and happy holidays for all!

Alex

OK.
I managed to reproduce the problem with the minimal page below.

<!doctype html>
<html>

<head>
	<base href="/webCases/">
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script src="../dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css">
	<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
</head>

<body is="dmx-app" id="test2">
	<div class="container">
		<div class="row">
			<div class="col">
				<form id="form1">
					<input id="text1" name="text1" type="text" class="form-control">
				</form>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

STEPS TO REPRODUCE

  1. In the App Structure, select the input Text 1
  2. Click the button Make Date Range Picker

I think the problem could be linked to the use of Fonts Awesome Pro CDN
My project is configured to create pages loading Fonts Awesome 4.7 CDN
I then replace them manually in the page using the Add Framework button in App Structure.

Hope this bit helps those who know better than me how all these pieces work together.

Alex

Sorry, forgot to add that after the two steps above to reproduce the problem are executed, the code looks like this:

<!doctype html>
<html>

<head>
	<base href="/webCases/">
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script src="../dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css">
	<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
</head>

<body is="dmx-app" id="test2">
	<div class="container">
		<div class="row">
			<div class="col">
				<form id="form1">
					<input id="text1" name="text1" type="text" class="form-control" is="dmx-date-range-picker">
				</form>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html> 

The last step adds lines 16-20 and modifies line 28. The last thing I before the page goes blank is a success notification that the moment 2.22.2 library has been added.

The problem also happens

  1. with FA 4.7 CDN, i.e. without doing the font replacement mentioned in my previous post.
  2. if I insert a Date Range Picker instead of converting a text input to a range date picker.

Please let me know if I’m doing something wrong or if you need me to do something else. I would really appreciate the help!

Alex

Hi,
I think I found exactly when this bug occurs and a also what looks like a workaround for it.
This is what I observed:

  1. The problem occurs when you insert a date range picker in a form or convert a text input in a form into a date range picker
  2. The problem does not occur if you insert a date range picker before the form (did not try inserting after a form)
  3. Once a date picker is inserted outside the form, you can insert a date picker inside and the problem does not occur. This will be my workaround in the meantime.

The reasons why all this happens are beyond me (or the time I have to look into it) but I trust the findings may help quash this one.

Alex

PS: This may explain why I could not reproduce it initially. In all likelihood I did not have the date picker inside a form.

Thanks for the extensive report. We will investigate

Much appreciated.
While you guys are at it, can you please look into why the style of the date picker element looks so different from the style of other form elements? It makes it look odd in a form that uses Select and an Input elements.

For example:

  • Its size is fixed, i.e. it does not expand to occupy the width of the column, like a Select or Input.
  • Its border is of a different colour.
  • Its border is not rounded
  • Its background colour is different when disabled.

I imagine that there might be ways for a user to make a Date Picker element look like the others but, needless to say, I have no idea of how to make that happen on my own.

Many thanks!

Alex

PS: The Input element defined as a “date” does not have those problems, but it does not have the functionality offered by the Date Picker that I need.

Hello,
When you convert a bootstrap 4 text field to a date picker, then it has the same style as all the other form inputs on your page.

Thank you Teodor.
I also found today that if I add the statement
class=“form control”

to the Date Picker in a form, then it blends in great, and expands to the size of the column.

Is doing that OK too?

Alex

Thought I did something wrong. Luckily not. I run into the same problem.