I am using dojox.form.DropDownSelect (not filtering select) in my page. But I am not able to restrict the height of the dropdown. I tried using size, maxHeght etc. but the drop down leep growing as the list grows.
Is there any way to restrict the height?
I don't know if there is a convenient, documented, way already there. Did you just try to guess things or did you actually search the API reference?
In case there is not you could try inspecting the generated dom structure through Firebug. There is probably a div ot table somewhere in there that you can limit the height via a css rule.
#that_drop_down .class_of_the_convenient_div {
height: 500px;
}
Related
I'm trying to increase the width of the searchbox in Shopify timber framework but having problems. The padding can be increased, but the input field stays the same size. Any suggestions will be greatly appreciated. Thanks!
The quick answer is to find .site-header__search in timber.scss.liquid (found in the assets folder) and remove the line max-width: 400px. This will let the search box take up 100% of it's parent width.
If you want to adjust it further than that, you can adjust the grid item sizes in the header. See the image below and notice the grid__item divs:
There you'll see large--one-half large--text-right medium-down--hide. large--one-half is what dictates the container size on your large breakpoint. Change that to something like large--two-thirds and it'll get wider — though be sure to also adjust the div right before it to large--one-third, otherwise your search grid__item will stack below your shop name/logo.
See the full Timber docs to get a better understanding of the grid as well.
When implementing a gadget, is there a setting that would tell blogger to display the gadget in a post (or on a homepage) only?
I know that one can add conditional tags to the template html but that's NOT what I'm after. I need to figure out a way how to do this via the gadget's code so that the end user doesn't need to interfere with any code to achieve the effect.
I've figured that this isn't possible.
A workaround I've come up with is to set the gadget's default height to 0, then use javascript to find out whether we're on a homepage or an individual post and then, depending on the requirement, resize the gadget to the desired height. In such case, it is necessary to include the <Require feature="dynamic-height"/> in the ModulePref section of the xml file and use the gadgets.window.adjustHeight() function.
The caveat with this workaround is that the gadget, event when its height is set to 0, will take at least 10px in height.
based on the custom-player-examples im building my own player.
i used the minimal-player template.
after i set up the player like i want it to be, i started to customize the design (color.css, structure.css, standard,css)
but now i am stuck badly..
i found out that i cant change the background-color of the waveforms unless i use a webkit or the waveform.js.
the webkit should do just fine for me...
my only problem is,
i dont know how to acess the track.waveform_url in neither my index.html or *.css files.
i know its inside waveform-container div but i need the url
.wavekit{
-webkit-mask-box-image: url(**IN HERE!!!**);
background: #81D8D0;
height: 280px;
width: 100%;
bottom: 0px;
position: fixed;
}
inside my stylesheet..
sadly i cant provide a link because its only on my hard drive yet
can somebody please help me out here?
thank you verymuch
Well, this is very hacky, but after a couple of attempts I haven't found a better way to get waveform URL.
Idea is that for first play there is an event of 'ajaxSuccess' that is firing and for the next ones there is 'scPlayer:onAudioReady' event. The point being that image’s DOM is being generated by the plugin only at some point, so we need a certain “hook” like an event to know for sure the image will be already present in DOM.
$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
// get image from DOM of player
// it will be re-set every next play
console.log($('.sc-waveform-container > img').attr('src'));
$('.wavekit').style({
'-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
});
});
Here's working example http://jsbin.com/uhofom/2/edit (only tested in Chrome)
Custom player project is outdated and will probably not get much attention. Its current state is not very extendable from the JavaScript point of view.
My suggestion would be to use something like Audio5JS or SoundManager2 to play music and to have custom HTML and CSS UI. To get actual sounds or sets data you could query our HTTP API or use SoundCloud JavaScript SDK. Then you'd have proper object with all data including waveform API and would control the process much better.
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.
i guess maybe using javascript im gonna do it.... but if anybody knows a better and faster way to do it .. easily im gonna appreciate any ideas...
thanks!...
this is to make impossible for a user to view badly the page increasing the text or doing something like a zoom in the browsers ...
ive got some QA engineers asking me that .....
thanks!
This is a very bad idea from a usability/accessibility point of view. Please don't do it.
Even if you block that key combination, the user would still be able to increase the zoom level via the "View" menu.
You haven't given a good reason, I doubt there is one, so I agree that you shouldn't do it. It's a fun little challenge though, so I have a possible answer, though I don't really know if it would work.
First, have a font-size: 70% or whatever percent you want in an outermost containing element.
Then, create a dummy testing element with:
display:block;
position:absolute;
visibility:hidden;
font-size:1em;
font-family:Arial;
Find the actual height of the element (say, 25px) and then test it over and over again on a timer (window.setInterval()). If it doesn't match, change the font-size percentage on the outer element until it does.