search

David-Desmaisons / ComponentFixture

🛠️Interactive sandox playground for vue components
https://david-desmaisons.github.io/ComponentFixture/
MIT License
51 stars 6 forks source link

Too agressive styles #15

Closed kalex375 closed 5 years ago

kalex375 commented 5 years ago

Hi. this line breaks down component style https://github.com/David-Desmaisons/ComponentFixture/blob/9242f665d4ac6c7e64b5dc68cb6d848443e0c12f/src/components/Sandbox.vue#L171 Also dist css file include bootstrap which also overrite components styles and components look different For such project type better use only scoped styled componets

I very like this project but I can use it due these issues

David-Desmaisons commented 5 years ago

Hi @kalex375 , thanks for your feedback. I am aware that component styling could be improved and I will work on it shortly. Regarding the problem you mention: 1- why not overriding the heigth with css rule of higher specificity? 2- In what context are you using ComponentFixture, that explain the style problem with bootstrap?

David-Desmaisons commented 5 years ago

Version v1.10.0 removes bootstrap dependency

kalex375 commented 5 years ago

Thanks. Now component doesn't affect application's styles. But tested component still have 100% height. It's not normal flow for tag. By defaulf height should be 'auto'. Also wrapper '.component' is flex and affects height of component. So to reset I need set .component { align-items: flex-start; .real-component { height: auto !important; } }

For example I rty test component 'riophae/vue-treeselect'

Thanks.

David-Desmaisons commented 5 years ago

I am working on this, I will provide a solution that will allow to resize the element

David-Desmaisons commented 5 years ago

@kalex375 , version 1.11.0 introduce componentHeigth and componentWidth to size the component under test. It allows also interactive resizing:

resizing