I have a bootstrap card that is adding chat bubbles to a list group. I want to align the content to the right so the bubble isn't just in the middle. I tried using align=right and wrapping that div tag in:
$("#messages").append($("<div align=right><div class=bubble-r><li></div></div><br />").text(msg));
but that didn't work. What am I missing?
$("#messages").append(
$("<div class=bubble-r><li></div><br />").text(msg)
);
} else {
$("#messages").append(
$("<div class=bubble><li></div> <br />").text(msg)
);
}
});
}
render() {
return (
<ul id="messages">
<div />
</ul>
);
}
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have this code Codepen to modify a working mp3 player, it works fine everywhere, even in small windows in desktop. but the buttons wouldn't show up in mobile phones. I figured out it was because of the Mediaelementplayer that I'm using, but could not solve the problem. Thanks If you would fork that pen and show me a better way to do it.
var audio = {
init: function() {
var $that = this;
$(function() {
$that.components.media();
});
},
components: {
media: function(target) {
var media = $('audio.fc-media', (target !== undefined) ? target : 'body');
if (media.length) {
media.mediaelementplayer({
audioHeight: 40,
features : ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
alwaysShowControls : true,
timeAndDurationSeparator: '<span></span>',
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
},
},
};
audio.init();
*:focus{
outline: none;
}
html {
background: #f2f2f2;
height:100%;
}
body {
margin: 0;
font-family: "Raleway",sans-serif;
height:100%;
}
h1 {
margin: 0;
font-size: 33px;
color: #fff;
padding: 0 10%;
}
h3 {
margin: 0;
font-size: 17px;
font-weight: 500;
color: #ccc;
padding: 0 10%;
}
.container {
display: block;
width: 100%;
height: 750px;
margin: auto;
overflow: hidden;
background-repeat: repeat;
background-size: cover;
}
.music-player {
display: block;
position: relative;
width: 400px;
height: 570px;
margin: auto;
margin-top: auto;
border-radius: 0 0 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ font-family:"Times New Roman", Times, serif;
font-size:39px;
text-align:center;
width:100%;
margin: auto;
margin-top: auto;
color:#ccc;
width:400px;
background:#090b1f;
box-shadow: 1px 10px 20px 5px #222;
border-radius: 10px 10px 0 0;
`
}
.cover {
float: left;
width: 100%;
height: 66%;
}
.cover img {
display: block;
position: absolute;
top: 8%;
left: 14%;
width: 70%;
margin: auto;
text-align: center;
}
.titre {
float: left;
width: 100%;
}
.lecteur {
width: 100%;
display: block;
height: auto;
position: relative;
float: left;
}
.mejs__button>button:focus {
outline: 0px dotted #999;
}
.mejs__container {
position: relative;
background-color: transparent;
min-width: auto !important;
}
.mejs__controls {
padding: 0 10%;
background: transparent !important;
display: block;
position: relative;
}
.mejs__controls div {
display: block;
float: left;
position: relative;
}
.mejs__controls .mejs__playpause-button {
position: absolute !important;
right: 8%;
bottom: 95%;
width: 40px;
}
.mejs__controls .mejs__playpause-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 23px;
color: #5bbb95;
background: transparent;
padding: 0;
margin: 0;
}
.mejs__controls .mejs__play button:before{
content:"\f04b";
}
.mejs__controls .mejs__pause button:before{
content:"\f04c";
}
.mejs__controls .mejs__volume-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #5bbb95;
background: transparent;
margin: 0;
padding: 0;
}
.mejs__controls .mejs__mute button:before {
content: "\f028";
}
.mejs__controls .mejs__unmute button:before {
content: "\f026";
}
.mejs__controls .mejs__time {
width: 100%;
margin-top: 7%;
margin-bottom: 3%;
color: #fff;
height: auto;
padding: 0;
overflow: visible;
min-width: 100%;
}
.mejs__controls .mejs__time span {
font-size: 15px;
}
.mejs__controls span.mejs__duration {
float: right;
text-align: right;
color: #ccc;
}
.mejs__controls span.mejs__currenttime {
font-weight: 700;
float: left;
}
.mejs__controls .mejs__time-rail {
width: 100%;
margin: 0;
}
.mejs__controls .mejs__time-rail span {
position: absolute;
top: 0;
width: 100%;
height: 4px;
border-radius: 50px;
cursor: pointer;
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
background: rgba(255,255,255,0.2);
}
.mejs__controls .mejs__time-rail .mejs__time-float {
display: none;
top: -40px;
width: 40px;
height: 25px;
margin-left: 0px;
text-align: center;
font-size: 10px;
background: #fff;
border: 0;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
display: block;
position: relative;
top: 0;
margin: 0;
line-height: 26px;
color: #100d28;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
top: auto;
bottom: -9px;
left: 50%;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
background: #5BBB95 none repeat scroll 0 0;
}
.mejs__controls .mejs__time-handle {
display: none;
}
.mejs__controls .mejs__volume-button {
position: relative;
position: absolute !important;
top: 70px;
right: 25%;
width: 40px;
height: 40px;
}
.mejs__controls .mejs__horizontal-volume-slider {
display: block;
position: absolute !important;
position: relative;
top: 70px;
right: 10%;
width: 60px;
height: 4px;
margin-top: 18px;
border-radius: 50px;
line-height: 11px;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
background: #fff;
}
#media only screen and (max-width: 600px) {
.container {
height:400px;
}
.music-player {
display: block;
position: relative;
width: 100%;
height:100%;
margin: auto;
border-radius: 10px 10px 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ display:none;
}
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sermon</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://readamind.com/music1/music1/index.css" />
</head>
<body>
<div class="contain">
<div class="container">
<div class="series-name">Album</div>
<div class="music-player">
<div class="cover">
<img src="http://readamind.com/music1/music1/data/frame.png" alt="">
</div>
<div class="titre">
<h3>Artist Name</h3>
<h1>Song Title</h1>
</div>
<div class="lecteur">
<audio style="width: 100%;" class="fc-media">
<source src="http://readamind.com/music1/music1/data/acousticbreeze.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
</div>
</div>
<script src="http://readamind.com/music1/music1/index.js"></script>
</body>
</html>
<!--Test-->
Problem: Want to create a simple javascript/jquery auto image slider, but something doesn't seem to work.
// jquery //
$(document).ready(function() {
$("#imgSlider_img1").show();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
})
// slider //
var current_image_number = 1;
function slider() {
if (current_image_number == 1) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").show('fast');
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 2;
}
if (current_image_number == 2) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").show('fast');
$("#imgSlider_img4").hide();
current_image_number = 3;
}
if (current_image_number == 3) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").show('fast');
current_image_number = 4;
}
if (current_image_number == 4) {
$("#imgSlider_img1").show('fast');
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 1;
}
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<div class="imgSlider">
<img id="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
Logic: I want to make a simple auto slider using the current html scheme. I want to be able to either increment inside the 'imgSlider' div or change images through ID's (like the current one). But the problem is that after each interval, all the images get displayed.
Any help is appreciated!
With 4 if's, all the if's are executed. So, let us say at the entry point the value of index is 1. It will be true for first if and it will set the index to 2. Now, second if condition also becomes true and it will set index to 3. And so on till it resets the value back to 1.
Hence, in place of 4 if's you need to use if else
// jquery //
$(document).ready(function(){
$("#imgSlider_img1").show();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
})
// slider //
var current_image_number = 1;
function slider() {
if (current_image_number == 1) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").show('fast');
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 2;
} else if (current_image_number == 2) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").show('fast');
$("#imgSlider_img4").hide();
current_image_number = 3;
} else if (current_image_number == 3) {
$("#imgSlider_img1").hide();
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").show('fast');
current_image_number = 4;
} else if (current_image_number == 4) {
$("#imgSlider_img1").show('fast');
$("#imgSlider_img2").hide();
$("#imgSlider_img3").hide();
$("#imgSlider_img4").hide();
current_image_number = 1;
}
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
<img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
You can further simplify your code to following
// jquery //
$(document).ready(function(){
$(".imgSlider > img").hide(); // hide all images
$("#imgSlider_img1").show(); // show 1st image
});
var current_image_number = 1;
function slider() {
$(".imgSlider > img").hide(); // hide all images
current_image_number = ++current_image_number > 4 ? 1 : current_image_number; // calculate the next image
$("#imgSlider_img" + current_image_number).show('fast'); // show the image
}
window.setInterval(slider, 4000);
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
}
.imgSlider img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
<img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
<img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
<img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
<img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>
I've simplified your JS logic a bit to make it more clear what's going on. The simplified JS will also allow you to add or remove images from your HTML without having to touch your JS:
// all images
var images = document.querySelectorAll('.imgSlider img');
// currently active number
var active = 1;
// slider
function activate() {
for (var i=0; i<images.length; i++) {
images[i].style.display = 'none';
}
// display the active image;
document.querySelector('#imgSlider_img' + active).style.display = 'block';
// increment the active image number
active++;
if (active > images.length) active = 1;
}
window.setInterval(activate, 3000);
activate();
.imgSlider {
height: 500px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
box-shadow: 5px 5px 5px #333;
position: relative;
}
.imgSlider img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="imgSlider">
<img id="imgSlider_img1" src="https://placeimg.com/640/480/1.jpg">
<img id="imgSlider_img2" src="https://placeimg.com/640/480/2.jpg">
<img id="imgSlider_img3" src="https://placeimg.com/640/480/3.jpg">
<img id="imgSlider_img4" src="https://placeimg.com/640/480/4.jpg">
</div>
To make this work, you needed to increment the integer that stores the currently active image. You want to do that inside the function that changes the images.
When you increment that active image number, you also should check if the incremented number is greater than the max number of images. If so, you should set the active image number to 1.
That's all there is to it!
If many images occurs means if condition which is stated above deals with problem. So i have suggested to use below type of JavaScript image slider.
var _imgPath = {
"imageDetails": [{
"Id": "F0001",
"Name": "figure1.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'
},
{
"Id": "F0002",
"Name": "figure2.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png'
},
{
"Id": "F0003",
"Name": "figure3.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'
},
{
"Id": "F0004",
"Name": "figure4.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/barbara.png'
},
{
"Id": "F0005",
"Name": "figure5.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/boat.png'
},
{
"Id": "F0006",
"Name": "figure6.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/cat.png'
},
{
"Id": "F0007",
"Name": "figure7.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png'
},
{
"Id": "F0008",
"Name": "figure8.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/frymire.png'
},
{
"Id": "F0009",
"Name": "figure9.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/girl.png'
},
{
"Id": "F00010",
"Name": "figure10.jpg",
"Src": 'https://homepages.cae.wisc.edu/~ece533/images/monarch.png'
}
]
}
var currentImage, LastImage;
function initLoader(arg_imgPath) {
if (arg_imgPath.imageDetails.length > 0) {
sliderImgTag.src = arg_imgPath.imageDetails[0]['Src'];
sliderImgTag.setAttribute('cid', arg_imgPath.imageDetails[0]['Id']);
sliderImgTag.setAttribute('alt', arg_imgPath.imageDetails[0]['name']);
currentImage = 0;
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"
}
document.querySelector('.Prod_Arrow.right').addEventListener('click', function () {
btnArrowShift((currentImage + 1), true);
})
document.querySelector('.Prod_Arrow.left').addEventListener('click', function () {
btnArrowShift((currentImage - 1), false);
})
}
initLoader(_imgPath);
document.querySelector('.Prod_Arrow.right').addEventListener('click', function () {
btnArrowShift((currentImage + 1), true);
})
document.querySelector('.Prod_Arrow.left').addEventListener('click', function () {
btnArrowShift((currentImage - 1), false);
})
function btnArrowShift(value, types) {
if (types) {
if (value != _imgPath.imageDetails.length) {
document.querySelector('.Prod_Arrow.left').style.visibility = "visible"
sliderImgTag.src = _imgPath.imageDetails[value]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']);
currentImage = value;
if (value === (_imgPath.imageDetails.length - 1)) {
document.querySelector('.Prod_Arrow.right').style.visibility = "hidden";
}
}
} else {
if (value != _imgPath.imageDetails.length) {
document.querySelector('.Prod_Arrow.right').style.visibility = "visible"
sliderImgTag.src = _imgPath.imageDetails[value]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[value]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[value]['name']);
currentImage = value;
if (value === 0) {
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden";
}
}
}
}
setInterval(function () {
if (currentImage != _imgPath.imageDetails.length) {
if (currentImage === (_imgPath.imageDetails.length - 1)) {
currentImage = 0;
document.querySelector('.Prod_Arrow.right').style.visibility = "visible";
document.querySelector('.Prod_Arrow.left').style.visibility = "hidden";
} else if(currentImage === (0)) {
currentImage = currentImage + 1;
document.querySelector('.Prod_Arrow.left').style.visibility = "visible";
} else if(currentImage !== (0)){
currentImage = currentImage + 1;
document.querySelector('.Prod_Arrow.left').style.visibility = "visible";
}
sliderImgTag.src = _imgPath.imageDetails[currentImage]['Src'];
sliderImgTag.setAttribute('cid', _imgPath.imageDetails[currentImage]['Id']);
sliderImgTag.setAttribute('alt', _imgPath.imageDetails[currentImage]['name']);
}
}, 5000)
#import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
/* font-family: 'Nunito', sans-serif; */
:after,
:before,
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::selection {
background: transparent;
}
.Prod-dialog * {
font-family: "Nunito", sans-serif;
}
.Prodclear {
clear: both;
}
.Prod-pull-right {
float: right !important;
}
.Prod-pulk-left {
float: left !important;
}
.Prod-col-4 {
width: 45%;
float: left;
padding: 0px 15px;
}
.Prod-col-8 {
width: 55%;
float: left;
padding: 0px 15px 0px 30px;
}
/* dialog start */
.Prod-dialog.active {
visibility: visible;
position: fixed;
background: rgb(33, 32, 32);
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
transition: all 0.5s;
padding: 30px;
z-index: 99999;
}
.Prod-container {
max-width: 1440px;
background: #fff;
margin: auto;
/* box-shadow: 0px 0px 15px #ffffff; */
padding: 0px;
margin-top: 50px;
max-height: calc(100vh - 90px);
overflow-y: auto;
background: linear-gradient(to right, white 44%, #f9fafb 44%);
}
.Prod-Gallery-footer .Prod-col-8 {
padding-right: 0px;
}
/* width */
.Prod-container::-webkit-scrollbar,
.Prod_slider::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
.Prod-container::-webkit-scrollbar-track,
.Prod_slider::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.Prod-container::-webkit-scrollbar-thumb,
.Prod_slider::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
/* Handle on hover */
.Prod-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.Prod-scroll-hidden {
overflow: hidden;
}
#Prod-dialog-close {
position: absolute;
right: 40px;
top: 15px;
width: 40px;
height: 40px;
opacity: 1;
background: #fff;
border-radius: 50%;
}
#Prod-dialog-close:hover {
opacity: 1;
}
#Prod-dialog-close:before,
#Prod-dialog-close:after {
position: absolute;
left: 19px;
content: " ";
height: 24px;
width: 2px;
background-color: #212020;
z-index: 4;
/* z-index: 888; */
top: 9px;
}
#Prod-dialog-close:before {
transform: rotate(45deg);
}
#Prod-dialog-close:after {
transform: rotate(-45deg);
}
/* dialog end */
/* header start */
.Prod-header h2 {
color: #252525;
font-size: 26px;
font-weight: 700;
line-height: 33px;
text-align: left;
position: relative;
margin: 0px 0px 25px 0px;
padding: 0px 0px 15px 0px;
}
.Prod-header h2:before {
position: absolute;
content: "";
width: 65px;
height: 3px;
background: #fa7000;
bottom: 0px;
}
/* header end*/
/* footer start */
.Prod-footer {
padding: 15px;
background: #fff;
}
.Prod-footer p {
color: #6a7070;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
margin: 0px;
}
.Prod-footer p a {
color: #6a7070;
text-decoration: none;
}
/* footer end */
/* form start*/
.Prod-invoice-sec {
max-width: 994px;
margin: auto;
/* background: #f1f1f1;
background: linear-gradient(to right, white 40%, #f9fafb 40%); */
margin-bottom: 0px;
padding-bottom: 0px;
padding: 30px;
border-bottom: 1px solid #979797;
}
.Prod-col-6 {
width: 50%;
padding: 0px 15px;
float: left;
}
.Prod-row {
margin: 0px -15px;
}
.Prod-form-row {
margin-bottom: 15px;
}
.Prod-form-row label {
color: #9b9b9b;
font-size: 16px;
font-weight: 600;
line-height: 19px;
}
.Prod-form-row p {
color: #252525;
font-size: 16px;
font-weight: 600;
line-height: 22px;
margin: 0px;
}
/* form end*/
/* Gallery Start */
.Prod-Gallery {
margin: 15px 0px;
}
.Prod-Gallery-Header {
position: relative;
border-bottom: 1px solid #979797;
padding-bottom: 8px;
}
.Prod-Gallery-Header h2 {
color: #6a7070;
font-size: 16px;
font-weight: 900;
line-height: 19px;
margin: 0px;
padding: 10px 0px;
display: inline-block;
}
.Prod-tabs {
margin: 0px;
padding: 0px;
position: absolute;
right: 0px;
top: 5px;
}
.Prod-tabs li {
margin: 0px;
padding: 0px;
display: inline-block;
font-size: 16px;
line-height: 32px;
padding: 0px 8px 0px 8px;
position: relative;
cursor: pointer;
border-radius: 6px;
}
ul.Prod-tabs img {
width: 18px;
vertical-align: middle;
cursor: pointer;
}
li#Prod-tab1.active,
li#Prod-tab2.active {
background: #ddd;
}
.Prod-Gallery-body {
padding: 15px 0px 15px 0px;
}
/* Gallery Start */
/* Tab Start */
.Prod-tab-link.current {
background: #d8d8d8;
color: #5b5b5b;
}
.Prod-tab-link.current {
display: inline-block;
}
.Prod-tab-content {
display: none;
}
.Prod-tab-content.current {
display: block;
}
li#ProdSelectedTab.current {
background: transparent;
}
/* Tab End*/
/* selected */
.Prod-grid-group li {
position: relative;
}
.Prod-grid-group li.selected {
position: relative;
}
.Prod-grid-group li.selected:after {
content: "";
display: block;
position: absolute;
background: rgba(250, 112, 0, 0.6);
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.Prod-grid-group li.selected:before {
content: "";
display: block;
width: 18px;
height: 30px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
position: absolute;
top: 35px;
left: 50px;
z-index: 1;
}
.Prod-grid-group {
margin: 0px;
padding: 0px;
margin-left: -15px;
}
.Prod-grid-group li {
margin: 0px;
padding: 0px;
width: 110px;
height: 110px;
list-style-type: none;
display: inline-block;
overflow: hidden;
margin-left: 16px;
margin-bottom: 16px;
border-radius: 5px;
}
.Prod-grid-group li img {
max-width: 100%;
}
table.Prod-table {
border-collapse: collapse;
width: 100%;
}
table.Prod-table tfoot tr td {
border-top: 1px solid #979797;
border-bottom: 1px solid #979797;
padding: 18px 0px;
font-size: 18px;
}
table.Prod-table td,
table.Prod-table th {
text-align: left;
}
table.Prod-table tr th,
table.Prod-table tr td {
padding: 5px 40px 10px 0px;
}
.Prod-table thead th {
font-weight: 700;
color: #6a7070;
font-size: 16px;
}
.Prod-table tbody td {
font-size: 16px;
font-weight: 600;
line-height: 22px;
text-align: left;
color: #252525;
}
.Prod-table tfoot td {
font-weight: 700;
color: #252525;
font-size: 16px;
}
.Prod-payment-action {
padding: 50px 0px 0px 0px;
text-align: right;
}
.Prod-payment-action button {
border: 2px solid #fa7000;
opacity: 0.8;
border-radius: 5px;
display: inline-block;
padding: 8px 15px;
background: transparent;
text-transform: uppercase;
color: #fa7000;
font-weight: 700;
margin-left: 15px;
}
.Prod-payment-action button:hover {
color: #fff;
background-color: #fa7000;
box-shadow: 0 2px 6px 4px rgba(250, 112, 0, 0.25);
}
/* slider start */
.Prod_slider {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 35px;
}
.lSSlideOuter .lSPager.lSGallery img {
width: 100%;
}
/* slider End */
.Prod_slider ul li {
white-space: nowrap;
margin-bottom: 0px;
}
.Prodt-mark {
position: relative;
width: 20px;
height: 20px;
border: 1px solid #bfc3c3;
float: left;
margin-right: 10px;
top: 5px;
border-radius: 4px;
}
.Prodt-mark::before {
content: "";
display: block;
width: 6px;
height: 14px;
border: solid transparent;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 0px;
left: 6px;
z-index: 1;
}
.Prod-tab-link.current .Prodt-mark {
background: #bfc3c3;
}
.Prod-tab-link.current .Prodt-mark::before {
content: "";
display: block;
width: 6px;
height: 14px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 0px;
left: 6px;
z-index: 1;
}
.Prod-Caption {
margin: 8px 0px 0px 0px;
font-size: 14px;
}
.newImgViewer {
width: 150px;
height: 800px;
}
.Prod_slider {
position: relative;
}
.Prod_Arrow {
width: 50px;
height: 50px;
background: #bfc3c3;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.Prod_Arrow.left {
left: 0px;
top: 45%;
}
.Prod_Arrow.left::before {
position: absolute;
content: "";
top: 20px;
left: 20px;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.Prod_Arrow.right {
right: 0px;
top: 45%;
}
.Prod_Arrow.right::before {
position: absolute;
content: "";
top: 20px;
left: 20px;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Prod-slider-view {
text-align: center;
position: relative;
height: 450px;
}
.Prod-slider-view img {
height: 400px;
border-radius: 6px;
vertical-align: middle;
margin-top: 25px;
}
.Prod_Selected {
width: 50px;
height: 50px;
position: absolute;
top: 30px;
right: 200px;
border-radius: 4px;
}
.Prod_Selected[isselected="true"]::before {
content: "";
display: block;
width: 8px;
height: 16px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 20px;
z-index: 1;
}
.Prod_Selected::after {
content: "";
display: block;
position: absolute;
background: #bfc3c3;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 6px;
}
.allitems li {
display: none;
}
.allitems li.selected {
display: inline-block;
}
#Prod-grid-slider li.isactive {
border: 4px solid #fa7000;
}
#Prod-grid-slider li {
border: 4px solid transparent;
}
#ProdSelectedTab.current span.ProdAllImages {
display: none;
}
span.ProdAllImages {
display: none;
}
.Prod-tab-link.current span.ProdSelectedImg {
display: inline-block;
}
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="src/index.css" />
</head>
<body>
<div class="Prod-dialog">
<div class="Prod-container">
<div class="Prod-invoice-sec">
<div class="Prod-header">
<h2>Slider</h2>
</div>
<div class="Prod-container-body">
<div class="Prod-Gallery">
<div class="Prod-Gallery-body">
<!--Wrapper to contain interchanging content-->
<div class="Prod-tabs-wrapper">
<div id="ProdSliderContent" class="Prod-tab-content current">
<div class="Prod-slider-view">
<img id="sliderImgTag">
<div class="Prod_Arrow left"></div>
<div class="Prod_Arrow right"></div>
</div>
<div class="Prod_slider">
<ul class="Prod-grid-group" id="Prod-grid-slider"> </ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Prod-footer">
<p>Prasanna Brabourame</p>
<p>Open Source Enthusiasts</p>
<p>Place:
<a> Puducherry,Pondicherry,INDIA</a>
</p>
<p>Email:
prasanna18101994#gmail.com
</p>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
Im trying to make my bottom sheet responsive to mobile and desktop. you can see in laptop the bottom sheet when you click new topic it works all fine:
But then lets see it in a mobile version(On a regular Iphone 5):
You can see its beyond terrible... My HTML For that view is(Minimized):
<div class="toolbar_new_topic" ng-if="authDataDesc!=null">
<md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)">
<ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon>
<span id="text_new_topic" color="white">Create a New Topic</span>
</md-button>
</div>
And my CSS Is:
.listdemoListControls md-divider {
margin-top: 0;
margin-bottom: 0
}
.listdemoListControls md-list {
padding-top: 0
}
.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p,
.listdemoListControls md-list-item ._md-list-item-inner>p,
.listdemoListControls md-list-item>._md-list-item-inner>p,
.listdemoListControls md-list-item>p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
body,
html {
background: #DDD
}
#MD-ICON-1 {
position: relative;
left: -40px;
bottom: -23px
}
.avatar_custom {
width: 20px;
height: 20px
}
.avatar_creator {
border-radius: 50%;
position: relative;
height: 30px;
top: 10px;
width: 30px
}
.toolbar_new_topic {
display: flex;
flex-direction: row;
justify-content: flex-end
}
#NEW_TOPIC_BUTTON {
background-color: #81C784;
font-weight: 700;
margin-right: 50px
}
span.views_icon {
position: relative;
top: 5px
}
span.replies_list.md-secondary.ng-binding {
position: relative;
left: -55px;
top: 18px
}
.user-avatar-wrapper {
padding: 0;
margin: 0;
height: 50px;
width: 50px;
border-radius: 50%;
min-width: 50px;
display: flex;
align-items: center
}
.tags a,
.tags li {
height: 24px;
line-height: 24px;
font-size: 11px
}
.search_autocomplete,
input#input-0 {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit
}
.tags {
margin: 0;
padding: 0;
position: absolute;
right: 24px;
bottom: -12px;
list-style: none
}
.tags li {
float: left;
position: relative
}
.tags a:after,
.tags a:before {
content: "";
position: absolute;
float: left
}
.tags a {
float: left;
margin-left: 20px;
padding: 0 10px 0 12px;
background: #0089e0;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px
}
.tags a:before {
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #0089e0 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0
}
.tags a:after {
top: 10px;
left: 0;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #004977;
box-shadow: -1px -1px 2px #004977
}
.tags a:hover {
background: #555
}
.tags a:hover:before {
border-color: transparent #555 transparent transparent
}
span.last_activity.ng-binding {
position: relative;
right: 129px
}
ul.tags {
position: absolute;
right: 1138px;
bottom: 20px
}
span.bookmark_icon {
position: relative;
right: 130px;
top: 1px
}
.user-avatar {
height: 50px;
width: 50px;
border-radius: 50%
}
md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 {
position: relative;
top: 25px;
left: 25px;
background: #EF5350
}
md-list-item.md-3-line.ng-scope.md-clickable {
background-color: #EF5350
}
.tags a {
position: relative;
left: 800px
}
Im currently Programming this website here so if you go there we can fix this problem real quick:
https://ide.c9.io/amanuel2/ng-fourm
Thanks for your time!
You need to use media queries in your CSS to target mobile device sizes. For example:
#media (max-width: 420px) {
/* your styles here */
}
Here is my html struct, simple
<div> <img style="width:100%;height:100%"/> </div>
div shows in the chrome:
and the image, there is a gap between the div and image
noticed that the image supposed to cover the div,
if I change the height of div more than 10px, looks perfect.
the image cover the div
I've tested if the height of div is less, the gap is bigger.
So what's the problem?
there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:
._display_style {
display: none;
}
.sketchup_display_style {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
.cab_list_form #shape div img {
width: 80%;
height: 80%;
}
/*
.cab_list_form #shape {
width:150px;height:200px;
}*/
.cab_list_form #shape div {
/*
width:160px;
height:160px;
float:left;
*/
padding: 0.2em 0 0.6em;
text-align: center;
background-repeat: no-repeat;
cursor: pointer;
}
.cab_list_form #shape div span {
width: 100%;
display: block;
}
.toggle-red {
border: 2px solid red;
}
.cab_style_img {
background-color: #fff;
border: 2px solid #ebebeb;
text-align: center;
}
.cab_style_img img {
width: 290px;
height: 240px;
}
.question_img {
padding-right: 1em;
float: left;
}
#cab_condition table td label {
/*
background-repeat:no-repeat;
text-align:center;
padding:0.1em 0.8em 0.3em;
cursor:pointer;
width:50px;
height:100%;
line-height:20px;
margin:auto;
text-align:center;
*/
border-radius: 20px;
text-align: center;
width: 55px;
height: 20px;
line-height: 20px;
margin: auto;
background-color: #ffffff;
cursor: pointer;
padding: 0 0.5em;
}
#cab_condition table td label input {
display: none;
}
#cab_condition table td label span {
margin: 0.1em 0.6em;
}
.howmanypart_td span {
margin: 0.1em 0.7em;
}
.down_search div {
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
height: 30px;
line-height: 30px;
color: #30b2ba;
/*
padding:0.5em 0;
width:50px;
*/
}
.priceDiv select {
border: 1px solid #bdbdbd;
width: 130px;
height: 28px;
border-radius: 20px;
/*text-align:center;*/
color: #30b2ba;
cursor: pointer;
}
.door-background {
position: absolute;
border: 2px solid #000;
border-collapse: collapse;
text-align: center;
padding: 0;
margin: 0;
}
.door-background th,
.door-background td {
border: 2px solid #999;
border-width: 0 2px 2px 0;
padding: 0;
}
.tableizer-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.tableizer-table th,
.tableizer-table td {
border: 1px solid #999;
border-width: 0 1px 1px 0;
padding: 2px;
}
.wardrobe_type_list {
width: 100%;
height: 40px;
}
.wardrobe_type_list .groups_check {
float: left;
margin-right: 25px;
height: 25px;
line-height: 25px;
}
.wardrobe_type_list .groups_check img {
height: 100%;
}
.wardrobe_type_list .groups_check input[type=radio] {
height: 25px;
line-height: 25px;
}
.display-none {
display: none;
}
.search-container {
float: left;
}
body {
font-size: 14px;
margin: 15px;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
}
.pax_highlight {
position: absolute;
border: solid 3px #329afb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 3;
}
.pax_highlight_text {
color: #329afb;
font-weight: bold;
font-size: 12px;
bottom: 0px;
margin-bottom: -19px;
position: absolute;
text-align: center;
}
#groups_list {
left: 10px;
position: relative;
}
#white_hide_menu {
background-color: white;
height: 51px;
position: absolute;
top: 517px;
width: 5px;
display: none;
}
.menu_groups {
height: 140px;
overflow: hidden;
position: relative;
width: 100%;
}
.thumbs_layers_div_a {
display: none;
}
.items div {
float: left;
}
.items {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.thumbs_layers_group {
height: 100px;
}
.thumbs_layers_div {
background-color: white;
cursor: pointer;
float: left;
margin-left: 8px;
padding: 1px;
width: 93px;
height: 93px;
text-align: center;
display: inline-block;
display: inline;
}
.thumbs_layers_div_selected {
border-color: #389CFC;
border-width: 3px;
background-color: #389CFC;
}
.thumbs_layers_div img {
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
height: 91px;
}
.thumbs_layers_add_item {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.thumbs_layers_div_selected img {
border-color: #389CFC;
}
.pax {
height: 180px;
}
#layers_pax_buffer {
pointer-events: none;
}
#layers_pax_buffer {
display: none;
border: 1px solid #CCCCCC;
width: 1048px;
height: 585px;
position: absolute;
top: 98px;
}
.val {
width: 1048px;
height: 150px;
}
#dialog-confirm,
#dialog-confirm2 {
display: none;
}
.pax_h_dimension {
display: none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display: none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder: 2px solid grey;
position: relative;
margin: 10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder: 1px solid green;
background: #f0f0f0;
overflow: hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width: 800px;
margin: 0 auto;
height: auto;
}
.attr {
width: 90%;
float: left;
}
.name {
width: 90%;
text-align: left;
margin: 10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height: 18px;
border: 1px solid #bbb;
float: left;
margin: 5px;
padding: 5px;
text-align: center;
cursor: pointer;
}
#message {
width: 140px;
height: 80px;
border: 3px solid #ddd;
margin: 5px;
padding: 10px;
float: left;
background: #eee;
}
#message div {
margin-bottom: 10px;
}
.button {
width: 150px;
height: 40px;
padding: 10px;
float: right;
xmargin-top: 300px;
}
.button button {
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width: 80px;
height: 30px;
margin: 5px;
font-size: 14px;
xfloat: right;
}
.pax {
border: 3px solid #eee;
height: auto;
margin: 20px;
overflow: hidden;
min-width: 800px;
xoverflow-y: hidden;
}
#items_scroll {
overflow-x: scroll;
padding: 5px;
}
.thumbs_layers_div {
overflow: hidden;
height: 120px;
}
.wardrobe_type_list {
xpadding-top: 10px;
xpadding-left: 10px;
xwidth: 90%;
margin: 10px;
margin-bottom: 0;
}
#items {}
.thumbs_layers_div_selected .thumbs_layers_add_item {
color: white;
}
.v #items img {
width: 95px;
height: auto;
}
.v .thumbs_layers_div {
height: 70px;
}
<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
<div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>%E5%B7%A6</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>copyRight</div>
<div>宽度:968</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>1</div>
<div>宽度:50</div>
<div>高度:2400</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
<div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
<div>dingxian</div>
<div>宽度:2100</div>
<div>高度:65</div>
<div>price:0</div>
<div>ratioTop:0</div>
<div>ratioLeft:0</div>
<div>ratioWidth:0</div>
<div>ratioHeight:0</div>
</div>
</div>
<div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>
Try to this
img {
vertical-align: top;
}
because img vertical-align is
baseline - the default value.
more about vertical-align
#Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually.
The problem is easy to solve ,one solution is setting the display attribute as block for the img.
please try it
img{
display:block;
}