I need side bar in laravel jetstream inertia vue
enter image description here
<script setup>
import { ref } from 'vue';
import { Inertia } from '#inertiajs/inertia';
import { Head, Link } from '#inertiajs/inertia-vue3';
import ApplicationMark from '#/Components/ApplicationMark.vue';
import Banner from '#/Components/Banner.vue';
import Dropdown from '#/Components/Dropdown.vue';
import DropdownLink from '#/Components/DropdownLink.vue';
import NavLink from '#/Components/NavLink.vue';
import ResponsiveNavLink from '#/Components/ResponsiveNavLink.vue';
defineProps({
title: String,
});
const showingNavigationDropdown = ref(false);
const switchToTeam = (team) => {
Inertia.put(route('current-team.update'), {
team_id: team.id,
}, {
preserveState: false,
});
};
const logout = () => {
Inertia.post(route('logout'));
};
</script>
<template>
<div>
<Head :title="title" />
<Banner />
<div class="min-h-screen bg-gray-100">
<nav class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<Link :href="route('dashboard')">
<ApplicationMark class="block h-9 w-auto" />
</Link>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</NavLink>
</div>
</div>
<div class="hidden sm:flex sm:items-center sm:ml-6">
<div class="ml-3 relative">
<!-- Teams Dropdown -->
<Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
{{ $page.props.user.current_team.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
</svg>
</button>
</span>
</template>
<template #content>
<div class="w-60">
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<DropdownLink :href="route('teams.show', $page.props.user.current_team)">
Team Settings
</DropdownLink>
<DropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
Create New Team
</DropdownLink>
<div class="border-t border-gray-100" />
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form #submit.prevent="switchToTeam(team)">
<DropdownLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
</div>
</DropdownLink>
</form>
</template>
</template>
</div>
</template>
</Dropdown>
</div>
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<Dropdown align="right" width="48">
<template #trigger>
<button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
<img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
</button>
<span v-else class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
{{ $page.props.user.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</button>
</span>
</template>
<template #content>
<!-- Account Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Account
</div>
<DropdownLink :href="route('profile.show')">
Profile
</DropdownLink>
<DropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
API Tokens
</DropdownLink>
<div class="border-t border-gray-100" />
<!-- Authentication -->
<form #submit.prevent="logout">
<DropdownLink as="button">
Log Out
</DropdownLink>
</form>
</template>
</Dropdown>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" #click="showingNavigationDropdown = ! showingNavigationDropdown">
<svg
class="h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
:class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
<path
:class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</ResponsiveNavLink>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="flex items-center px-4">
<div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
<img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
</div>
<div>
<div class="font-medium text-base text-gray-800">
{{ $page.props.user.name }}
</div>
<div class="font-medium text-sm text-gray-500">
{{ $page.props.user.email }}
</div>
</div>
</div>
<div class="mt-3 space-y-1">
<ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
Profile
</ResponsiveNavLink>
<ResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')">
API Tokens
</ResponsiveNavLink>
<!-- Authentication -->
<form method="POST" #submit.prevent="logout">
<ResponsiveNavLink as="button">
Log Out
</ResponsiveNavLink>
</form>
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="border-t border-gray-200" />
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
Team Settings
</ResponsiveNavLink>
<ResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')">
Create New Team
</ResponsiveNavLink>
<div class="border-t border-gray-200" />
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form #submit.prevent="switchToTeam(team)">
<ResponsiveNavLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
</div>
</ResponsiveNavLink>
</form>
</template>
</template>
</div>
</div>
</div>
</nav>
<!-- Page Heading -->
<header v-if="$slots.header" class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<slot name="header" />
</div>
</header>
<!-- Page Content -->
<main>
<slot />
</main>
</div>
</div>
</template>
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
Related
I use accordion component for FAQs from tailwind ui. It's looks like something like this:
<!-- Q1 -->
<div class="pt-6">
<dt class="text-lg">
<!-- Expand/collapse question button -->
<button type="button" class="text-left w-full flex justify-between items-start text-gray-400"
aria-controls="faq-0" aria-expanded="false">
<span class="font-medium text-gray-900"> What's the best thing about Switzerland? </span>
<span class="ml-6 h-7 flex items-center">
<!--
Expand/collapse icon, toggle classes based on question open state.
Heroicon name: outline/chevron-down
Open: "-rotate-180", Closed: "rotate-0"
-->
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base text-gray-500">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
In this case when I run this code in Vite App accordion status is open by default. How can set status closed by default?
I have tried some cases here, but still not working on my code above.
Im sitting from 3 hours and cant still figure out what is wrong. Im kind of new in programming, but on back end. I pasted from tailwind component navbar and dropdown is automatically opened. I tried so many things, or I dont get how to make them or I dont know... Tried also alpinejs, but not working or im doing something wrong. [I added picture here to show this dropdown which is not closing and is opened always no matter what. Im trying to fix this using blades on Laravel.
<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0 flex items-center">
<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
<img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
Dashboard
Team
Projects
Calendar
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: outline/bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
Dashboard
Team
Projects
Calendar
</div>
</div>
</nav>
Picture of the problem
Tailwind UI doesn't provide the necessary scripts. You have to write the JS yourself. Easiest way:
Add Alpine.js
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.2/dist/alpine.min.js" defer></script>
Make "Profile Dropdown" an alpine component
<!-- Profile dropdown -->
<div x-data="{show: false}" x-on:click.away="show = false" class="ml-3 relative">
Add a click event to the Profile Button
<button x-on:click="show = !show" type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">...
Snippet (I just made the desktop version work.. So open in full page)
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.2/dist/alpine.min.js"></script>
<!-- This example requires Tailwind CSS v2.0+ -->
<div>
<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
Dashboard
Team
Projects
Calendar
Reports
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: outline/bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div x-data="{show: false}" x-on:click.away="show = false" class="ml-3 relative">
<div>
<button x-on:click="show = !show" type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div x-show="show" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!--
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
Dashboard
Team
Projects
Calendar
Reports
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
<button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: outline/bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<!-- Replace with your content -->
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
</div>
<!-- /End replace -->
</div>
</main>
</div>
How to use image-map on jssor. its not working, the link disappears. I have tried the given code.
<div id="jssor_4" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;">
<div>
<img data-u="image" src="/images/banner-animasi1.jpg" usemap="#image-map1" style="width:100%" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb108" style="position:absolute;bottom:0px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
</div>
<map name="image-map1">
<area target="_self" alt="Tentang kami" title="Tentang kami" href="/about" coords="2666,758,3540,922" shape="rect">
</map>
Any suggestion or help will be appreciated. Thanks
I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page
I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/
Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>