Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
A page is loading everything correctly in Chrome but not in firefox. Can anyone tell me what is the problem and how can i get rid of it?
Check This Link on both chrome and firefox.
Chrome:
Firefox:
HTML :
<div class="container archo-all-projects-container">
<div class="row ">
<div class="col-lg-12">
<h4 class="archo-all-projects-header">All Projects</h4>
</div>
</div>
<div class="argo-project-list">
<div class="row"><div class="col-lg-12"><h5 class="archo-project-type-header">Architecture</h5></div></div>
<div class="row">
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.archo-project-type-header{
background: #000;
color: #fff;
opacity: .8;
padding: 15px;
}
.archo-all-projects-container>.argo-project-list>.row{
}
.archo-all-projects-container .argo-project-list{
overflow-y: auto;
overflow-x: hidden;
}
.archo-all-projects-container .archo-all-projects-header{
background: #fff;
opacity: .8;
padding: 15px;
}
.archo-all-projects-container .archo-project-item{
background: #2b2b2b;
margin-bottom: 15px;
}
.archo-all-projects-container .archo-project-item-image{
text-align: center;
padding: 10px;
}
.archo-all-projects-container .archo-project-item-title{
text-align: center;
padding: 10px 0 0 0;
}
.archo-all-projects-container .archo-project-item-image a,.archo-all-projects-container .archo-project-item-title a{
text-decoration: none;
color: #fff;
}
.archo-all-projects-container .archo-project-item-image a:hover,.archo-all-projects-container .archo-project-item-title a:hover{
text-decoration: none;
color: #fff;
}
.archo-all-projects-container .archo-all-project-title{
background: #000;
}
.archo-project-item .archo-project-item-title{
color:#fff;
}
/*testing down*/
.archo-all-projects-container {
/*background: #fff;*/
bottom: 168px;
width: 100%;
top: 75px;
position: absolute;
}
Fiddle is showing correct in both chrome and firefox
In your code $('body').outerHeight() results with 0. It is because you are using absolute positioning of elements. While you do this, body element will always have 0px height because it does not contain any element that will expand its height.
You can try set width: 100% on body element. It should work.
The problem is in the javascript. With Firefox, I disabled javascript (using Web Developer toolbar) and refreshed the page. The elements didn't disappear.
Disable your JavaScript includes one by one until it works, then you know what the offending file is, and can use an alternate solution or fix it.
You have a javascript plugin adding height:0 to the .slimScrollDiv div.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm trying to filtering my list from bad to excellent like trivago system
if you are going to click this link
you will understand what I'm talking about and I show section on image what I want to do.
When you click button you see styling is removing or adding again and showing hotel list I really didn't understand how to do that ? is there any example
* {
outline: none;
}
button {
cursor: pointer;
background: transparent;
border: none;
padding: 10px;
}
#wrap {
width: 960px;
}
#wrap:before,
#wrap:after {
content: "";
display: table;
clear: both;
}
#filter {
width: 40%;
float: left;
}
#content {
float: right;
width: 59%;
margin-left: 1%;
font-size: 12px;
font-family: sans-serif;
}
.filter-list {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 10px;
}
<main id="wrap">
<div id="filter">
<button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button>
<button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button>
<button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button>
<button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button>
<button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button>
</div>
<!-- filter-->
<div id="content">
<div class="filter-list">
I'm a very good
</div>
<div class="filter-list">
this is the bad list
</div>
<div class="filter-list">
I'm a very good to
</div>
<div class="filter-list">
Excellent!
</div>
<div class="filter-list">
Iııh normal!
</div>
<div class="filter-list">
Good - enough thanks
</div>
<div class="filter-list">
Bad - don't ever..
</div>
<div class="filter-list">
Excellent again
</div>
<div class="filter-list">
isn't bad ? I think yes bad..
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Look at this code its working like on the trivago page!
$("button").on("click", function (){
$(this).css("opacity", "1");
$(this).nextAll().css("opacity", "1");
$(this).prevAll().css("opacity", "0.5");
});
* {
outline: none;
}
button {
cursor: pointer;
background: transparent;
border: none;
padding: 10px;
}
#wrap {
width: 960px;
}
#wrap:before,
#wrap:after {
content: "";
display: table;
clear: both;
}
#filter {
width: 40%;
float: left;
}
#content {
float: right;
width: 59%;
margin-left: 1%;
font-size: 12px;
font-family: sans-serif;
}
.filter-list {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 10px;
}
<main id="wrap">
<div id="filter">
<button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button>
<button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button>
<button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button>
<button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button>
<button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button>
</div>
<!-- filter-->
<div id="content">
<div class="filter-list">
I'm a very good
</div>
<div class="filter-list">
this is the bad list
</div>
<div class="filter-list">
I'm a very good to
</div>
<div class="filter-list">
Excellent!
</div>
<div class="filter-list">
Iııh normal!
</div>
<div class="filter-list">
Good - enough thanks
</div>
<div class="filter-list">
Bad - don't ever..
</div>
<div class="filter-list">
Excellent again
</div>
<div class="filter-list">
isn't bad ? I think yes bad..
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery is needed btw! You already included it in your snippet.
I have this above image, I need to achieve an effect with CSS and JavaScript; on my page I allow users to add up to 12 images to their account, and all the images will be displayed in the div below.
If a user has less than 5 photos the div with red border will be hidden, and when a user has more than 5 photos the div with red border will display with the 2 arrows – one on the left and the other on the right side – and clicking the right arrow the photos will move left until it get to the last photo.
How can I achieve this with CSS and JavaScript? I tried to use overflow hidden for the div, but what I got wasn't what I needed.
Any help on this from any one?
My HTML and CSS is below:
.mycarousel-container {
border: 1px solid red;
width: 650px;
min-height: 140px;
max-height: auto;
overflow-x: hidden;
position: relative;
left: 0px;
z-index: 0;
}
#carousel_control_left {
float: left;
margin-top: 60px;
color: #b0b0b0;
font-size: 18px;
}
#carousel_control_right {
float: right;
margin-top: 60px;
color: #b0b0b0;
font-size: 18px;
}
.mycarousel {
border: 1px solid #ccc;
width: 102px;
height: 102px;
margin: 15px 15px 15px 4px;
float: left;
border-radius: 2px;
}
<div class="row">
<div class="col-md-12">
<div><small class="text-muted">This listing has 6 photos. Add up to 6 more for free.</small>
</div>
<div class="mycarousel-container" style="padding-left:0;padding-right:0;">
<span id="carousel_control_left"><i class="glyphicon glyphicon-chevron-left"></i></span>
<span id="carousel_control_right"><i class="glyphicon glyphicon-chevron-right"></i></span>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
</div>
</div>
</div>
The link to jsFiddle
Might I suggest not adding those two arrows and letting the browser do the work for you?
Just set overflow-x: auto on the containing div. This will enable scrolling, so all the native capability (such as two-finger swiping) will work in the way that the user expects it for the platform they're on. This is a much better solution than reinventing UI components in ways that users don't expect.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers
You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax
Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!
A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block
Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
I'm working on example of collapse event with mouse click:
JSFFIDDLE Example
How I can align the arrow and the question? Also when I expand the question the arrow is not fully rotated. Is there any solution for these problems?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow::before {
position: absolute;
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.9em;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
.question h6 {
margin-left: 15px;
}
adding:
.arrow::before {
margin-top: 15px;
}
and changing transform: rotate(90deg); to:
.arrow.down::before {
transform: rotate(135deg);
}
A quick fix if you're going to keep the current font-size
Here's the fiddle: https://jsfiddle.net/zeamgd9s/3/
.question{
display:table;
}
.question > *{
display:table-cell;
vertical-align:middle;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
If i have a div 100px x 100px.
And i define 10x child divs that should fit next to each other with 10px x 10px.
Why do they not?
try it with your browser: http://dwaves.de/prozentuale-angaben-check.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
.relative {
width: 10%;
height: 10%;
background: yellow;
position: relative;
float: left;
}
.fixed {
height: 10px;
width: 10px;
background: blue;
position: relative;
float: left;
}
</style>
<body>
<div class="container">
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
</div>
</body>
</html>
In the link you posted, you have 12, not 10 <div> elements. Also, you have an unnecessary <br/> tag. Fix those two issues and they will fit in one row.
JSFiddle demo here (with <br> and two last <div> tags removed).