I am New In sencha -touch and need your help.
I add new panel and want to set the height of this panel in css.
this.clockContainer = new Ext.Panel({
id:'clock',
html:'00:00'
});
#clock {height:142px}
however,sencha calculates the height style to 91px (according to the html content) and ignores my css.
I dont want to add the height property to the panel like this:
this.clockContainer = new Ext.Panel({
id:'clock',
html:'00:00',
height:'142px'
});
what can I do?How can I prevent sencha calculates the height?
thank you.
edit: if I set the height property to '142px' it works fine but if I set it to '8.06em' senchs ignores it and calculate itself.
You need to add a cls attributes to your Ext.Panel like so
this.clockContainer = new Ext.Panel({
id:'clock',
html:'00:00',
cls:'clock-panel'
});
Then in your CSS you add this
.clock-panel .x-panel-body{
height:142px;
}
Hope it helps
Related
Disable width and height fields from image properties I am using ckeditor 4
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', {allowedContent:'img[!src,alt];'});
By using above method it shows only image properties with width and height hidden and rest of the controls also get visible false. Kindly suggest me a solution for disabling the width and height fields from image properties windows.
Thanks in advance.
I'm not sure I entirely understand your question. It seems you want to hide the fields that allow input of height and width. Your initial solution doesn't seem to affect the dialog box, but what content gets saved. These are very different kinds of solutions. My answer assumes you're seeking to alter the image properties dialog box fields.
Based on this earlier question, I recommend adding the following configuration:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtWidth' ); // Remove width element from Info tab
infoTab.remove( 'txtHeight' ); // Remove height element from Info tab
}
});
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.
I am using Jquery UI like this:
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
});
$('.ui-multiselect').css('width', '100px');
What I'd like to do is set the .ui-multiselect for only the #companyType div. Something like this:
$('#companyType.ui-multiselect').css('width', '100px');
Is there a way to do this?
Thank you!
Try this code with minWidth option. It is the minimum width of the entire widget in pixels. Setting to “auto” will disable, and the default is: 225
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
minWidth:100
});
not sure what version you use, but v1.5 includes a new "classes" parameter that you can set for styling your multiselect element.
Have a look here on how to use it :
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
it says
Additional class(es) to apply to BOTH the button and menu for further
customization. Separate multiple classes
with a space. You’ll need to scope your CSS to differentiate between the button/menu:
Example
$("#companyType").multiselect({
classes : "myClass"
});
then in the css file use:
/* button */
.ui-multiselect.myClass {}
/* menu */
.ui-multiselect-menu.myClass {}
If you want to set that particular css rule for only elements with class .ui-multiselect contained in the div #companyType I think jquery ui has no influence in it.
Try this:
$('#companyType .ui-multiselect').css('width', '100px');
This will set width = 100px to all elements contained in #companyType that have a class 'ui-multiselect'
Another simple method for adding width to the multiselect list box is like these
It is easy than adding another class or inline styling
$('#companyType .ui-multiselect').width(200);
This will set a with of 200 px to the specified list box
For the reference, if you want to a percentage for the width (e.g 100%) apply it within resize event of the window.
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', '100%');
});
You can also assign it to another element's width dynamically:
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width'));
});
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/
Here is the problem. I've created custom RectangularBorder and set it as border skin for TitleWindow. After this manipulation inner content of window is starting at 0,0 point of it. How could I set offset of it?
Just setting top padding does not work because scroll bar still begins from the top of the window after this manipulation.
There are lots of problems with trying to skin panels in Flex 3, and TitleWindow inherits from Panel.
This is the best explanation I've seen. (I'm not the same Glenn referenced in the italics :)).
For programmatic skin it went out pretty simple. One should override function get borderMetrics to do so:
public override function get borderMetrics():EdgeMetrics
{
var borderThickness:Number = getStyle("borderThickness");
var cornerRadius:Number = getStyle("cornerRadius");
var headerHeight:Number = getStyle("headerHeight");
return new EdgeMetrics(
borderThickness,
borderThickness + headerHeight,
borderThickness,
borderThickness);
}
try to use padding-top , padding-left etc as a style for your TitleWindow