View Full Version : How re ove spacing between toolbar items

4 Jan 2012, 1:11 PM
I'm looking an idea for remove margins and spacing from toolbar items. Is it the sass solution the only way?
thanks in advance

4 Jan 2012, 1:25 PM
IMO, using SASS is the way to go to style both your CSS and Sencha CSS. Sure you can write your own CSS and do !important to override Sencha CSS, but once you start using SASS you'll realize hand-writing CSS sucks.

4 Jan 2012, 1:30 PM
Thanks for the answer. Only one question. If I have one toolbar only where I must remove the spacing, how I can do? Can I extend toolbar and after can I use a ccs style tag in my main HTML file? If yes, is there an example please?
Thanks a lot!

4 Jan 2012, 1:36 PM
Give that instance of toolbar a cls property. We do this all the time. Then you can override toolbar properties for just that instance. He is a sample of our SCSS (we use c- for our application prefixes). The green below shows us overriding Sencha styles.

.c-registration {

.c-confirm-field span {
color: #999;

.x-form-fieldset {
padding: 0em 0.5em 1.5em 0.5em;

.x-layout-fit {
overflow: visible;

4 Jan 2012, 4:41 PM
I will try it tomorrow.
Thanks a lot!!!!!

5 Jan 2012, 2:05 PM
I've tried and I have seen that it is possible to use the 'style ' property also and not 'cls' only. Is it true? I don't understand the difference... With my test I have changed the toolbar background color and it's padding. In this last case, for example, I have moved my textfields to bottom or to right in my toolbar but I don't understand how move them to upper or to left without toolbar borders. With left toolbar padding to 0 my field is not located to the max left of the toolbar. Is there always a margin....
Thanks again for your very important help...

I'm trying to add a toolbar to michelsimoens grid like the image attached in this topic http://www.sencha.com/forum/showthread.php?150431-Ext.ux.touch.grid/page3 but the toolbar has some fixed spacer and margins and when I try to resize it my fields are not aligned with the below columns... If I can remove the margin and the spacer I have not resizing problem when set my fields width equal to column width...

6 Jan 2012, 8:01 AM
I would try to avoid using style as you are now defining CSS in your code. Using cls allows you to completely customize using SASS and you don't have to change code for each client. We also try to avoid using margin and padding settings in code.

Don't be scared of using SASS. Once you set it up and running it is some much better than straight CSS. Here is some reading for Ext JS 4 but the concepts are the same for Touch:


(http://docs.sencha.com/ext-js/4-0/#!/guide/theming)I have a structure I start every new project with. I might try and package it and put it in the Q & A section today.

9 Jan 2012, 10:36 PM
I've change my prospective of the problem, but thanks very much for your help!