2 Replies - 639 Views - Last Post: 21 November 2013 - 07:30 AM

#1 pashata  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 14-October 13

Slidedown paragraph won't change heigt in Chrome

Posted 18 November 2013 - 04:28 AM

Hey guys ,
i'm woking on this site http://nikodola.com/breeze/ , and i got some slide down paragraphs on this page http://nikodola.com/...e/hvac.php?q=10 . I used this adjacent sibling combinator that will change the height of the paragraph that is next to the checkbox. It used to work in chrome when i made it , but now a few weeks after it's not working only in Chrome. Can you help me out ? Here is the code:

<input type="checkbox" id="checkbox1">
<label for="checkbox1">Priority Service</label>
<p class="slide-down-paragraph">Comfort Club Premium Agreement members are never turned away during the heat of summer&mdash;or the chill of winter! This level of membership entitles you to priority service over non-members. Most of the time we respond to your emergency the same day!</p>


section.content-wrapper > input[type="checkbox"] {
	display: none;
}
section.content-wrapper input[type="checkbox"] + label {
	width: 66%;
	background: url(../../images/layout/blue-gradient.png) no-repeat center center #113370;
	background-size: 100% 100%;
	display: block; 
	font-family: 'bebas_neueregular',sans-serif;
	margin-left: 30%;
	font-size: 1.8em;
	color: white;
	padding: 0.5% 4% 0.5% 0%;
	position: relative;
	cursor: pointer;
	text-align: right;
}
section.content-wrapper p.slide-down-paragraph {
	overflow-y: hidden;
	height: auto;
	max-height: 0px;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	width: 67.7%;
	margin-left: 30%;
	background-color: #faab3f;
	color: white;
	font-family: 'Helvetica World',sans-serif;
	text-align: justify;
}
section.content-wrapper > input[type="checkbox"]:checked + label + p.slide-down-paragraph {
	height: auto;
	max-height: 300px;
	padding: 1%;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Slidedown paragraph won't change heigt in Chrome

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3333
  • View blog
  • Posts: 11,296
  • Joined: 12-December 12

Re: Slidedown paragraph won't change heigt in Chrome

Posted 18 November 2013 - 06:20 AM

This is puzzling. I can only offer debugging advice:
---
Show the paragraphs by default. In your checked-css just change the text-color. If this works in GC then you know that it is finding the elements, and it is the css-properties that are the issue.

Disable the transition effect temporarily.

Create a smaller, simpler, test page to help you discover the issue.
---
There is chance that it may be a bug in GC, hopefully not. If possible, try and run the page in an earlier version of GC.

Sorry that I can't be more directly helpful.

Added: Try using height rather than max-height.
Was This Post Helpful? 0
  • +
  • -

#3 pashata  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 14-October 13

Re: Slidedown paragraph won't change heigt in Chrome

Posted 21 November 2013 - 07:30 AM

Tried with height insted max-height , still nothing .. but strange thing is happening , when i check the button the paragraph is not showing , but while the button is checked i hit inspect element to see if the values are changing then the paragraph is showing :S i dont understand what is the problem
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1