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>
Related
I'm trying to get rid of the white margin/gutter in the popover, so that the yellow buttons span the entire width of the popover. How can I achieve this?
Code:
<button type="button" data-html="true" class="btn btn-secondary btn-sm btn mr-1 "
data-trigger="focus" data-container="body" data-toggle="popover" data-placement="bottom"
data-content= '<div style="display: none">
<ul class="list-group custom-popover ml-0 px-0">
<li class="list-group-item">Profile</li>
<li class="list-group-item">Logout</li>
</ul>
</div>'>
<?php echo 'popover menu'?></button>
To change styles of the popover you can use just CSS. The solution to your problem is just adding this to your custom css file.
.popover-body{
padding: 0px;
}
If you'll like to know all the styles that go into play when boostrap cretes the popover you can check them on the file named: _popover.scss in the folder you downloaded from boostrap.
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! :)
I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example
How can I make a layout shown in this image
I could have done it easily with grid system but I want the first post's description off the grid system or below the both column. However, for mobile devices I want it to appear with the image or in the same grid like the image below
I don't expect you can do this with Bootstrap's CSS only cause the order of your elements change from desktop to mobile.
Try this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12" style="background-color:red;">1</div>
<div class="rightblock col-md-6 col-xs-12">
<div class="row">
<div class="col-xs-12" style="background-color:lightgreen;">3</div>
<div class="col-xs-12" style="background-color:lightyellow;">4</div>
</div>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-12 col-xs-12 lefttext" style="background-color:lightblue;">2</div>
</div>
</div>
Where 2 = the caption of your first item (1) and 3 and 4 are your second and third item.
For the mobile version use javascript to swap 2 (.lefttext) and the 3/4 block (.rightblock):
$(window).resize(function () {
if ($(window).width() < 992) {
$(".rightblock").insertAfter($(".lefttext"));
}
});
Demo: http://bootply.com/94560
Note 1: $(window).resize only will called on a real resize (from big to small) and not when opening the small screen direct. See here for better solution to react on screen size changes: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Note 2: see http://getbootstrap.com/css/#grid-responsive-resets for explanation of the clearfix