I am working with this example to try and learn Sencha Touch. I have what should be a very simple request, but I am stumped. Does anyone know how to remove the empty category on the home screen (middle of top row, or second from the left)? I have been combing through the code and cannot figure out where this is being configured.
http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
Thanks for your help
Did you try to inspect the elements with Chrome/Safari Developer Tools? If you had, you would get the simple solution instantly. However, here is the the css which is making that extra space:
body:not(.x-phone).x-landscape .categories-list.root
.categories-list-item:first-child {
margin-right: 345px;
}
Make it margin-right: 0px; and it will work.
Related
I'm using gulp with postcss/autoprefixer and have the browserlists list set up as a .browserslistrc file and that's all working well but when it comes to Safari and using flexbox I'm still getting this issue...
Safari then completely ignores flexbox as it seems to have an issue with the display duplication. I have the browserslist query set as Last 2 versions.
Any thoughts?
Ran into this issue myself, ended up playing around and figured out if you put the css properties in the correct order it seems to solve the problem:
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
so my Website broke. It works fine everywhere except in Safari.
At first I thought it was a mistake during an update - but then I remembered I had an older Version of it (I know this had no displaying issues what so ever) and tested it with Safari (8.0.5 | and mobile)
THE SAME PROBLEM APPEARD.
I have no idea what went wrong.
the page I am talking about. www.platzhirsch.wien
please help
EDIT: This might have appeared after the recent automatic wordpress update
In the CSS you need to use:
display:-webkit-flex; /* for Safari */
display: flex; /* for others */
and add the -webkit- prefix to any other flexbox properties you are using. e.g.:
-webkit-flex-direction: row-reverse; /* for Safari */
flex-direction: row-reverse;
I'm creating a windows 8 app and need to create a vertical slider that also displays tick marks. I'm able to get the range slider to appear vertically by appying the windows specific class: win-vertical.
There are also psuedo-selectors for input[type=range]::-ms-ticks-after and input[type=range]::-ms-ticks-before but I cannot find any documentation on how to use them correctly and any rules I add to them seem to not do anything. Any help would be greatly appreciated. Thx
Have you tried the -ms-track selector? Detailed here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465813.aspx
I tested this in IE10 (should be equivalent to Windows 8) and I am able to set the tick marks to red using the following CSS.
input[type=range]::-ms-track { color: red; }
I'm usin Sencha Touch 2, I need to change the default border-radius for the buttons in my app.
How can MAKE IT? PLEASE PROVIDE ME A SAMPLE OF CODE.
THANKS
I would try something like this :
.x-button {
border-radius:0.2em !important;
}
Only if you are sure you wanna change the border-radius of every single button in your app.
Hope this helps
include
$button-radius: '2px';
in your custom-theme.scss file
then compile the scss file using the command compass compile.
Since LESS is a pre-compile stylesheet language, this may not achieve what I'm after, but the idea is:
#sidebar {
width: 40%;
}
#sidebar_width : #('#sidebar:width');
.some_other_elements {
width: #sidebar_width;
}
So there are three questions I have:
Is something like the above possible? I just discovered LESS and the documentation is making me carsick.
If the above is possible, will it produce CSS with the .some_other_elements set to 40% or the actual width of the sidebar? Is it possible to get the actual width using LESS?
If you can give me your opinion of the library in general along with the answer or comment, I'd like to hear it. It seems a bit much but maybe it's the next jquery and I need to adopt it sooner than later (or conversely, maybe it's the next YUI and I should forget I ever saw it).
That won't work. You can't cherry pick out values from a selector and turn it into a variable: You would have to do something like:
#sidebar_width: 40%;
.some_other_elements {
width: #sidebar_width;
}
the width of the sidebar will be set to 40% of the width of the parent container.
While this is true if you precompile, keep in mind LESS does actually let you access the JS environment. So if you compile server side using Node you could do something similar to what you are trying since you can access parts of the document. It may even work if you compile it on load using the .js (though I would not recommend this for a variety of reasons) The example from the documentation:
#height = `document.body.clientHeight`;
Might be something worth looking into for what you are trying to accomplish.