Input field unable to display text in w3.css - html

I'm trying to create a nav with search functionality. When I input text input field, nothing is displayed. Also how do I deactivate the hover effect? ...using w3.css framework. Thanksview image here
<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height: 49px; color: black">
<li>Hello</li>
<li class="w3-right" style="font-size: 90%">Log Out</li>
<li class="w3-right" style="font-size: 90%">Dashboard </li>
<li class="w3-right" style="font-size: 90%">Bookmarks</li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round" style="margin-left: 615px; margin-top: -30px; height: 30px">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div>
</ul>
</div>


I can't figure out why there is an ending </div> tag before </ul> remove it.
<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height: 49px; color: black">
<li>Hello</li>
<li class="w3-right" style="font-size: 90%">Log Out</li>
<li class="w3-right" style="font-size: 90%">Dashboard </li>
<li class="w3-right" style="font-size: 90%">Bookmarks</li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round" style="margin-left: 615px; margin-top: -30px; height: 30px">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div> <!--please remove this line -->
</ul>
</div>


<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height: 49px; color: black">
<li>Hello</li>
<li class="w3-right" style="font-size: 90%">Log Out</li>
<li class="w3-right" style="font-size: 90%">Dashboard </li>
<li class="w3-right" style="font-size: 90%">Bookmarks</li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div> <!--please remove this line -->
</ul>
</div>
This is because button layer is over input type layer. so you can't see anything typing. you need to remove all inline CSS for the button.
Hello
Log Out
Dashboard
Bookmarks
Search
-->
Please check this now. it's working in snippet

Related

Replace a Dropdown Menu with a textbox in a responsive template

I would like to replace a Dropodown Menu with a textbox in a search form.
The textbox must have the same size of the replaced Dropdown Menu.
Code of the form:
<form action="#">
<input type="text" class="form-control" placeholder="Type your key word">
<div class="dropdown category-dropdown">
<a data-toggle="dropdown" href="#"><span class="change-text">Job Location</span> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu category-change">
<li>Location 1</li>
<li>Location 2</li>
<li>Location 3</li>
</ul>
</div><!-- category-change -->
<button type="submit" class="btn btn-primary" value="Search">Search</button>
</form>
Style:
.category-dropdown {
background-color: #fff;
border-right: 1px solid #e6e6e6;
border-radius: 5px 0px 0px 5px;
min-width: 200px;
line-height: 45px;
text-align: left;
padding: 0 20px;
}
Anyway, here there is the link of the template:
https://demo.themeregion.com/jobs-updated/
Maybe it's a trivial question, but I'm new with the css technical since I'm a backend developer.

A simple way would be something like this, in place of <div class="dropdown category-dropdown">:
<input type="text" class="form-control category-textbox" placeholder="Type your key word">
Style:
.category-textbox{
width: 20%;
min-width: 20%;
}

Applying CSS to Struts in a JSP page

