Is it possible to customize the vue components that quasar has?
I want to use the color picker vue component from the quasar framework (this one https://quasar.dev/vue-components/color-picker), but i wanted to remove the header and keep the hexadecimal color input.
I know there is a "no header" version of the component, but that version also removes the color input.
Here an image to exemplify
I want to keep the green part and remove the red part
You can hide the header completely and add a custom header which shows value of the current color.
<link href="https://cdn.jsdelivr.net/npm/quasar#1.8.3/dist/quasar.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.8.3/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md">
<div class="container">
<div class="custom-header">{{hex}}</div>
<q-color no-header v-model="hex" dark class="my-picker" ></q-color>
</div>
</div>
</div>
<script>
new Vue({
el: '#q-app',
data () {
return {
hex: '#FF00FF'
}
}
})
</script>
<style>
.my-picker{
width: 150px
}
.container {
width: 180px;
position: relative;
}
.custom-header {
text-align: center;
background: transparent;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 10000
}
</style>
codepen
Related
I wish to have all the tabs have the same height, no matter what contents are inside.
The tabs reside inside a div. Preferably I don't need to set a fixed height for this div, but instead the div should have the height of the mat-tab that has the most stuff.
Haven't found anything really works yet, if someone could help that will be wonderful!
My current code:
HTML:
<div fxLayout="column" style="min-height: 100%; height: 100%">
<mat-tab-group style="height: 100%">
<mat-tab label="1">
<mat-card fxFill class="mat-elevation-z4 about-card">
this mat-card contains the most amount of stuff
</mat-card>
</mat-tab>
<mat-tab label="2">
<mat-card fxFill class="mat-elevation-z4 about-card">
...a bunch of things
</mat-card>
</mat-tab>
<mat-tab label="3">
<mat-card fxFill class="mat-elevation-z4 about-card">
...a bunch of things
</mat-card>
</mat-tab>
</mat-tab-group>
</div>
CSS:
.about-card {
display: flex;
align-items: center;
justify-content: center;
margin: 16px;
padding: 16px;
border-radius: 8px;
}
Edit: Some boilerplate example:
First tab:
Second tab:
See how the heights of the content are different
This is a solution using javascript. You need to get the element with the max height and update the height of mat-tab-body-wrapper container :
ngAfterViewInit() {
const groups = document.querySelectorAll("mat-tab-group");
groups.forEach(group => {
const tabCont = group.querySelectorAll("mat-tab-body");
const wrapper = group.querySelector(".mat-tab-body-wrapper")
const maxHeight = Math.max(...Array.from(tabCont).map(body => body.clientHeight));
wrapper.setAttribute("style", `min-height:${maxHeight}px;`);
});
}
You can transform it using the angular API
Try this.
<mat-tab-group #myTabGroup id="myTabGroup">
ngAfterViewInit() {
this.setTabHeights();
}
#HostListener('window:resize', ['$event'])
handleResize(event: Event) {
this.setTabHeights();
}
setTabHeights() {
const tabCardBody = document
.querySelectorAll('mat-tab-group#setupWarehouseDataTab mat-tab-body');
if (!tabCardBody) return;
const maxHeight = Math.max(...Array.from(tabCardBody)
.map((elm: any) => elm.clientHeight));
tabCardBody.forEach((elm => {
elm.setAttribute('style', `height:${maxHeight}px;`);
});
}
JSFiddle Link
When SVG image is clicked, alert function does not trigger in IPhone. (It works in android).
How can I make this workin IPhone without using z-index and overlay div?
HTML
<div id="svg" style="position: relative; background: green; width: 900px; height: 900px;" >
<object id="object" type="image/svg+xml" data="http://www.useragentman.com/tests/pointerEvents/images/tv-path.svg">
</object>
</div>
CSS
#svg object{
pointer-events: none;
}
Javascript
$('#svg').on('click', function () {
alert('hello');
});
I want to use an element on the page as the title of the following content, but when the user is scrolling into the content this title-element should be fixed at the header. Similar to the ABC-captions in the iOS music-app.
See here: https://jsfiddle.net/1e7ync4w/
HTML
<div>
<div class="top">
Test
</div>
<div class="content">
<div class="scroller">
</div>
Test
</div>
</div>
CSS
.top {
background-color: yellow;
height: 300px;
}
.content {
position: relative;
height: 600px;
background-color: green;
}
.scroller {
position: absolute;
width: 100%;
height: 10px;
top: 0;
left: 0;
background-color: blue;
}
.scroller.fixed {
position: fixed;
}
JS
$(document).ready(function() {
$(window).on('scroll touchmove', function() {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if(scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed');
}
});
});
The problem is that the iOS safari seems to have a bug with changing elements to fixed (via JavaScript) while scrolling. As soon as the user scrolls into the content, the title-element becomes invisible but shows after releasing the finger from the display (scroll-end).
I only tested this on the iOS 9.3.2 safari but I think this issue is older.
I found a solution for this problem. It's a little bit hacky but the only workaround I found for this iOS-bug.
The GPU of the browser needs to be "activated" for updating the according element. This can be achieved by setting a transform: translate-style via JS as soon as the positioning jumped to fixed.
The code of the example would look like this:
$(document).ready(function () {
$(window).on('scroll touchmove', function () {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if (scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed').css({
'transform': 'translate3d(0px,0px,0px)',
'-moz-transform': 'translate3d(0px,0px,0px)',
'-ms-transform': 'translate3d(0px,0px,0px)',
'-o-transform': 'translate3d(0px,0px,0px)',
'-webkit-transform': 'translate3d(0px,0px,0px)'
});
}
});
});
Using the normal implementation of JQuery UI slider with this code:
$(function() {
$('.slider').slider();
});
JQuery UI only creates the surrounding slidable area, and then the handle to drag. Does anyone have experience extending this add an secondary element that shows where the user has dragged to? What I want to achieve is to have a two colour draggable area, either side of the handle.
You can add divs in the slider and update their size on slide event. Like this:
$('.slider').slider({
max: 100,
min: 0,
slide: function (e, ui) {
$('.left-side').css('width', $(ui.handle).position().left)
$('.right-side').css('width', $(e.target).width() - $(ui.handle).position().left)
}
});
$('.left-side').css('width', '0px');
$('.right-side').css('width', $('.slider').width())
.slider div {
position: relative;
height: 100%;
}
.left-side {
background-color: aliceblue;
left: 0px;
width: 200px;
float: left;
}
.right-side {
background-color: bisque;
width:200px;
float: left;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='slider'>
<div class="left-side"></div>
<div class="right-side"></div>
</div>
I'm creating a page to manage the our times at the office (for example when we made home-office). This requires selecting a date and then time-range.
I know about the Date-Picker from jQuery-UI, and there also seems to be something interesting for time picking. But since I need a start and end time, a UI to select date and time range would be perfect. Is there something you could recommend?
Visit jQuery UI datepicker range example and click "view source".
Combine with jquery timepicking solution found here.
That should hopefully get you going in the right direction.
Another interesting option could be handle the date in the date-picker and the time-range with a separated UI component (in this specific case start and end time are in the same day).
You can take a look at these time-range sliders:
$("#slider-range").slider(options_object);
http://jsfiddle.net/jrweinb/MQ6VT/
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
$(document).ready(function(){
$(".datetimepicker").datetimepicker({
timepicker: true,
allowTimes: [
'12:00', '12:30', '13:00','13:30','14:00',
'14:30', '15:00', '15:30', '16:00', ]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.css">
<input type="text" class="datetimepicker" />
You can select time using this slider.
<!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: 10px;
border-radius: 5px;
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: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="10" max="22" maxvalue="10" class="slider" id="myRange">
<p>Value: <span id="demo">4PM</span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
slider.oninput = function() {
var time=slider.value;
if(time<12){
time=time+'AM';
}
else if(time>12){
time=time-12+'PM';
}
else if(time=12){
time=12+'PM';
}
//alert(time);
output.innerHTML = time;
}
</script>
</body>
</html>