Good day. I have the following dialog that whenever i add anything inside it's component an horizontal scrollbar shows up and the right of my dialog suddenly has a space on it's right side. like in reference pic
This right here all the code i have:
My view:
<template>
<v-main>
<v-dialog
v-model="dialog"
>
<v-card background-color="white">
<div>
<myComponent/>
</div>
</v-card>
</v-dialog>
<v-container>
// rest of my code
</v-container>
</main>
</template>
My Component:
<template>
<v-main>
<v-row align='center' justify="center">
<v-col class="d-flex justify-center" cols="5">
hello
</v-col>
</v-row>
</v-main>
</template>
Why does this happen exactly. Every page i has scooped styles and most of them don't even have any css applied to it. When i remove the "hello" together with the v-col tags the dialog goes back to normal like so:
Add style="overflow-x: hidden;" to your div that is wrapped around <myComponent/>
Related
I have this navbar that I would like to close already in lg or xl size and not in md size. I would like to understand how with alpine js:
<div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<div x-data="{ sidebarOpen: false }" class="flex h-screen bg-gray-200">
<div :class="sidebarOpen ? 'block' : 'hidden'" #click="sidebarOpen = false" class="fixed z-20 inset-0 bg-black opacity-50 transition-opacity lg:hidden"></div>
<div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300 transform bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0">
I did not understand how to close this sidebar already in xl size with alpine js and tailwind
Below is the link for the entire code:
https://tailwindcomponents.com/component/dashboard-template
i didn't quite understand how to use sidebar Open
From my understanding, you are trying to make the sidebar open and close. You can create the div for the sidebar and the div for the button that will be used to toggle.
You can use x-show="sidebarOpen = true" on the div that you want to show up when the sidebar is enabled.
Doing #click="sidebarOpen !sidebarOpen" will toggle the inverse state. So you can click the same button to show the sidebar, and close it.
<div x-data="{ sidebarOpen: false }" class="flex h-screen bg-gray-200">
{{-- This is sidebar button --}}
<div #click="sidebarOpen !sidebarOpen" class=" fixed z-20 inset-0 bg-black opacity-50 transition-opacity"></div>
{{-- This Is Sidebar Content --}}
<div x-show="sidebarOpen = true" class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300 transform bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0">
</div>
</div>
I'm trying to center a <v-btn> into a <v-flex>. Since <v-flex> is a flexbox div, I use justify-center that is transformed into
justify-content: center
Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem.
https://codepen.io/anon/pen/ZXLzex
I want to signup the button to be centered inside the div (v-flex).
Here is the full code:
<v-card>
<v-card-text >
<v-text-field label="Email"></v-text-field>
<v-text-field label="Password"></v-text-field>
</v-card-text>
<v-card-actions>
<v-layout row>
<v-flex justify-center>
<v-btn primary>
Signup
</v-btn>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
wrap button inside <div class="text-xs-center">
<div class="text-xs-center">
<v-btn primary>
Signup
</v-btn>
</div>
Dev uses it in his examples.
For centering buttons in v-card-actions we can add class="justify-center" (note in v2 class is text-center (so without xs):
<v-card-actions class="justify-center">
<v-btn>
Signup
</v-btn>
</v-card-actions>
Codepen
For more examples with regards to centering see here
<v-layout justify-center>
<v-card-actions>
<v-btn primary>
<span>SignUp</span>
</v-btn>
</v-card-actions>
</v-layout>
It works for me using the v-layout in the following way:
<v-layout justify-center>
<div class="text-center ma-5">
<v-card-actions>
<v-btn primary>
<span>LogIn</span>
</v-btn>
</v-card-actions>
</div>
</v-layout>
vuetify's v-layout allows you to modify all the elements inside the layout.
v-flex does not have a display flex!
Inspect v-flex in your browser and you will find out it is just a simple block div.
So, you should override it with display: flex in your HTML or CSS to make it work with justify-content.
I've recently updated polymer and components, and a weird thing appears.
I have paper-dialog element, and inside, on the left a paper-menu item with multiple paper-item. On the right, a simple div with some content.
When clicking on a paper-item, the content of the div will change.
Since the update, when clicking on a paper-item element, the dialog will automatically close.
After searching, it appears that if I remove the paper-menu element and only left the multiple paper-item, the problem will no longer occurs.
After looking inside the iron-menu-behavior, I found a new function (an override of _activateHandler), which, when commented, will kept previous functionning without closing the dialog.
I keep searching to find any solution, but anyone encountered the same problem?
For information :
<paper-dialog id="dialog" with-backdrop>
<div id="content"></div>
</paper-dialog>
And inside my div is added this :
<div class="content">
<div class="list">
<paper-menu>
<template is="dom-repeat" items="{{menu}}">
<paper-item on-click="_onCategorySelection">
<iron-icon icon="{{item.icon}}" class="icon"></iron-icon>
<span class="text">{{item.text}}</span>
</paper-item>
</template>
</paper-menu>
</div>
<div id="listContent">
<div class="noContent" hidden$="{{content}}">
<div class="noContentText">Pas de catégorie séléctionnée</div>
</div>
<template is="dom-if" if="{{content}}">
<div class="withContent">
<template is="dom-repeat" items="{{content}}" as="widget">
<badge data="{{widget}}" on-click="_onWidgetSelect"></badge>
</template>
</div>
</template>
</div>
</div>
Thanks a lot
Okay, looking at the problem, is seems to be a known issue: https://github.com/PolymerElements/iron-menu-behavior/issues/40
I'll point your JSBIN too there!
EDIT: it is yours! :)
Polymer provides access to elements by id via this.$['foo']. However, I find that I am unable to access elements by id that are in nested templates.
<template>
<div id="foo"></div>
<template>
<div id="bar"></div>
</template>
</template>
In this situation this.$.foo works but this.$.bar does not. Are you able to access elements inside of a nested template by id and if so how?
In my code I'm using a conditional template to include some html if a attribute is true. I was providing this functionality in javascript by editing the html but think that conditional templates more clearly show what is going on and I would prefer to use this method.
Using this.$.<id> syntax does work with inner templates. The problem in your example is that the inner <template> is inert, and it isn't rendered. I've rewritten your example so that the inner <template> is rendered, and you can see that the this.$.<id> syntax works for both the outer and inner <template>s:
<polymer-element name="my-element">
<template>
<div id="foo">
<p>Old foo</p>
<template if="{{showBar}}">
<div id="bar">
<p>Old bar</p>
</div>
</template>
</div>
<button on-tap="{{changeContent}}">Change Content</button>
</template>
<script>
Polymer({
showBar: true,
changeContent: function() {
this.$.foo.querySelector('p').textContent = 'New foo';
this.$.bar.querySelector('p').textContent = 'New bar';
}
});
</script>
</polymer-element>
Pressing the "Change Content" button finds the #foo and #bar <div>s and updates the text of the contained <p>s.
You can try out the answer at http://jsbin.com/roceta/edit.
I want to do a twitter-bootstrap layout that have one sidebar on the left and the rest of the screen should be a dynamic.
Something like this:
http://wbpreview.com/previews/WB042R743/
or this:
http://wbpreview.com/previews/WB001365H/main.html
(if it asks for login: enter demo:demo)
Can somebody help me?
if you take a look into the dom of the second link you'll see:
<section class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span10"></div>
the fluid classes set the width at 100% of viewport.
look into the docs of twitter bootstrap
edit
in html:
<div class="span10 content">
in css:
.container-fluid span10.content { margin-left: 0; }
but remember with fluid grids twitter bootstrap defines all margins with percentage values for all spans
.row-fluid [class*="span"]