We Keep Coding

Why does an image render badly in angular 2

First of all i'm sorry if my english doesn't make much sense, is not my first language. Ok, so my buddy and i are making a template in angular 2/6 for the data disclosure consents for a loan simulator, we have a couple of notifications when the user says "No" to each consent. Those notifications are made of an icon (image stored in "assets" folder) and some text, and they appear when the user checks the radio marked NO. The problem is that when the page loads, the first time a user clicks no the image of the notification appears with the wrong width, then if the user checks YES and goes back to NO, the image appears fine; is just the first image shown, it doesn't matter which radio is checked. Any ideas?
PS: the image is put as a background in CSS on a span preceding the text of the notification.

Solved it! not much of a mistery, actually a rookie mistake, i removed the span and put the image via CSS into the container itself (and added padding to the text) and it worked. I can't exactly explain why it didn't work when adding an empty span with the icon. The result was this:
HTML:
<div class="aviso">Text content of the warning</div>
CSS:
.aviso{
background-image: path/to/image.jpg;
background-position-x: 2%;
background-position-y: 30%;
padding: 8px 15px 8px 35px;
}
that did the trick! Thanks!

TagInput Tag Input - Mutli line input field

I will happily accept guidance/pointers/ideas if you don't have a complete response.
I am currently working on updating an Email system built using React and elements of Blueprint JS.
In the email dialog, I am attempting to move the To and CC fields from being a text input to a TagInput system using BlueprintJS/labs' TagInput.
http://blueprintjs.com/docs/v1/#labs/tag-input
You will see in the example contained in the link above, that their TagInput field will allow you to add new Tags to the input field. Once the length of those tags exceeds the width of the input field, it will add a new line to the input field and allow you to continue adding tags.
From my knowledge, input fields do not normally allow for multiple lines.
How can this be achieved? In my code currently, once the tags exceed the width of the input field, it will continue to add new tags on a new line below the input, however, it will not increase the height of the input field to compensate. (Giving the appearance of tags floating magically outside of the input, hovering over & obstructing other content.)
The image below shows the effect. (The CC field is the TagInput - as you can see, the tags below the first line just 'hover in space' and cover the subject field, and eventually move down to cover the email body.)
The TagInput is simply defined..
<TagInput
className='pt-fill pt-input-ghost'
onChange={(cc: string[]) => this.setState({cc})}
values={this.state.cc}
inputValue={this.state.cc_input}
placeholder='CC:'
leftIconName='document-share'
/>
Also, I have a little bit of modified CSS
.pt-input{
overflow-wrap: break-word;
}
.pt-tag-input{
padding-bottom: 2px;
}
.pt-tag {
margin-bottom: 2px;
margin-left: 2px;
}
.pt-tag-input-icon{
margin-right: 2px;
}
.pt-input-ghost{
border:none;
outline-style:none;
outline:none;
box-shadow:none;
border-color:transparent;
margin: 2px 0px;
background-color:transparent;
}
.pt-input-ghost:focus{
border:none;
outline-style:none;
outline:none;
box-shadow:none;
border-color:transparent;
background-color:transparent;
width: auto;
}
Thanks for all the help :)
Again, I will happily accept guidance/pointers/ideas if you don't have a complete response.

A few notes about the TagInput implementation: it's not actually an <input> element, just styled to look like one! The component is actually a div full of tags with an <input> at the end for you to type into.
The default styles of the component allow its height to grow to fit the content, which may wrap to multiple lines.
Your screenshot suggests that your app has some styles (not quoted above) that prevent the TagInput from growing as it should, so the tags spill out and cover the content below.

Background colors not touching from two lines of text

I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>

You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>

As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.

Elfinder: Add a close button

I'm trying to add a close button to Elfinder. I'd like the placement to be to the right of the search box where close buttons usually are.
After the elfinder init, I do this:
$('.elfinder-toolbar').prepend('<a class="elfclose"><div class="elfclose-bg">×</div></a>');
The Css:
.elfclose {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
text-decoration: none;
float: right;
}
$().prepend should put the elfclose div as the first element under the toolbar, but the search box is always first.
I believe it's caused by Elfinder prepending after me... Is there a way I can say do this after the other div exists?

Just FYI, I did figure this one out...
The search box is added by Jquery after init, so you have to put a delay after the prepend. I tried checking for the existence of the search div (which would be better), but it turned out to be too much work. No one's going to notice a .2 second delay. To paraphrase Larry Wall, your code is correct if it gets the job done before your boss fires you.
I'm in Angular, hence the $compile directive:
var close = $compile('<a class="elfclose" ng-click="closeFileBrowser()">
<div class="elfclose-bg">×</div></a>')($scope);
$timeout(function(){$('.elfinder-toolbar').prepend(close);}, 200);

div containing a chat, focus on last entry

I want div containing a chat, similar to facebook.
If the text content gets longer, ther is y-scroll, but:
The focus shall be on the newest chat entry
A very long word should do a line break
js fiddel code
CSS
.chat{
width: 230px;
height: 310px;
margin-left: 10px;
background-color: grey;
border: solid 1px black;
overflow-y:scroll;
}

You have to scroll to the bottom when a new message comes in and you have to use JavaScript to do it (there might be a clever CSS way I don't know, though).
If you're using jQuery (and I'd recommend you do), you can do it something like this:
// when a new message comes in...
var $chat = $(".chat");
$chat.scrollTop($chat.height());
You might want to change the selector from $(".chat") -- that will probably scroll all chats, which you wouldn't want.
You can also do it with vanilla JavaScript:
// when a new message comes in...
var chatEl = document.getElementById("#mychatelement");
chatEl.scrollTop = chatEl.scrollHeight;

For a scrolling part refer to jQuery Scroll to bottom of page/iframe
As for line brakes - it should be like this automatically.