Product thumbnail not showing properly

[tahniat-ashraf]

Product thumbnails are looking weird in my development server. View Details and Cart Option are not showing properly within the thumbnail.
Image Link : http://imgur.com/a/tTjcB

Using the latest angular/cli. Below is my package.json =>

package.json

---

package,json.txt

angular-cli.json

---

{
"project": {
"version": "1.0.0-beta.15",
"name": "angular2-store"
},
"apps": [{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.sass"
],
"scripts": [],

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

}],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "sass",
"prefixInterfaces": false
}
}

Looking forward to your help. Other than this issue, the site looks amazing !

[AH72KING]

Image that is not showing is cart image
for that you have to change angular-cli.json file little bit

just change
"assets": "assets",

To This

"assets": [
        "assets",
        "favicon.ico"
      ],

and do npm install or ng update if your using angular cli as global

[caroso1222]

The project has been upgraded to Angular 5. I couldn't replicate this issue in this new version. Can you please try again and double check if the issue still remains? I'm happy to reopen the ticket should you still have trouble with this.

[tiedyejedi]

I'm experiencing the same issue with the scrollbars in the product thumbnails like in the image above. However, the shopping cart icon is showing. I'm new to Angular as of 2 weeks ago so, everything is fresh to me. I'm running: Angular: 5.2.1.

[caroso1222]

Hey @tiedyejedi thanks for the report. Mind sharing a screenshot of how it looks like on your end? I'm on Mac so I can't easily replicate the behaviour. Thanks!

[tiedyejedi]

localhost:

your demo looks fine...

worse when page is shrunk...

demo is still fine....

I did notice this warning in Visual Studio Code:

Your global Angular CLI version (1.7.3) is greater than your local
version (1.6.5). The local Angular CLI version is used.

Never seen that before and I probably just didn't see it yesterday when I
installed your shopping cart. Also, I downloaded the github file rather
than use the CLI.

[tiedyejedi]

Update:

removing this style fixes it:

position: relative;

in the .info and .wrapper classes of the product-thumbnail.component.sass file.

So, my wrapper is now:
.wrapper{
border-radius: 5px;
box-shadow: 0 5px 5px;
text-align: center;
display: block;
background-color: white;
box-shadow: 0 6px 17px rgba(0,0,0,0.07);
}

and deleted the .info one as the position was the only thing in it.

The best seller tag is removed, but I don't want that anyways. In fact, I'll be removing a lot more features. I don't need a search or order by. Not sure if it's possible, but making it more modular would help, IMO. That is, if it's even possible.

I do like this shopping cart. Very well done! I do hope I can get it to work in my app, but at least I got a demo working on my server, so we'll see.

[caroso1222]

Hey @tiedyejedi thanks for the follow up! Glad you figured it out. Yeah, the project isn't well organized actually, sorry about that. It was really not meant to be, I built it super quick and shoot the code here :D thanks again for the feedback, I'll use this to fix the scrollable thing.

[tiedyejedi]

No problem about the organization. I like figuring things out. However, I just noticed my "fix" breaks the view details aspect of it, which is critical, but maybe something I can work around.

[caroso1222]

I wonder, what if you try setting overflow: hidden to the .info class? if that won't work, try also in the .wrapper class although that may hide the best-seller tag (but you don't need it anyways). Keep the position: relative if that's breaking the detail view. Disabling the overflow might do the trick to hide those scrollbars.