search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.28k stars 6.73k forks source link

Carousel images break Bootstrap default styles #6524

Open ghost opened 7 years ago

ghost commented 7 years ago

Because of your module's mechanism, inserting a div.text-center in the .item element, it is breaking the .carousel-inner > .item > img, .carousel-inner > .item > a > img CSS declaration of Bootstrap.

Besides, I don't really understand the utility of this layout modification. Why did you add this HTML element?

WVWillHall commented 7 years ago

Just override the template.

https://github.com/angular-ui/bootstrap/blob/master/template/carousel/slide.html

ghost commented 7 years ago

Inspect here (in your official documentation page) the element.

Answer for your previous non-edited message: "Can you show me where the text-center is being added?".

ghost commented 7 years ago

Answering your edited message:

Anyway, the presence of this HTML template breaks the default styles.

WVWillHall commented 7 years ago

I think the reasoning for the containers existence is for something to attach the ng-transclude to. I'm not sure what the reasoning for the text-center class is though.

ghost commented 7 years ago

I know this reason, it's right, and I'm aware of it. But it's not ok to merge an element with a new nesting level, converting styles to: .carousel-inner > .item > .text-center > img, .carousel-inner > .item > .text-center > a > img.

WVWillHall commented 7 years ago

Feel free to figure out a solution (other than editing the template) and open a pr...

My guess though, is that once upon a time it replaced the container, and since replace was deprecated it was removed.

You can just utilize the mechanism provided to you to override the template.

<script type="text/ng-template" id="slideTemplate.html">
  <a href='javascript: void(0);' ng-transclude></a>
</script>
      <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" template-url="slideTemplate.html">

Also, chill out.

ghost commented 7 years ago

I'm opening this issue because it's ridiculous the trouble caused by this so used library. So, the code's developer should be responsable to make a coherent mechanism. I do not want to misinterpret your message, but it sounds offensive to me.

All solutions you are offering are really a botched jobs. Also, javascript: void(0); is a simple demostration that you do not know AngularJS or Bootstrap effectively.

WVWillHall commented 7 years ago

Alright, well have fun being a developer. You sure seem like you are one of the good ones.

ghost commented 7 years ago

Do you have any mental problem!? I'm not "one of the good ones" (like you said) but I try to be a good professional and avoid developing incoherently or creating problems with my code to another ones!