i am trying to add my header title along with the prev,next,today onto the left side of the page,how ever it doesnt allow for them to be on one line, it line breaks at the title
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid' ],
header: {
left: 'title prev,next today',
center: '',
right: 'dayGridMonth'
}}
how do i get it to move up like
html
<div class="fc-toolbar-chunk">
<h2 class="fc-toolbar-title">November 2020</h2>
<button class="fc-prev-button fc-button fc-button-primary" type="button" aria-label="prev">
<span class="fc-icon fc-icon-chevron-left"></span></button><button class="fc-next-button fc-button fc-button-primary" type="button" aria-label="next"><span class="fc-icon fc-icon-chevron-right"></span></button>
<button disabled="" class="fc-today-button fc-button fc-button-primary" type="button">today</button></div>
This happens because <h2> elements (like all h... elements) are, by default, block-level elements. It appears that the fullCalendar developers didn't consider the possibility that you might want to put the title and buttons into the same section of the header, so they didn't change that.
However you can alter this easily by setting the element's display to inline, e.g.
.fc-toolbar h2 {
display: inline;
}
Demo: https://codepen.io/ADyson82/pen/qBaWxVo
Related
I am building a project based on this React Template.
In one of the componenets I have a Select List and under it there's a Card element.
The problem is that when I click on the list the items appear under the card element as you see below:
I had a feeling this was caused by the CSS code of the template itself that configures the card to appear over all other elements.
So what I did is I created a new react project with:
npx create-react-app
And my suspicion was right.
I copied basically the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
And the select items appear ABOVE the card:
The card is colored in red.
CONCLUSION: The problem is caused by the card css code of the template.
As you see, I tried with different configurations with the z-index attribute, but to no avail.
Any idea how to fix this?
The problem is with the z-index and position, whichever content you want to show in the top should have higher z-index value.
Try giving the select dropdown the high values compared to card.
Try removing both css attributes position: absolute and z-index if it is not needed. Position absolute is only used when to need to move the content to wherever you want to the respective relative parent container. So if you are just practicing and not doing design try to remove both.
Basically, I'm creating a form component that is contained inside a v-dialog. The form component will have different child components that are rendered based on select input. So I have to set width of v-dialog to "unset", so that the width of the dialog will stretch to match its content.
The transition works when I toggle the value of width, eg: either 450px or 300px. The problem is that I don't know beforehand the width of the form contains in the dialog, so I definitely need to use dynamic width.
So far, I can not find anyways to achieve transition when using dynamic width. I was trying to get the width of the form component using refs, but setting width to unset, prevent the transition. By the way, the transition I'm talking about is the transition of the width, when using fixed width, it shows nice transition but not for dynamic width
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog v-model="dialog" width="unset">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">
Click Me
</v-btn>
</template>
<v-card>
<v-select v-model="selectedForm" :items="items">
</v-select>
<div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
<div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false
};
}
});
codepen for using fixed width: https://codepen.io/duongthienlee/pen/MWaBLXm
codepen for using dynamic width: https://codepen.io/duongthienlee/pen/GRpBzmL
Noted that in the example i made in codepen, I defined width already, but the real case is that I don't know beforehand the width of form-a and form-b component. form-a and form-b width will be inherited by its parent div which is v-dialog, so that's why I set the width of v-dialog to be unset.
An example of what I mean "dynamic width": form-a has a select input. When user chooses an item, there will be a request to server to get input labels. So form-a will render multiple input fields based on the response body from server. The response body will contain label and default values information. So that makes the width of form-a becomes dynamic.
I think something like this can work for you.
Change v-dialog like so:
<v-dialog v-model="dialog" :width="forms.find(x => x.name===selectedForm).width">
Modify data() to return a forms prop:
data() {
return {
selectedForm: "form-a",
items: ["form-a", "form-b"],
dialog: false,
forms: [
{
name: 'form-a',
width: 200
},
{
name: 'form-b',
width: 1000
}
]
};
}
What you want to do is get the size of the rendered form, and then apply it to the dialog.
This is a common theme when attempting to animate content with dynamic dimensions.
One way to do this is by:
Set the form's visibility as hidden
Wait for it to render
Get the form's width and set it to the dialog
Unset the form's visibility
The tricky/hacky part is that you have to properly await DOM (setTimeout) and Vue ($nextTick) recalculations. I didn't have to await for Vue's $nextTick in this example, but you probably will if you're rendering nested form components:
<div class="form-container">
<div :style="formStyle('form-a')" class='form-a' ref="form-a">FormA</div>
<div :style="formStyle('form-b')" class='form-b' ref="form-b">FormB</div>
</div>
computed:{
formStyle(){
return form => ({
visibility: this.selectedForm == form ? 'inherit' : 'hidden',
position: this.selectedForm == form ? 'inherit' : 'absolute'
})
}
},
methods: {
async onSelectChange(form){
// async request
await new Promise(resolve => setTimeout(resolve, 1000))
this.selectedForm = form
this.recalculate()
},
async recalculate(){
// wait for DOM to recalculate
await new Promise(resolve => setTimeout(resolve))
const formEl = this.$refs[this.selectedForm]
this.dialogWidth = formEl.clientWidth
this.dialogHeight = formEl.clientHeight
},
...
}
Here's the working code to give you an idea:
https://codepen.io/cuzox/pen/yLYwoQo
If I understand you correctly, then this can be done using css. You can try replace all the fix width in the form with
width: fit-content;
For example in you codepen:
.form-a {
width: fit-content;
height: 350px;
background: blue;
}
.form-b {
width: fit-content;
height: 500px;
background: red;
}
The v-dialog renders into a div with class v-dialog:
It seems the animation only works when the the width is of known value, so it cannot be just "unset". The solution would be to get the width of the child element, and set the width of the v-dialog accordingly with a variable.
See VueJS get Width of Div on how to get the width of the child element.
Let me know if it works, I find this is very interesting.
I need to make a div clickable which per HTML5 is easy enough:
<a href='#'>
<div>Hello World</div>
</a>
The problem I am having is some of my div objects contain links:
<div>Hello World. <a href='#'>Click me</a>
So the method in the first example breaks whenever I have an embedded link.
<a href='#'>
<div>Hello World <a href='#'>Click me</a></div>
</a>
^^^^ already closed here ---------------^^^^
edit: Also, there are multiple divs on one page. Each div points to a different URL.
Is there a better, clean way of handling this, so that empty space in the div is clickable, except for text - which could be plaintext or a link, like in my second example.
Instead of wrapping your divs in a link, add an eventlistener to the divs which checks if a link was the event target:
// get a NodeList of all divs with the attribute data-url
// and destructure the NodeList to an Array using [...NodeList]
const divs = [...document.querySelectorAll('div[data-url]')];
// now that divs is an array we can use Array methods to iterate
for (const div of divs) {
div.addEventListener('click', event => {
switch (event.target.tagName) {
case 'A':
// do nothing
break;
default:
// do whatever you want to do on div click here
console.log(event.target.dataset.url);
// this would be
// location.href = event.target.dataset.url;
// in your application
}
});
}
<div data-url="https://connexo.de/defuse">Hello World <a href='#'>Click me</a></div>
<div data-url="http://example.com">Hello World <a href='#'>Click me</a></div>
Please note that my code example is based on ES6 syntax. If you need to support browsers that don't understand ES6, you either need a transpiler like Babel, or you need to re-write that code to ES5. Here's the same example in ES5:
// get a NodeList of all divs with the attribute data-url
var divs = document.querySelectorAll('div[data-url]');
// now use Array.prototype.forEach on the
// NodeList using Function.prototype.call()
Array.prototype.forEach.call(divs, function(div) {
div.addEventListener('click', function(event) {
switch (event.target.tagName) {
case 'A':
// do nothing
break;
default:
// do whatever you want to do on div click here
console.log(event.target.dataset.url);
// this would be
// location.href = event.target.dataset.url;
// in your application
}
});
})
<div data-url="https://connexo.de/defuse">Hello World <a href='#'>Click me</a></div>
<div data-url="http://example.com">Hello World <a href='#'>Click me</a></div>
If you need the container to act as a link as well as to contain another links, you can solve that with CSS.
<style>
.container { position: relative; }
.back-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.container p { position: relative; z-index: 1; }
</style>
<div class="container">
<a class="back-layer" href="http://example.com"></a>
<p>I am text with link.</p>
<p>I am another paragraph with link.</p>
</div>
.back-layer is "stretched" across relatively positioned .container. ps are assigned z-index: 1 to be placed on top of the .back-layer.
This approach does not need any javascript and might work better for you semantically, if your links are true links.
I would like to know how to implement a simple LinkedIn HopScotch.
I tried to implement, but was unsuccessful in getting it done.
Below is my attempted implementation;
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
]
};
$("#myBtn").click(function() {
hopscotch.startTour(tour);
});
</script>
Should I add a <div> with an id as hello-hopscotch as per tour object?
http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.
What am I doing wrong and how can I fix it?
Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.
You can configure the placement per the documentation.
As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".
I have an image and when its clicked I want to show some html ( a div with some text and buttons). I know I can use the html config in a window or panel but is it possible to show the element without it being encapsulated in a component?
Here is the code for the image and click handler:
{
xtype:"image",
src:"/blah/helpicon.png",
listeners:{
render: function (c) {
c.getEl().on('click', function(e) {
//show html here, targeted on image icon
}, c);
}
}
}
Here is the html I want to show. All it is really is a fancy tooltip, thats all. And since its a tooltip i dont want to encapsulate it in a window:
<div id="test" class="hopscotch-bubble-container" style="width: 280px; padding: 15px;"><span class="hopscotch-bubble-number">1</span>
<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>
<div class="hopscotch-content">Step 1 Instructions here.</div>
</div>
<div class="hopscotch-actions">
<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>
<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>
</div>
thanks.
How about making your own Component with your custom html?
Ext.define('mycomponent', {
extend: 'Ext.Component',
cls: 'hopscotch-bubble-container',
width: 280,
padding: 15,
id: 'test',
html: [
'<span class="hopscotch-bubble-number">1</span>',
'<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>',
'<div class="hopscotch-content">Step 1 Instructions here.</div>',
'</div>',
'<div class="hopscotch-actions">',
'<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>',
'<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>'
]
});
By default a component will use a div to render your element, so by applying the outer html attributes to the component (cls, width, padding, and id) it will generate the outer most div correctly. The inner html is just passed through the html config. Now you can manage your component without having to deal with the html elements directly.
Here is a fiddle with an overly simple example of adding the new component to a container.