I'm trying to add css to my website but It just load half of the page and stop. Anyone have an idea about this problem? Thank you so much.
It stopped loading right before the confirm textfield, the whole page was loaded correctly.
Sorry if the code is hard to read. I'm new to coding.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>HVH's Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
html, body {
position: relative;
}
ul.navbar-hungdtq > li {
font-weight: bold;
text-align: center;
}
.navbar{
margin-bottom: 0;
}
.navbar-footer > li {
font-weight: bold;
text-align: center;
}
.login-form{
padding: 10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
div.swiper-slide > img {
width: 600px;
height: 800px;
}
.container-hungdtq{
background: white;
padding: 1%;
width: 100%;
height: 10vh;
}
.main-hungdtq{
background: white;
padding-top: 1%;
}
.mega-menu {
position: absolute;
padding: 10px 0px;
width: 110vh;
height: 82vh;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 20vh;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
li.mega-menu-column > ul > li > a{
color: #777;
}
li.mega-menu-column > ul {
display: inline-block;
}
li.mega-menu-column > ul > li {
font-size: 1.5vh;
}
.well{
padding: 8vh 0vh;
}
h4 {
font-size: 8vh;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce ;}
.tital{ font-size:16px; font-weight:500;}
.bot-border{ border-bottom:1px #f8f8f8 solid; margin:5px 0 5px 0}
</style>
<s:head/>
</head>
<body>
<!--Tool bar-->
<nav class="navbar navbar-default navbar-fixed-top main-hungdtq">
<div class="container-hungdtq">
<div class="col-md-1" >
<a class="navbar-brand" rel="home" href="#">
<img style="max-width: 100px; margin-top: -50px;" src="https://i.pinimg.com/736x/6f/55/e1/6f55e1ddd3d428846ab97062f9af3ad8--line-logo-design-logo-k.jpg">
</a>
</div>
<div class="col-md-1">
</div>
<div class="col-md-5">
<form action="SearchForBookAction">
<div class="input-group">
<input type="text" class="form-control" placeholder="Tìm kiếm" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<s:set var="username" value="%{#session.USERNAME}"/>
<s:set var="fail" value="%{#session.failed}"></s:set>
<ul class="nav navbar-nav col-md-4">
<s:if test="%{#username == null || #username == ''}">
<li class="col-md-3"><span class="glyphicon glyphicon-user"></span> Đăng ký</li>
<!--Login-->
<li class="col-md-3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>Đăng nhập</a>
<div class="dropdown-menu login-form" style="padding: 15px; padding-bottom: 0px;">
<form action="login" class="form-inline">
<div class="form-group">
<label>Username: </label>
<input class="form-control" type="text" placeholder="Enter username" name="username">
</div>
<div>
<label>Password: </label>
<input class="form-control" type="password" placeholder="Enter password" name="password">
</div>
<input type="submit" value="Đăng nhập" class="btn btn-success" style="margin-top: 5px; margin-bottom: 5px; margin-left: 25%">
</form>
<script>
<s:if test="%{#fail != null}">
alert("Wrong username or password!");
</s:if>
</script>
</div>
</li>
<!--End of Login-->
</s:if>
<s:if test="%{#username != null || #username == ''}">
<li class="col-md-4"><span class="glyphicon glyphicon-log-in">Welcome, <s:property value="#username"/></span></li>
<li class="col-md-4"><span claRedirectToProfileActionss="glyphicon glyphicon-log-in"></span> Tài khoản của tôi</li>
<li class="col-md-2"><span class="glyphicon glyphicon-shopping-cart"></span></li>
</s:if>
</ul>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-default">
<ul class="navbar-hungdtq nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">SÁCH BÁN CHẠY</li>
<li class="col-md-2">KHUYẾN MÃI HOT</li>
<li class="dropdown col-md-2">
<a class="dropdown" data-toggle="dropdown" href="#">KHO SÁCH<span class="caret"></span></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Khoa học kỹ thuật</li>
<li>Tin học</li>
<li>Y học</li>
<li>Điện - điện tử</li>
<li>Cơ khí</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Kinh tế</li>
<li>Quản trị - Lãnh đạo</li>
<li>Nhân vật - Bài học kinh doanh</li>
<li>Khởi nghiệp - Làm giàu</li>
<li>Marketing - Bán hàng</li>
<li>Tài chính - Ngân hàng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Thiếu nhi</li>
<li>Truyện tranh</li>
<li>Truyện đọc</li>
<li>Tô màu - Luyện chữ</li>
<li>Kiến thức bách khoa</li>
<li>Manga</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học trong nước</li>
<li>Phóng sự - Ký sự</li>
<li>Nhân vật văn học</li>
<li>Thơ ca</li>
<li>Tiểu thuyết lịch sử</li>
<li>Tiểu thuyết lãng mạng</li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Văn học nước ngoài</li>
<li>Cổ tích - Thần thoại</li>
<li>Truyện lịch sử</li>
<li>Truyện ngắn</li>
<li>Truyện trinh thám</li>
<li>Vụ án</li>
</ul>
</li>
</ul>
</li>
<li class="col-md-2">SỰ KIỆN SÁCH</li>
<li class="col-md-2">KHO SÁCH CŨ</li>
</ul>
</nav>
<!--End of Navigation bar-->
</nav>
<!--End of Tool bar-->
<!--Body-->
<div style="padding-top: 180px ">
<div class="container">
<s:form cssClass="well form-horizontal" action="register" method="get" id="contact_form" theme="simple">
<center><h4>REGISTER</h4></center>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Tên của bạn:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="name" placeholder="" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="username" placeholder="Tên tài khoản" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Mật khẩu:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="password" placeholder="" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Xác nhận:</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="confirm "placeholder=" mật khẩu của bạn" cssClass="form-control" type="password"/>
</div>
</div>
</div>
<!-- Pick -->
<div class="form-group">
<label class="col-md-4 control-label">Giới tính</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<s:combobox label="Hãy chọn giới tính của bạn" name="gender" cssClass="form-control selectpicker"
list="{'1':'Nam', '2':'Nu'}
"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<s:textfield name="email" placeholder="Địa chỉ E-Mail" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Địa chỉ</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield name="address" placeholder="Địa chỉ của bạn" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Số điện thoại</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<s:textfield name="phone" placeholder="(08)" cssClass="form-control" type="text"/>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<s:submit type="submit" cssClass="btn btn-warning" name="Đăng ký" /><span class="glyphicon glyphicon-send"></span>
</div>
</div>
</s:form>
</div>
</div>
<!--End of Body-->
<!--Footer-->
<footer class="footer">
<nav class="navbar navbar-default">
<ul class="navbar-footer nav navbar-nav row" style="width: 100%;">
<li class="col-md-1"></li>
<li class="col-md-2">VỀ CHÚNG TÔI</li>
<li class="col-md-2">LIÊN HỆ</li>
<li class="col-md-2">ĐỊA ĐIỂM</li>
<li class="col-md-2">ĐÓNG GÓP Ý KIẾN</li>
<li class="col-md-2">CHÍNH SÁCH</li>
</ul>
</nav>
</footer>
<!--End of Footer-->
</body>
This is the image of my website after being loaded

Dompdf not generating pdf properly

Below is my screenshots of html and pdf
my html contains divs and styles like below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Challan Form</title>
<style>
body{
background: #f2f2f2;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl;
font-size:14px;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.form-challan {
width: 96%;
margin: 0px auto;
background: #ccc;
padding:20px 0;
min-height: 500px;
}
ul{
list-style: none;
}
a{
text-decoration:none;
}
.form-challan ul.main{
display:flex;
justify-content: space-between;
}
.form-challan ul.main li#triplicate,
.form-challan ul.main li#duplicate,
.form-challan ul.main li#original {
width: 32.33%;
background: #fff;
min-height: 400px;
border: 2px solid;
padding:5px 0;
}
.form-challan ul li:after{
border-right: 1px dotted #000;
}
.rows {
width: 100%;
float: left;
}
.rows-tri{
width:96%;
}
.f-right{
float:right;
}
.f-left{
float:left;
}
.t-right{
text-align: right;
}
.t-left{
text-align:left;
}
.t-center{
text-align:center;
}
.gov-telangana{
font-weight:bold;
font-size:16px;
margin:0 0 5px 0;
}
input[type="text"] {
padding: 2px;
float: left;
width: 10%;
text-align: center;
border: 1px solid #000;
}
.rows-tri.f-right ul{
display:block;
}
.rows-tri.f-right ul li{
width:auto;
border:none;
min-height:inherit;
padding:0;
}
.e-cls{
float: left;
margin: 0 0 0 5px;
}
.cha-tre-num {
width: 98%;
float: right;
padding: 5px 0;
}
.cha-tre-num .challan-no {
width: 56%;
margin-left: 10px;
}
.hr-full{
width:100%;
border-bottom:2px solid #333;
float:left;
}
.major-head {
padding: 3px 0;
}
.pa3{
padding:3px 0;
}
.wid-mar{
width:98%;
margin:0px auto;
display: table;
}
.major-head.wid-mar ul li input {
width: 25%;
}
</style>
</head>
<body>
<div class="form-challan">
<ul class="main">
<li id="triplicate">
<div class="rows">
<div class="rows-tri f-left t-right">
<span class="e-cls">E</span>
<span class="tri-title">TRIPLICATE</span>
</div>
</div>
<div class="rows t-center">
<p class="gov-telangana">GOVERNMENT OF TELANGANA</p>
</div>
<div class="rows">
<div class="rows-tri f-right">
<ul class="f-left">
<li style="width:20%; float:left;"><span>DTO/STO</span></li>
<li style="width:25%; float:left;"><span>HYD</span></li>
<li style="width:54%; float:left;">
<span class="f-left">Treaury/PAO Code</span>
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
</li>
</ul>
</div>
</div>
<div class="rows">
<div class="cha-tre-num">
<span class="f-left">Treasury Challan No.</span>
<input type="text" class="challan-no f-left"/>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="major-head wid-mar">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" />
<input type="text" placeholder="5" />
<input type="text" placeholder="0" />
<input type="text" placeholder="2" />
</li>
<li style="width:35%; float:right;"><span>Other Deposits</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-major-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Sub - Major Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="minor-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left; margin-top: 5px;"><span>Minor Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>Defined Contributory Pension Scheme For Govt. Employess</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="group-sub-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Group Sub - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub1-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left; margin-top: 5px;"><span>Sub - Head</span></li>
<li style="width:25%; float:left; margin-top: 5px;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>AP State Govt EMployees Contributory Pension Scheme</span></li>
</ul>
</div>
</div>
<div class="rows">
<div class="detailed1-head wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Detailed - Head</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
<input type="text" placeholder="5" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size:12px;"><span>Employee Contribution</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-detailed wid-mar pa3">
<ul class="f-left">
<li style="width:30%; float:left;"><span>Sub - Detailed</span></li>
<li style="width:25%; float:left;">
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
</li>
<li style="width:40%; float:left; font-size: 14px; text-align: center;"><span>---</span></li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="sub-detailed wid-mar pa3">
<ul class="f-left" style="font-size:12px;">
<li style="width:20%; float:left;"><span>Non-Plan =N Plan=P</span></li>
<li style="width:22%; float:left; margin-right: 10px;">
<input type="text" placeholder="N" style="width:25%;" />
Charged = C Voted =V
</li>
<li style="width:22%; float:left;">
<input type="text" placeholder="V" style="width:25%;" />
Charged = C Voted =V
</li>
<li style="width:25%; float:left;">
<input type="text" placeholder="2" style="width:25%;" />
<input type="text" placeholder="0" style="width:25%;" />
<input type="text" placeholder="7" style="width:25%;" />
<input type="text" placeholder="1" style="width:25%;" />
</li>
</ul>
</div>
</div>
<div class="hr-full"></div>
<div class="rows">
<div class="amount-box">
<div class="wid-mar pa3">
</div>
</div>
</div>
</li>
<li id="duplicate"></li>
<li id="original"></li>
</ul>
</div>
<a class="hideforpdf" href="converted2.php?action=download" target="_blank">View PDF</a>
</body>
</html>
PHP code
<?php
require_once 'dompdf/autoload.inc.php';
// reference the Dompdf namespace
use Dompdf\Dompdf;
if (isset($_GET['action']) && $_GET['action'] == 'download') {
// instantiate and use the dompdf class
$dompdf = new Dompdf();
//to put other html file
$html = file_get_contents('challan-form.html');
//hide download pdf link in generated output pdf
$html .= '<style type="text/css">.hideforpdf { display: none; }</style>';
//load html
$dompdf->loadHtml($html);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('Legal', 'Landscape');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF (1 = download and 0 = preview)
$dompdf->stream("sample",array("Attachment"=>1));
}
?>
There will be three boxes in html.
What is the mistake here? Does dompdf doesnot support all styles? there is a css code saying display:flex, pdf is generating empty if it is there. If I remove that line attached pdf is generated. Please help

I just finished a page creating PDFs using dompdf, and among other things I realized that dompdf definitely doesn't support flexbox and has quite a few other limitations too. Also floated elements were a problem in many cases, so I ended up using all inline-block elements instead of floats, and also a few tables (and no flexbox at all). In fact I more or less had to rebuild the whole page, and I am afraid this is what you'll have to do, too...

don't use the flex and float property, use only display: table and display : table-cell property in your CSS file it will help you.

How to center social buttons in bootstrap login page?

I am using django-allauth, bootstrap, font awesome and bootstrap-social for the social media login buttons in my login form. I can't figure out how to center the social buttons within my login-well below. It appears to be aligning to the right of the login well instead of centered. What should I be doing?
jsfiddle
html:
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="well login-well">
<div class="socialaccount_ballot col-md-11">
<ul class="socialaccount_providers">
<li>
<a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+">
<i class="fa fa-google"></i>Log in with Google
</a>
</li>
<li>
<a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+">
<i class="fa fa-facebook"></i>Log in with Facebook
</a>
</li>
<li>
<a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+">
<i class="fa fa-twitter"></i>Log in with Twitter
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<hr>
<form class="login" method="POST" action="/login/">
<div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div>
<div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div>
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div>
<div class="form-group pull-center">
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</div>
</form>
<hr>
</div>
<div class="form-group">
<small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small>
<br>
<small><a class="text-muted" href="/signup/">Sign up</a></small>
</div>
</div>
</div>
</div>
</div>
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.socialaccount_providers li a.socialaccount_provider {
rem-border: 1px solid #ddd;
border-radius: 2px;
rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7);
-padding: 10px;
margin-bottom: 6px;
display: block;
width: 100%;
overflow: hidden;
rem-font-size: 1.2em;
}
.socialaccount_providers li a.socialaccount_provider:hover {
text-decoration: none;
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
}
.socialaccount_providers li a.socialaccount_provider.facebook {
background: #4B67A3;
color: #fff;
}
.socialaccount_providers li a.socialaccount_provider.facebook:before {
font-family: FontAwesome;
font-size: 1.9em;
content: "\f082";
display: inline-block;
padding-left: 8px;
padding-right: 8px;
}
What I want it to look like when social buttons are centered:

The ul.socialaccount_providers has a inexplicit padding-left = 40px;
Just throwing in .socialaccount_providers {padding-left:0;} fixes it.

Vertical scroll in IE8 on 1024 * 768 resolution

am developing page every thing working fine, I need it to be responsive almost every thing is working fine but vertical scroll coming in IE8 on 1024 * 768 resolution, How to sole that please help me
<div class="container">
<div class="header">
<div class="header-bg">
<div class="wrapper">
<a class="logo" title="Olympic Industrials Logo" href="#"></a>
<div class="menu-menu-container">
<ul class="menu" id="menu-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13" id="menu-item-13">Home</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156" id="menu-item-156">Catalogue</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-15" id="menu-item-15">Quote</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sibebar-menu-container">
<div class="mob-menu-link"><a id="moblink" href="#"></a></div>
<div class="inner-sidebar">
<ul class="quote_list">
<li>
<span class="quote_rightquote">“</span>
<p class="quote_sidepara1">Olympic Industrial, manufacturers of speacial maintenance tools and garage equipment, was establisg in 1978</p>
</li>
<li>
<p class="quote_sidepara2">Olympic proud to be appointed as the supplier to Daimler India for their commercial vehicles</p>
<span class="quote_sidepara2img"></span>
</li>
</ul>
</div>
<div class="footer">
<div class="wrapper-container">
<a class="develop" target="_blank" href="indiainternetready.com/"></a>
</div>
</div>
</div>
<div class="left-content">
<div class="breadcrum_products">
<p class="breadcrum_headertext">Request form</p>
</div>
<div class="content-area quote_content-area">
<div class="ctitle">Request for Quote</div>
<div class="ctxt">Fill out the below to request a quote on any tools and equipments. include information like part numbers of part descriptions. A sales representative is going to contact you with the quote.</div>
<div class="form">
<ul>
<li><div class="err" id="nameerr"></div><input type="text" onblur="namevalidation(this.value);if(this.value==''){this.value='Name*';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Name*'){this.value='';this.style.color='#7b7b7b';}" maxlength="50" value="Name*" id="name"></li>
<li><div class="err" id="emailerr"></div><input type="text" onblur="validateemail(this.value);if(this.value==''){this.value='Email*';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Email*'){this.value='';this.style.color='#7b7b7b';}" maxlength="75" value="Email*" id="email"></li>
</ul>
<ul>
<li><div class="err" id="comperr"></div><input type="text" onblur="compvalidation(this.value);if(this.value==''){this.value='Company Name*';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Company Name*'){this.value='';this.style.color='#7b7b7b';}" maxlength="75" value="Company Name*" id="compname"></li>
<li><div class="err" id="countryerr"></div>
<select id="country"><option style="color:#AEAEAE" value="-- Select Country --">-- Select Country --</option><option value="India">India</option><option value="Egypt">Egypt</option><option value="South Africa">South Africa</option><option value="Dubai">Dubai</option><option value="West Indies">West Indies</option><option value="Vietnam">Vietnam</option><option value="Sri Lanka">Sri Lanka</option></select>
</li>
</ul>
<ul>
<li><div class="err" id="mobnumerr"></div><input type="text" onblur="mobnumvalidation(this.value);if(this.value==''){this.value='Mobile Number*';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Mobile Number*'){this.value='';this.style.color='#7b7b7b';}" maxlength="10" value="Mobile Number*" id="mobnum"></li>
<li><div class="err" id="faxerr"></div><input type="text" onblur="faxvalidation(this.value);if(this.value==''){this.value='Fax Number';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Fax Number'){this.value='';this.style.color='#7b7b7b';}" maxlength="20" value="Fax Number" id="fax"></li>
</ul>
<div class="formtextarea">
<span class="pls">Please utilize this space to provide us with as much information you may have concerning your Request for Quote:</span>
<div class="err" id="msgerr"></div>
<textarea onblur="messagevalidation(this.value);if(this.value==''){this.value='Type your message*';this.style.color='#AEAEAE';}" onfocus="if(this.value=='Type your message*'){this.value='';this.style.color='#7b7b7b';}" id="comment">Type your message*</textarea>
</div>
<div class="checkboxarea">
<div class="quote_email">
<input type="checkbox" id="newsletter"> <span>Send me email news and updates from Olympic Industries.</span>
</div>
<div class="quote_sendbtn">
<a title="Send Quote" id="subid" href="javascript:postform()"></a>
</div>
</div>
<div id="succ-msgid"></div>
</div>
</div>
</div>
//css
.header {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
height: 81px;
left: 0;
padding: 0 0 3px;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.sibebar-menu-container {
background-color: #1F1F1F;
height: 100%;
position: fixed;
top: 0;
width: 242px;
z-index: 9999;
}
.left-content {
background-color: #F5F5F5;
margin: 0 auto 0 242px;
padding-top: 62px;
width: 83%;
}

you can add to css body{margin:0; padding:0}
and remove width: 83%; from .left-content