I want to create a little login pop-up card at the middle of the page when the client presses the login button. I managed to create the card itself, a gave it .absolute z-10 to be at the top of the other contents. I also wrapped it inside a container div with .relative to be able to position the card. My problem is I can't position it to the middle. If I add for example .right-0 it works, but I want to position it in the middle and I couldn't find anything in the documentation about that... Also, how can I add more height to my card that 64?
My code:
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jófogás</title>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<!-- header section -->
<header class="bg-white flex">
<div class="w-3/6">
<img
class="h-12 m-4"
src="./logo_img/jofogas_logo_original.jpg"
alt="jofogas_logo_original"
/>
</div>
<div class="mx-6 my-6 w-3/6 text-right">
<button class="bg-orange-500 rounded py-2 px-4 text-white">
Belépés
</button>
</div>
</header>
<!-- login card -->
<div class="relative">
<div class="absolute z-10 items-center right-0">
<div
id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
<!-- search bar -->
<div class="bg-gray-200 rounded-lg mx-10 md:pt-10" id="search-container">
<div class="text-center text-4xl hidden md:block" id="main-text">
Hirdess vagy vásárolj a Jófogáson!
</div>
<div class="py-10 text-center">
<input
class="w-5/6 md:w-3/6 md:h-12"
id="search-bar"
type="text"
placeholder="Mit keresel?"
/>
<i class="fa fa-search icon"></i>
</div>
</div>
<div class="text-center">
<button
class="bg-green-500 rounded py-4 px-8 md:py-8 md:px-16 text-white text-xl md:text-2xl my-10"
>
Hirdetésfeladás
</button>
</div>
</body>
</html>
Try this:
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
...
</div>
You can use flexbox along with items-center and justify-center to perfectly fit center on the screen. For this you need to set the height and width to 100% to center with respect to entire screen. checkout if this works:
<!-- login card -->
<div class="fixed h-full w-full flex items-center justify-center bg-opacity-50 bg-gray-700">
<div class="z-10">
<div id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
See the sample output here.
Related
The carousel fades into the next slide when I click the next/previous buttons, even though I have added the 'slide' class.
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I want the slides to slide smoothly and not fade. Can you guys tell me if I'm doing something wrong or guide me through how I should be doing it
your code work and no problem and slide smoothly, try this strucktur in your html
<head>
<link href="your.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
</head>
<body>
//your html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
I am super new to vue js and I am trying to the switch toggle shown here: https://headlessui.dev/vue/switch
So here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<script src="https://kit.fontawesome.com/7de28896bc.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="http://coinbetix.test/css/app.css">
<!-- Scripts -->
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<!-- Page Content -->
<main>
<div class="py-12 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
<form action="http://mysite.test/deposit" method="post">
<div class="w-1/2 mx-auto">
<input type="hidden" name="_token" value="Izbs4W1YHkxWODGgop8J1cOqpDuH7W1N9VoBzK6z"> <input type="hidden" name="coin" value="ETH">
<label for="coin" class="block text-sm font-medium text-gray-700">Select Crypto</label>
<select class="block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" name="coin" aria-label="Default select example">
<option value="ETH"> Ethereum</option>
<option value="LTC"> Litecoin</option>
<option value="ADA"> Cardano</option>
</select>
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<button type="submit" class="btn btn-outline-primary w-100">Generate Deposit Address</button>
</div>
</form>
</div>
</main>
</div>
<script src="http://mysite.test/js/app.js" defer></script>
</body>
</html>
<script type="module" src="/js/app.js">
import { ref } from 'vue'
import { Switch } from '#headlessui/vue'
export default {
components: {
Switch,
},
setup() {
const agreed = ref(false)
return {
agreed,
}
},
}
</script>
What is not rendered at all is that part:
<div id="app">
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-teal-900' : 'bg-teal-700'"
class="relative inline-flex items-center h-6 rounded-full w-11"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block w-4 h-4 transform bg-white rounded-full"
/>
</Switch>
</template>
</div>
Any idea why it is not shown at all ?
Just replace your setup method with this code -
setup() {
const enabled = ref(false)
return {
enabled,
}
},
You used enabled in Switch component as v-model so you should replace your agreed variable with enabled.
Or you may use agreed in v-model instead of enabled.
I'm trying to add scrollbar to bootstrap modal body. But it add to entire content.How to add it to only to body.was using modals which had long content, and the modals automatically scrolled when a given max height was reached.
This is my code
<head>
<!-- Bootstrap CSS-->
<link href="/<s:text name="app.name"/>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
.modal-body {
max-height: calc(100vh - 212px);
overflow-y: auto;
}
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; margin-top: 60px; margin-bottom:30px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.Answers are welcome
Thank you
Just provide overflow hidden to the .modal class and provide overflow scroll to the modal body...
.modal .modal-content{
overflow:hidden;
}
.modal-body{
overflow-y:scroll; // to get scrollbar only for y axis
}
Hope it will help you :)
<head>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body,html{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.modal-dialog{
height:calc(100% - 60px);
}
.modal-content{
height:100%;
}
.modal-header{
height:50px;
}
.model-footer{
height:75px;
}
.modal-body {
height:calc(100% - 125px);
overflow-y: scroll; /*give auto it will take based in content */
}
</style>
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">Open model
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
https://getbootstrap.com/docs/4.5/components/modal/#exampleModalLongTitle
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
If you use Bootstrap, dont add some CSS, just use class "overflow-hidden" on the div with modal-content class.
How to set 3 images on bootstrap left, center and right on same line
I tried that:
<div class="row">
<img class="col-md-3 pull-right" src="images/right.png" alt="right">
<img class="col-md-3 center-block" src="images/center.png" alt="center">
<img class="col-md-3 pull-left" src="images/left.png" alt="left">
</di>
But the second image is not centered.
The right and left image, should be in the corner of the page.
Is it what you want to achieve?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/c69/fff/?text=left" class="img-responsive"></div>
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/9c6/fff/?text=center" class="img-responsive center-block"></div>
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/69c/fff/?text=right" class="img-responsive pull-right"></div>
</div>
</div>
You just need to give col-md-4 to each img check out the sample. Run the code snippet and open it in a full page to view properly.
or
Follow the link to view the sample: Sample Link
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="right">
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="center">
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="left">
I am having a problem here with the mobile display. I want the form input to show the input bar very large. It shows it fine on desktop any size window I make it. But the second I look at it on a mobile device if it is vertical the form input is no where near as large and you have to zoom to see it. But the second I turn the phone horizontal it shows it fine.
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
{{ form.url(placeholder=form.url.description, class="form-control input-lg") }}
</form>
</div>
</div>
</div>
After a while I was able to figure it out. This was missing in the header.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can make the input field take up the whole available width by using class col-xs-12.
<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-8 center-block">
<form action="{{url_for('check')}}" method="POST">
<input type="text" name="username" value="" class="form-control input-lg" />
</form>
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>