We Keep Coding

AngularJs directive create fixed div on page

I'm currently developing a document tree in AngularJS using a directive. It is part of the pages as component, and is placed relative any other component currently on the page.
As part of the document tree I have a version modal that is displayed when selecting a file, displaying its information and available versions of the file.
But this modal need to be fixed on the screen, so that the user does not need to scroll to the top to see it.
But as the modal is part of the document tree component, just setting it to fixed does not accomplish this. It just set it to fixed in relation to the directive.
// This does not work.
.version-modal {
position: fixed;
top: 5vh;
right: 2vw;
bottom: 5vh;
width: 480px;
}
How would one go about to set a fixed position on a div through a directive, that could be nested down several levels of dom objects with relative positions and sizes? It works if I through the browser tools move the modal div out as a child to < body/>, but doing so through code breaks the application.
let bodyDiv = document.getElementById('body-container');
let versionDiv = document.getElementById('version-modal');
bodyDiv.appendChild(versionDiv);
As far as I understand, doing this the div looses its connection to $scope, and all functions and members are lost.

Fixed positioning should work regardless of where the element is in the DOM hierarchy. It would be useful to have a jsfiddle or similar to take a look at this issue. Alternatively, the HTML of the element would be useful.
Your CSS is referencing .version-modal as a class, but you're successfully referencing the modal using document.getElementById('version-modal'). Does your element have a version-modal class attribute as well as a version-modal id attribute?
You may just need to add class="version-modal" to your modal, or change your CSS rule to:
#version-modal {
position: fixed;
top: 5vh;
right: 2vw;
bottom: 5vh;
width: 480px;
}

Prevent to load a page with js disabled

It's possible to disable an entire page html if the js is disabled on the browser of the user?
EDIT:
Thank you all for the answers and comments! However, what I mean is: I want that the page is replaced with something else, like an image, in that case.

The noscript tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
You can do something like this in your html body to display whatever image you want to show:
<noscript>
<style type="text/css">
.wrapper {display:none;}
</style>
<div>
<img src="src/to/your/image.png" alt="You don't have javascript enabled">
</div>
</noscript>
The css inside the noscript tag will hide the html content inside the wrapper class.

Not that I am aware of. Somewhere somehow you need to tell the browser to prevent the action/event linked to it, eg returning false, which is a task for javascript. I can come up with two alternatives:
Make all anchors dummies and correct them when JS is turned on:
foo
$('a').each(function(){ this.href = $(this).data("href");} // * jQuery for simplicity
Put an layer on top of the anchor, which you can remove with JS.
.BlockedAnchor a{ position: relative; }
.BlockedAnchor a:before{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
$('body'removeClass("BlockedAnchor");

Radio button remove down correctly

I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}

If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.

Wrapping ajax elements to HTML page

So I have already fetched data from our mongodb database using Ajax. I can retrieve the data and from database store it inside javascript variables successfully.
Firstly, What I want is to put the data back on the HTML page like inside the blocks. Should it be done using Jquery and put in CSS tags? I have the data stored in global variables inside javascript. How could this be done?
Second, after we have loads of data with text elements and the strings vary in length. So how do I make sure that whatever text I put on the HTML page is properly aligned to our canvas width and height everytime. It should not exceed the canvas width. How can this be achieved?
So this is my css element
#disp_prob_title{
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 150px;
width: 350px;
}
And this is the Javascript function where I want to append it
setQuestion : function(titleString, bodyString, hintString){
$("#disp_prob_title").append(this.qsName);
},
this.qsName is a global variable in my js file and it retrieve a string correctly on logs. However I do not see any text on my html page. Also how do I change the font size and color inside the css element?
Thanks!

Not sure what you mean by "put in CSS tags". You could do something like give the block of html you wish to have your content in an id like "content" then use jQuery add, append, appendTo, etc. method to append the content to the content block.
Html block would look like:
<div id="content"></div>
Then once you fetch the data:
$("#content").append("<div>some data here</div>");
As far as forcing the content to remain the right size etc. you'll have to add some styling to the content block or the content you append to that block.
Your question was a little vague so hopefully this helps?

It works now, I had to change the styling to
#disp_prob_title{
position: absolute;
width: 30%;
top: 250px;
left: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Thank you for your help!

How to keep dropdown menu on top of ActiveX

I have a drop-down menu created by JavaScript on all pages and some columns have up to 20 items. This drop-down appears topmost over all content in Mozilla browsers but in Internet Explorer it gets partially covered when an ActiveX object is displayed just below it.
I have tried displaying the ActiveX in a DIV layer and setting z-index but so far I haven't found a solution that works. Adding style to the object tag had no effect...
<object etc style='z-index:3;'>
Applying style to a DIV containing the object also had no effect...
<div align="center" style="z-index:2;">
The dropdown menu has a z-index=1 applied. Adding a 'wmode' parameter to the object also did not work...
<param name='wmode' value='transparent'>

Apparently the issue is in-process vs out-of-process plugins. In-process plugins (and activex) will run in the same environment as the web page itself and honour z-ordering. But in-process is rare. Most browsers run plugins and activex in a separate process, so the web page is in one process and the activex/plugin is in a different process. The browser makes it APPEAR like it’s a single process by causing the plugin/activex to DRAW itself in the screen area containing the web page, but you understand its smoke and mirrors and z-ordering is practically ignored. It draws the web page (including menus) and THEN it causes the plugin/activex to draw.
The only way around it (and doesn’t always work) is to wrap the html menu in an iframe.

I wanted to expand on the issue here. The answer provided by WilliamK is kind of in the right direction but doesn't really explain the real cause of the problem nor does he provide an adequate solution.
The main cause of the problem is the fact that some UI elements are rendered in a windowed context (vs. windowless) which basically means that it's rendered in a separate OS-level process which takes place on top of the browser and not within the browser. This follows what WilliamK was trying to explain, except browsers these days are multithreaded so "out-of-process" doesn't tell the whole story. Here's a great explanation of windowed vs. windowless.
An easy solution to this is not to render something within an iframe, but to have an iframe sitting behind any content you want rendered on top of another windowed object. This is best explained by example. Assume that the <object> is some ActiveX or Flash object rendered in its own windowed context:
<style>
.overlay {
position: absolute;
/* adjust for your site - values shown here are arbitrary */
width: 600px;
height: 600px;
top: 100px;
left: 100px;
z-index: 1;
overflow: auto;
}
.overlay-content {
position: relative;
z-index: 2;
}
.overlay iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<object ...></object>
<div class="overlay">
<div class="overlay-content">This is content you want to appear on top of the windowed object</div>
<iframe border="0"></iframe>
</div>
</body>