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!

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.

Bootstrap-select misplacing list when using data-container

I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.

This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.

Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422
What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.
Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.

just add the position: sticky; in bootstrap-select.css to the below class
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: sticky;
}

Newbie CSS needs help debugging

This is my first post to Stack, I'm having trouble debugging some CSS errors on a project I am working on. Here is a link to the page:
http://musiccomputing.com/copy-of-studioblade-5-61-key-macos-x/
You can see how the thumbnails seem to repeat, and there is some text jumbling on the right side, this is what it should look like: musiccomputing.com/studioblade-5-61-key-macos-x/ (sorry they wouldn't let me post more than 2 links).
I was working on adding a "tabbed" section under the product description. Here is the code I added which caused the aforementioned issues to occur. http://pastebin.com/JhbbmFTb. I have been trying to debug this with Pesticide and Firebug, but unfortunately I am still learning, so decided to turn to you guys who I know could solve this fairly quickly.
(by the way this is on a Bigcommerce platform)
Any help is much appreciated.

On your working version - your select boxes are wrapped in a div with a class of selector. This class on the parent is assigning the following CSS to the select box which fixes the styling issues:
div.selector select {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
border: none;
background: none;
cursor: pointer;
height: 100%;
}
Add the parent back - or add a new parent with a class of .select and the boxes will display correctly again.
Edit
On your thumbnail viewer there is a class of "ProductTinyImageList" with some styles that are being added dynamically - probably via JavaScript.
When looking in the console on your site there is also an error on line 12 of init.js - this error is probably what is preventing the rest of your JS from executing and probably what is breaking your thumbnail viewer.
The first thing I would do is fix that JS error - then retest.

Reason for a mysterious padding breaking my design?

I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?

You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.

Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.