I am developing a form using Html and CSS. I have used grid to place my textboxes. But the problem I am facing is position of submit button. It is placed next to last textbox but I want it to be placed on the separate line at the end.
The complete code of my this form is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form practice</title>
<style>
.container{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
.wrapper > *{
padding: 1em;
}
.form-heading{
background-color: grey;
}
.form-heading h3{
text-align: center;
}
.contact form{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.contact form label{
display: block;
}
.contact form p{
margin: 0;
}
.contact form .submit-btn{
grid-column: 25%;
}
.contact form button, .conntact form input{
width: 100%;
padding: 1em;
border: 1px solid;
}
.contact input[type=text]{
height: 30px;
width: 90%;
}
.contact form button{
background-color: grey;
color: white;
border: 0;
text-transform: uppercase;
}
.contact form button:hover, .contact form button:focus{
background-color: silver;
color: black;
outline: 0;
/*transition: background-color 1s ease-out; */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="form-heading">
<h3>Form</h3>
</div>
<div class="contact">
<form>
<p>
<label>First Name</label>
<input type="text" name="firstName">
</p>
<p>
<label>Last Name</label>
<input type="text" name="lastName">
</p>
<p>
<label>Email Address</label>
<input type="text" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="submit-btn">
<button>Submit</button>
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Please help me in this regard. Thank you for your help.
This does the trick in your case.
.submit-btn {
grid-row-start: 3;
grid-column-start: 3;
grid-column-end: 3;
}
But a few suggestions:
Change your <p> with <div>. <p> is for paragraphs of text.
Don't use grid for displaying a grid. It's very unflexible and makes stuff hard to read. Use display: flex instead. If you want to see a sample on how to use flex to display a grid you might wanna check out the Bootstrap grid system. (Basic grid and implementation for form. Actual Bootstrap CSS)
There is no real reason to invent your own grid system at all. Bootstrap's Grid system is just one of many already working grids. :)
You Should Follow This Grid Layout Documentatoin for manage form element into specific position.
Related
I am trying to iterate over the colors array of alpine's x-data and inside every button trying to get and then set the color value via livewire's underlying alpine object $wire's $wire.set method.
However it gives me error that $wire is not defined in any place whether it is inside #click or if function like setColor is defined and then I access $wire over there.
button {
padding: 0;
background: none;
border: none;
}
button span {
display: inline-block;
width: 15px;
border-radius: 10px;
margin: 4px;
height: 15px;
}
<script src="https://unpkg.com/alpinejs#3.10.3/dist/cdn.min.js"></script>
<div class="space-x-2 mb-2" x-data="{
colors:['#800000','#e50000','#ff4081',
'#ff7fab','#f900ea','#ea80fc',
'#bf55ec','#9b59b6','#7c4dff',
'#0231e8','#81b1ff','#3397dd',
'#3082b7','#04a9f4','#02bcd4',
'#1bbc9c','#2ecd6f', '#f9d900',
'#af7e2e','#ff7800','#e65100',
'#b5bcc2','#667684'],
setColor(value) {
$wire.set('status.color', value)
}
}">
<!-- Also $wire not working inside #click directly -->
<template x-for="(color,index) in colors">
<button #click="setColor(color)" class="btn p-0 shadow-none" type="button" #click="setColor(color)">
<span :style="{'background-color': color}">
</span>
</button>
</template>
</div>
Below I have provided a minimum working example of my Flask app that uses dataTable.JS to modify an existing HTML table. In cross-comparing with current examples online, I think this is due to required libraries not being loaded properly and/or that it cannot find the data.
Guidance is greatly appreciated!
HTML (base.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.css"/>
</head>
<body>
<header>
<div class="container">
<h1 class="logo"></h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>Entity Map</li>
</ul>
</nav></strong>
<div class = "logoimg">
<img src="{{ url_for('static',filename='images/GENERIC_PDE_PageCard.png') }}" width="10%">
</div>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
HTML(home.html)
{% extends "base.html" %}
{% block content %}
<div class = "home">
<h3>OCFY Entity Database</h3>
<h4>Purpose</h4>
<p>Purpose This application is designed for performing custom queries to a database containing information about private and non-public entities who are serving school-aged children and youth in the Commonwealth of Pennsylvania. Sites in this database include private or non-public licensed schools, as well as non-public entities such as residential and juvenile justice institutions.</p>
<h4>How to Search</h4>
<p>The database provides information at the site-level, as well as by several higher-order aggregates, including region, county, city, type of service, PDE Educational Entity and DHS Entity.
Use the drop-down filters within to perform a custom query that automatically displays in the table on the next tab. Selecting one or more values fromm the filters will automatically remove irrelevant values from the rest of the filters. You can also use the filters in any order. They will still show only relevant options.
The search function at the top right of the table accepts words and/or whole numbers. The search function looks across all columns for all entities in the database and displays every entity with a column containing the number and/or word that was typed.
Use the first drop down box to select multiple fields from the database. Your choices will be displayed automatically in the table. The application defaults to showing several key fields. Use backspace within the search box to remove fields from the table.</p>
</div>
<br>
<div class = "homecontent">
<div class = "sidebar">
<h4>Select Fields from Database</h4>
</div>
<div class = "tablecontainer">
<table id="entity_table" class="table table-striped">
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</table>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#entity_table').dataTable();
});
</script>
{% endblock %}
CSS (main.css)
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
/*
* Formatting the header area
*/
header {
box-shadow: 3px 5px 3px #d0d1d3; /* offset x, offset y, blur radius */
background-color: #002060;
height: 90px;
width: 100%;
opacity: .9;
margin-bottom: 5px;
}
div.container {
scroll-behavior: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
div.logoimg{
display: flex;
justify-content: left;
align-items: center;
}
/*
* Formatting the container contents
*/
.container {
width: 1200px;
margin: 0 auto;
}
div.homecontent{
width: 1200px;
}
div.tablecontainer {
float: right;
width: 850px;
background-color: #ffffff;
}
div.sidebar {
float: left;
box-shadow: 3px 5px 3px #d0d1d3;
text-align: center;
width: 300px;
height: 500px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.home {
box-shadow: 3px 5px 3px #d0d1d3;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
div.map {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #F3F4F5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 30px;
text-align: center;
letter-spacing: -1px;
color: #999;
}
.menu {
float: right;
margin-top: 8px;
}
.menu li {
display: inline;
}
.menu li + li {
margin-left: 35px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
App:
from flask import Flask, render_template
ocyf = Flask(__name__)
#ocyf.route('/')
def home():
return render_template("home.html")
#ocyf.route('/map/')
def map():
return render_template("map.html")
if __name__ == '__main__':
ocyf.run(debug=True)
You must use thead and tbody tags on your table.
<table id="entity_table" class="table table-striped">
<thead>
<tr>
<th>DHS Entity Name</th>
<th>DHS Legal Name</th>
<th>Full Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</tbody>
</table>
I fight with printing pdf from QTextDocument object with html format. I generate QString formatted code of html page and it works fine. To test it i make using QFile a html file which have to be printed and it look greats.
But pdf file looks completly different and i don't know why.
Code:
QString html = getHtmlPrintString(FVToPrint, currentCustomer);
QTextDocument document;
document.setHtml(html);
QFile qHtmlFile("D:\\Qt\\projects\\FVGeneratorV2\\fv\\"+QString::fromStdString(FVToPrint.getFVId()) +".html");
if(qHtmlFile.open(QIODevice::WriteOnly))
{
qHtmlFile.write(html.toUtf8());
qHtmlFile.close();
}
QPrinter printer(QPrinter::PrinterResolution);
printer.setOutputFormat(QPrinter::PdfFormat);
printer.setPageSize(QPageSize::A4);
QString fvname = "D:\\Qt\\projects\\FVGeneratorV2\\fv\\" + QString::fromStdString(FVToPrint.getFVId()) + ".pdf";
printer.setOutputFileName(fvname);
printer.setPageMargins(QMarginsF(15, 15, 15, 15));
document.print(&printer);
Html file code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type='text/css'>table, tr, td{border: solid 1px black; border-collapse:collapse;}</style>
</head>
<body>
<div style='width:100%; height:100%; margin:0; padding: 0;'>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-left:2%; padding:2%; height:5%;'>
<h2><b>FV_24.01.2022_666_1_480</h2></b>
</div>
<div style='float:left; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:5%;'>
24.01.2022
</div>
<div style='clear:both;'></div>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-top:1%; margin-left:2%; padding:2%; height:15%;'>
kunito</br> Nip: 8712314</br> Phone: 9123412</br> Email: mail#com</br>miejska 12</br>47821 krakow, Polska</br>
</div>
<div style='float:left; margin-top:1%; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:15%;'>
Customer: </br> Name: test </br> Nip: 12398401</br>miejska 27</br>81293 Krakow, Polska</br>
</div>
<div style='clear:both;'></div>
<div style=' margin: 1% 2% 0 2%; padding:2%; border: solid 2px black; width:90.5%; height:10%;'> Payment data: </br>online transfer</br> Account number: 8912384</br> Title: FV_24.01.2022_666_1_480
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:30%;'>
<table style='width:100%;'><tr style='background-color:darkgray;' ><td>Nb.</td><td>Name</td><td>Um</td><td>Quantity</td><td>Price netto</td><td>Vat</td><td>Vat value</td><td>Price brutto</td></tr><tr><td>1</td><td>Bulka</td><td>pcs</td><td>1</td><td>1.012</td><td>8</td><td>0.088</td><td>1.1</td></tr><tr style='background-color:darkgray;' ><td colspan='5'></td><td>Netto sum</td><td>Vat sum</td><td>Sum</td></tr><tr><td colspan='5'></td><td>1.012</td><td>0.088</td><td>1.1</td></tr>
</table>
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
To pay: 1.1 zl </br> Payed: 1.1 zl
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
<div style='float:left; width: 20%; height:100%; '>
<p align='center'>............................</br>podpis pracownika</p>
</div>
<div style='float:left; width: 20%; height:100%; margin-left:50%; '>
<p align='center'>............................</br>podpis klienta</p>
</div>
</div>
</div>
</body>
</html>
How to pdf look:
pdf printed file
I recently created a new navigation bar using bootstrap. Please note that I am VERY NEW - a novice to bootstrap. When clicking on the links within the navigation bar, the links open a new window. I want the links to open within the same window.
I read somewhere that it may be individual computer settings and I changed my setting in the control panel to ensure that it is checked to "open in current window" but this doesn't seem to work. I also tried adding target=_"self" in the links as well but that seems to break the link altogether.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company Page Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container-fluid {
padding: 60px 50px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #d3d3d3a4;
}
.carousel-indicators li {
border-color: #006272;
text-align: right;
float: center;
right: 2% !important;
left: inherit;;
}
.carousel-indicators li.active {
background-color: #d3d3d3a4;
}
.navbar {
margin-bottom: 0;
background-color: #006272;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #006272 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>PAY</li>
<li>BENEFITS</li>
<li>POLICIES</li>
<li>TA/TM</li>
<li>MANAGER'S TOOLKIT</li>
<li>HR TEAM</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I don't see anything in the code that suggests it should open in a new window so it might be a browser setting. That said, you have a slight error in your syntax.
This will open in a new window:
Link Text
This will open in the same window:
Link Text
Note that the _ is inside the quotes.
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}