Link to home
Start Free TrialLog in
Avatar of Marco Gasi
Marco GasiFlag for Spain

asked on

CSS rule not applied

Hi everybody.
Let me clarify my obscure question.. Developing a hybrid mobile app, I have a page with a menu and some hidden ul element which appears if the related menu item is clicked. The jquery is the simplest one:
	 $('#view-folder-dropdown').on('click', function(){
		 $('#view-style-list').toggleClass('menu-visible');
	 });

Open in new window


Well the menu is not shown. But the strange thing is that, if I connect my phone to my pc and I open Chrome Device inspector to use debug tools, the menu suddenly appears.
If I have debugger already opened and I close and reopen the page where the menu is, the menu remains hidden, but if I disable anyone of its rules (for instance the width, or the border...), it suddenly appears. Once it appears, everything works fine, but if I exit the page and then enter it again, then the issue is there again.

Looking the DOM I see the class menu-visible is correctly applied to the right element but it looks like the click event set width and height of the drop-down to 0px.

These the css for drop-down class:
.drop-down {
border: 1px solid #e4e4e4;
min-width: 130px;
padding: 10px 0;
background: white;
position: absolute;
top: 40px;
left: -55px;
width: 150px !important;
min-height: 100px;
height: auto;
min-height: 100px;
z-index: 10;
display: none;
-webkit-box-shadow: 0px 2px 3px 0px #c5c5c5;
-moz-box-shadow: 0px 2px 3px 0px #c5c5c5;
-ms-box-shadow: 0px 2px 3px 0px #c5c5c5;
-o-box-shadow: 0px 2px 3px 0px #c5c5c5;
box-shadow: 0px 2px 3px 0px #c5c5c5;
}

Open in new window


Any idea about what's going wrong?
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Here's a stab in the dark. Is #view-folder-dropdown a dynamically created element? If so, you may need to do something like this...
$('body').on('#view-folder-dropdown', 'click', function(){
		 $('#view-style-list').toggleClass('menu-visible');
	 });

Open in new window

...to make sure it's fully available in the DOM before attaching an event to it.
Avatar of Marco Gasi

ASKER

Hi Tom, thank you for trying to help me.
Unfortunately it's not so easy. The element is statically created... In addition, the event is fired correctly: the class .menu-visible is toggled correctly. What's really strange is that when you click on the #view-folder-dropdown the #view-style-list width and height are set to 0. Not as an inline style or better in any style at all. In CSS panel everything looks normal. But when you select an element in the DOM view in the Chrome Dev Tools, Chrome shows a small tip near the element and in this tip where id nd classes are shown, the element size, which before I click were the expected ones, magically bevome 0px x 0px! If I click again width and height apper to be correct again. But the class menu-visible has no rule about its dimension:
.menu-visible{
	display: block !important;
}

Open in new window

Nor I have some javascript which does something like that: the only jvascript code about menu-visible class is the one which add or remove it to/from a couple of elements...
If I comment the property
display: block;

Open in new window

for the class menu-active, drop-down width and height remins untouched, but obviously the menu is not displayed because its display property remains set to none.
I also tried to use a setTimeout to alter the inline css of the drop-down in order to force someway its rendering but with no success.
The other strange thing is that if I disable a property in the css panel of the Chrome Dev Tools, immediately the drop-down is displayed: if I disable z-index it is displayed under other elements, if I disable border or shadow it is displyed without these rules applied, but it is displayed. So disabling any css property returns its width and height to the drop-down menu...
Can you post the HTML code for your menu, and any relevant CSS code that applies to it?
Nothing you have posted here gives me any clue as to the cause. Your css looks correct, you jquery looks fine.

When html, css and query are combined to create a web page and you wind up with bizarre behaviors like this I suspect structural problems with the page. In that case, even Developer Tools can not be trusted to tell you what's going on. Start by running the page through a validator like http://validator.w3.org. If you would have posted a link here, I would have run it through already. Look at the view-source in Firefox. Are you seeing any red markup? Try to make a simpler page with just the elements involved to see if the problem is recreated.
No useful result through Validator. And it's realy hard post here all the code involved because the page is partialy dinamically built and this page is just a section of the one-page-hybrid-app. I have index.html wich is divided in several section each representing a page of the mobile app.

Anyway, I think I have found the issue. my menu is within an element with position set to fixed:
<div class="control-sec">
	<ul class="controls-list">
			<li>
				<a href="#" ><i class="material-icons">delete</i></a>
			</li>
			<li>
				<a class="ad" href="#"><i class="material-icons">sort</i></a>
				<ul class="drop-down"><li><a id="category" href="#" onclick="sortBy(this);">Category Name</a></li><li><a tabindex="2" id="sub_category" href="#" onclick="sortBy(this);">Sub Category Name</a></li></ul>
			</li>
			<li id="view-style" class="active"><a class="ad" href="#" id="view-folder-dropdown" style="color:#563B77 !important"><i class="material-icons">?</i></a>
			<ul id="view-style-list" class="drop-down">
				<li><a href="#" id="size-normal">Normal</a></li>
				<li><a href="#" id="size-double" class="selectedView">Large</a></li>
				<li><a href="#" id="viewDetail">Details</a></li>
			</ul>
		</li>
	</ul>
</div>

Open in new window


The div control-sec has position: fixed. If I set it to relative, the drop-down is displyed correctly. Any idea how can I mantain position fixed and display the drop-down?
SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I mean mobile app: I'm developing a hybrid mobile app using html5, css and javascript to build the app which is then converted in a mobile pp by Cordova/Phonegap.
Anyway, you're absolutely right saying that using fixed position in mobile apps is discouraged but my client is really obstinate wanting this menu bar fixed. I already forced him to give up with another section of the first page where he wanted as fixed almost half page (in a 4.5'' device)!!!

I'll give a try to your suggestion: thank you.
What I don't understand is that position fixed works fine: the element stays where I want it stay. It just prevents me to show the hidden menu...
I'm still not getting a complete picture of your html structure but I'll take a shot at defining the problem. I don't have an answer but maybe it will help another expert.

Allow me to summarize.

You say "The div control-sec has position: fixed."

When you say "position fixed works fine" I assume you are referring to the div control-sec?

#view-style-list is inside control-sec and has a class of drop-down. All class drop-down elements are display:none and position:absolute.

I don't understand how class menu-active fits into the structure. I don't see it in the markup you posted.

To get just the menu #view-style-list to show, you are adding the menu-visible class to it using a jQuery click event. menu-visible changes drop-down from display:none to display:block. You have confirmed this. However, the menu that is supposed to appear has no dimensions according to Developer Tools. It's as if all of the drop-down class definitions are being ignored until you change something in Developer Tools. Then the menu appears along with all of drop-down class's definitions.

Is that correct?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Glad to help even if it was indirectly. Thanks for the points.
Thank you, Tom!