I wish to use x-editable and bootstrap-datetimepicker on the same page, but not on the same element. When doing so, however, the css required for x-editable (bootstrap-editable.css) corrupts bootstrap-datetimepicker, and it looks like the first image below instead of the desired second image. Note that x-editable's JavaScript has not even been included on the page, thus it must be just the bootstrap-editable.css.
To troubleshoot, I used Chrome's and Firefox's inspector to see what CSS is applied, however, when drilling down in the element tree, the JavaScript generated div.bootstrap-datetimepicker-widget automatically closes which prevent's the Chrome dev-tools from being able to view the CSS which is applied to it.
How can the CSS which is applied to this element be determined so that some sort of fix be created?
https://jsbin.com/yanawuv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<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>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker#4.17.47/src/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
Related
So I am using Bootstrap to create my collapsable elements. I am also using a range selector cdn, and I'm thinking there might be some styles from the BS CSS, specifically to the collapse elements, that are causing the error in UI.
When I place the range selector outside of the collapse element, it looks and works perfectly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
</div>
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
But when I try to put it inside the collapse element, it throws the slider off the page.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I can't seem to pinpoint where its occuring.
Will work with 2 minor modifications
The range slider initializes itself when the page loads and calculates it's size.
When you enclose the slider in a hidden element, like a Bootstrap collapse, it can't calculate the size correctly. And that's why it looks messed up.
There are a couple of ways we could fix this problem. For example, we could call the slider's reset method to force it to resize correctly. Yet, the simplest solution is to show the collapse on page load, allow the slider to initialize, and then close the collapse. And all this happens without the user noticing anything.
In the markup we add the show invisible class:
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
And then in a script tag at the end of the page (or a DOMContentLoaded event handler) we remove show invisible class.
<script>
document.querySelector(".show.invisible").classList.remove("show", "invisible");
</script>
The selected answer
The selected answer "fixes" the problem by breaking the Bootstrap collapse control. It doesn't work like OP's original code and has some visible UI problems after the page loads.
Try it
Run the code snippet to understand how it works.
// hide the collapse after range control has initialized
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".show.invisible").classList.remove("show", "invisible");
});
<div id="container" class="mb-2 p-2 border">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
I fixed the code by defining a custom class, You are using Bootstrap 5.1.0 where 5.1.3 is the latest so I have used it although it works perfectly on both.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
Link with href
</a>
</p>
<div id="collapse">
<div class="card card-body">
<range-selector min-range="0" max-range="1000" />
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I took a bootstrap and jQuery datepicker online since it was easier for me, it worked perfectly on localhost, but now after uploading it online, it doesn't work, I click on the input, and usually a calendar would pop up, now I just have a plain text input.
This is the full file where I use the datepicker:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="css/reservation.css" rel="stylesheet">
</head>
<body>
<section class="book-a-table">
<h1 class="title">Book</h1>
<form action="choose-time.php" class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" name="name" type="text" required>
<label class="label" for="name">Ime</label>
</div>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date"/>
</span>
<input class="submit-btn" name="submit" type="submit" value="Choose time >">
</form>
</section>
I had some script for disabling dates, I removed it but I still had no changes, tried to modify it, no changes, I only get a blank input text form.
It might be blocked by your server since it violates the Content Security Policy directive.
Check whether it shows in Browser Console (Ctrl + Shift + i).
Best way is to download Bootstrap files (e.g. https://getbootstrap.com/docs/4.3/getting-started/download/), upload it to your server and add this in your html
<link rel="stylesheet" href="./css/bootstrap.min.css">
I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the outlined textfield component in my HTML project?
Below is my code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" />
</head>
<body>
<!--button class="mdc-button mdc-button--raised">Button</button-->
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="tf-outlined" class="mdc-text-field__input" />
<label for="tf-outlined" class="mdc-floating-label">Your Name</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</body>
</html>
A fiddle for this code: jsfiddle
You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material TextField Quick Start</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
<input type="text" class="mdc-text-field__input">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label">Label</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
</label>
</body>
</html>
The MDL Docs themselves have resources on how to include the components just using the standard <link> and <script> tags.
Docs:
https://material.io/develop/web/docs/getting-started/
while trying to build an UI for an android and ios app with phonegap i got stuck:
my function getFocus() tries to get the tagName and/or id of the element in focus by using
document.activeElement.tagName
but all browsers seems to get different results:
Chromium (54.0.2840.87 (64-bit)) and androids Webkit return what I would expect: "BUTTON"
Safari (10.0), Firefox (49.0.2) and the ios Webkit return: "DIV"
they all seem to look from a different starting point in the DOM.
How can i be more precise in order to get at least BUTTON from safari/ios webkit as well as chromium/ android webkit?
here is the complete example code:
[edit] I edited one line in response to the helpful comment by user the8472 and took out an tag that was around the tag [/edit]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="add">
<div data-role="header">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content">
<p></p>
<p>
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton" onclick="javascript:getFocus()">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
button inside a does not seem to be valid anyway. If you're doing non-specified things you shouldn't expect consistent behavior.
https://html.spec.whatwg.org/#the-a-element
4.5.1 The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.
https://html.spec.whatwg.org/#interactive-content-2
Interactive content is content that is specifically intended for user interaction.
a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), [...]
i got it:
as the8472 pointed out, i should check the html specs:
button is (understandably) not properly specified in its focus behaviour:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button tells me that do not give focus to a button when clicked. that explains the described behaviour.
when i transfer the onclick="javascript:getFocus()" to the tag for example and click on input fields (not the button of course) i get the correct and to be expected elements in focus returned:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body id="mybody" onclick="javascript:getFocus()">
<div data-role="page" id="add">
<div data-role="header" id="myheaderDiv">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content" id="mydiv">
<p id="myp">
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
to identify the different elements i will later use .activeElement.id
I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>