We Keep Coding

Ho do i change my component element size on a table?

i would like to know, how (and if there is) a possibility to resize a component imported in another page in Angular.
Here is what i have:
I created a button component so that i could reuse it wherever i wanted (let's call it component A)
I created a table on another component (let's call it component B).
Now if i import the component A on my table cell (situated in component B) i can not move it. I can't dynamically change his position. For reference i am using ng zorro table and in the <td> tag i put nzAlign="center" property. But it does not work the button is not being centered on the cell. As you can see here in the picture the <app-delete-btn> element has more width than the button itself and that is why is not getting centered. Thanks to whoever responds to this!
Button Image

I fixed the error by changing the style of class .ant-btn in my style.css. so for class .ant-btn, add css properties display: flex, margin: auto and align-items: center that way the button takes only the width of itself therefore it works on table. But thanks guys for the tips!
.ant-btn{
display: flex;
margin: auto;
align-items: center;
}
And then used nzAlign to align the button in the center on table.

Text content overflow its element tag

Here's the code. It's in Angular if that has something to do with it. The actual text height is overflowing the element that contains it.
#website-title {
text-align: center;
// font-family: "Roboto-Mono";
font-size: 50px;
margin: 0;
position: absolute;
top: 50%;
}
<p id="website-title">Poll App</p>
result:
I want the element to be the height of the content.
UPDATE: Narrowed the problem down to Angular Material. Everything is fine before doing ng add #angular/material. Then after adding material and restarting the server, I get the problem.

Be default, the p tag will expand to fit its content. So unless you have explicitly set the p tag height to be smaller than the text content, the text will not overflow.
Try checking to see if you have set a height on the p tag.

I found the solution but I don't know why it fixes the problem.
The problem had to do with Angular Material's typography (Angular material was installed). Sol'n - Go to index.html and remove the class="mat-typography" from the body tag.

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;
}

Tabindex and overflow:hidden

I have a problem. I have an Instagram feed by Instagrams API, which pulls image, likes, comments and description. The description under the image is shorted by this css:
#instagram-feed .meta-data p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
}
I have also added a script which creates links on hashtags, so you can click them directly in the feed.
This works great. Until you are starting to tab the page. Since the text/hashtags is hidden after one row, it is still in the HTML-structure, just not visible.
So what happends when I am tab the the page and get to the Instagram feed is that the tabindex finds the hidden hashtags. But they are invisible. Only the focus frame shows around the hidden hashtags.
tabindex="-1" removes element from tabindex which I want to add to overflowing/hidden links, but I can't do this manually since the description is dynamically created. I need better CSS (If possible) or somekind of jQuery. But I have no idea how.
So my question is, how do I remove hidden links from tabindex? :)
Edit:
Trying this to see what elements is inside or outside the parent:
http://jsfiddle.net/fprm7mgd/8/. The link inside the third paragraph should be red.
On the site the position().left; in the third p is something like 670px, when running console.log. But in reality the a is about 130px right from its parent left side. It seems like position().left; goes from parent div, not from parent p...

The solution is to add... position:relative ... to the paragraphs.
position().left use its offset element, which in this case is <html>. In other words, position().left works exactly as position: absolute in CSS. If the parent is not position: relative it counts from the <html>-element.
Solution: http://jsfiddle.net/fprm7mgd/47/

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.

If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.