I using Metro css (windows 8 style) and have a problem.
I have container with alerts (the blue in the picture) ,
and above , there is 'IT -CENTER ' , If I click there it open a button.
the problem that the button behind the container..
I try to set the Z index of the container to -1 , and it's not help.
the dropdownlist with the button(IT-CENTER):
IT-CENTER
<li style="z-index:3">התנתק</li>
</ul>
</div>
and the container(blue one):
<div id="alerts-container" style="z-index:-1">
<div id="toast-example1" class="toast toasttext02 fade in">
<button type="button" class="close" data-dismiss="alert"></button>
<div class="pull-left">
<div class="toast-object icon-info-4"></div>
</div>
<div class="toast-body" style="text-align:right">
(it's without the closing tags..)
what should I do?
thanks!!
You must set position:relative if you are setting z-index - it is very important thing and can lead to your bug
If the 1 method doesn't help you should try to set z-indexes to the possible parents of that button (can say for sure I don't see your code)
overflow: hidden;
to parent DIV worked for me
Related
Angular Version - 1.4.7
Ui-Layout Version - 1.4.1
Plunkr Link - Ui-layout Collapse problem
<div ui-layout-container id="main1" size="20%" min-size="20%">
One
</div>
<div ui-layout-container id="main2" size="80%" min-size="80%">
Two
<div ui-layout="config2">
<div ui-layout-container id="child1" size="80%" min-size="80%">
<br/> Three
</div>
<div ui-layout-container id="child2" size="20%" min-size="20%">
Four
</div>
</div>
</div>
Collapse of section "two" in the plunkr example is not working using the toggle button in the one|two splitter. Likewise Collapse of section "four" in the plunkr example is not working using the toggle button in the three|four splitter. Please help
Seems there's a bug in ui-layout so it won't collapse the right hand side or bottom panels.
Here's the updated Plunkr with a fix
UI-Layout Collapse Fix
I've added this on line 529 of ui-layout1.4.1.js ...
prevContainer.uncollapsedSize = null;
This is late but I think I know the answer.
UI-Layout only allows you to drag when the min/max sizes are possible. For example, if you have min-size:"20%" max-size="20%", you won't be able to drag at all, because there's no flexibility within the range.
Thus if you set two neighboring ui-layout-containers to each have min-size 20% and 80%, of course you won't be able to drag--there's no where the two divs can go that fulfill both min-sizes.
I want to make a div which contains bars(divs).
The problem is :
The bars seems out of the parent div but it should be in it.
The parent div id is block_gantt and it has scroll.
Everything is fine in internet explorer but in google chrome it is problem.
the screenshot is from google chrome (I do not want this):
//////////////////////////////////////////////////////////////////
the screenshot from internet explorer(it is correct)
Here is my code:
<div id ="block_gantt" style="height:240px; width:880;" onscroll=" gantt_scroll();">
<div onclick="ShowItemDetail(160662);" style="overflow:hidden;position:absolute;margin-left:614px;text-align:left;float:left;height:28px;width:2896;" >
<div style="overflow:hidden;position:relative;z-index:1;text-align:left;background:#F1F1F1;width:2814px;height:28px;float:left;">
<div style="overflow:hidden;position:absolute;z-index:2;background:#fea621;width:1094px;height:28px;float:left;text-align:left;">
</div></div><div style="overflow:hidden;position:absolute;z-index:3; width:2896px;height:28px;float:left;text-align:left;font-color:#555555;left:3px;top:8px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 39%
</div>
<div style="overflow:hidden;position:absolute;z-index:4;left:1094px; width:2814px;height:28px;float:left;text-align:left;padding-left:3px;color:#444444">
</div>
<div style="overflow:hidden;padding-left:5px;position:relative;z-index:6;width:70px;height:28px;float:left;color:#333333">
</div>
</div>
...same for above
...same for above
...same for above
</div>
my fiddle :
http://jsfiddle.net/LFUah/2/
Try to add position:relative to your block_gantt div
I thought of doing a fiddle for this, but since it's already online, and since I don't know fiddle that well, I figured it'd take me a long time to get it right on one. So...
The code's all there. And you can all see what the problem is...
The problem: I need it to remain that when one clicks the OIL, MILITARY, MISC tabs, the first rectangle border is red (as it is when you first scroll through them now). When one clicks the second, third, etc. rectangle on the oil tab, the border needs to be removed from the one that it currently is on and be applied to the one that was just clicked. Again, keeping the first rectangle on the MILITARY and MISC tabs as selected with a red border.
The code works, almost exactly as needed, but after spending a few hours trying to google and after rewriting the code several times (you can see some of my attempts commented out in the code), I cannot figure out what is wrong.
When you load the page, the TEST rectangle is selected. When you TEST 2 (or any other one) the red border is removed from TEST and applied to TEST 2 (or whichever one is clicked). When clicking any other, the red border remains and is added to the new one...but when TEST is reclicked (and gains the border again), and is then clicked out of (say, you click TEST 2 again), the border is removed once more...but it only works on TEST.
My question is thusly: what am I doing wrong? Why does it appear as though
var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');
is cached and not being re-ran on every click?
EDIT: (More code):
$("#lewy section div a").click(function(e) {
e.preventDefault();
var target_tab_selector2 = $(this).attr('href');
var active_div = $("#lewy div div.active a");
var active_div_data = $("#lewy div div.active a").data('default');
var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');
$(active_div).attr('data-default',target_tab_selector2);
var target = $('a[href='+target_tab_selector2+']');
$(target).parent('div').addClass('selected');
$.ajax({
type : "POST",
cache : false,
url : "mapStructureDisplay.php?s",
data : {'X': target_tab_selector2},
success: function(data) {
$("#secondary").html(data);
}
});
});
});
<div id="lewy" style="background-image:url('images/308.png');">
<div id="outer">
<div id="inner" class="active">OIL</div>
<div id="inner">MILITARY</div>
<div id="inner">MISC</div>
</div>
<section id="Div1" class="active">
<div id="structure" class="selected"><a class="button2" href="#str1">TEST</a></div>
<div id="structure"><a class="button2" href="#str2">TEST 2</a></div>
<div id="structure"><a class="button2" href="#str3">TEST 3</a></div>
<div id="structure"><a class="button2" href="#str4">TEST 4</a></div>
<div id="structure"><a class="button2" href="#str5">TEST 5</a></div>
<div id="structure"><a class="button2" href="#str6">TEST 6</a></div>
</section>
<section id="Div2" class="hide">
<div id="structure" class="selected"><a class="button2" href="#str7">TEST DIV 2</a></div>
</section>
<section id="Div3" class="hide">
<div id="structure" class="selected"><a class="button2" href="#str9">TEST DIV 3</a></div>
</section>
</div>
<div id="srodek">
</div>
<div id="prawy" style="background-image:url('images/246.png');">
<div id="secondary">TEST</div>
</div>
</div>
Try changing:
$(active_div).attr('data-default',target_tab_selector2);
to:
$(active_div).data('default',target_tab_selector2);
jQuery caches data-XXX attribute the first time you access them with .data(), and doesn't fetch them again. So modifying them with .attr() later won't be seen when you use .data('default') to read the attribute. You should be consistent, either use .attr for all setting and reading, or .data, but don't mix them.
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.
I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/