How to place typeahead results above the text input ? The best for me would be adding an option to this widget or maybe some css rule ?
At this moment i finally used jQuery solution in render event of typeahead widget, by modifying css margin-top after each render. Here is the code:
echo Typeahead::widget([
//(...)
'pluginEvents' => [
'typeahead:render' => 'function(event,ui) {
var ttMenu = $("#search-main .tt-menu").first();
var ttMenuHeight;
if($(ttMenu).hasClass("tt-open")) {
ttMenuHeight = -$(ttMenu).height();
$(ttMenu).css("margin-top", ttMenuHeight - 70);
}
}',
],
//(...)
]);
'#search-main .tt-menu' is my selector for typeahead input, and this "70" is height of this input so be sure to replace it with your own.
Hope it helps.
Related
When Gutenberg creates a class, it seems to be of the format
div.wp-block
div.editor-block-list__insertion-point
div.editor-block-list__block-edit
div.editor-block-contextual-toolbar
div
<your actual block html goes here>
I'd like to be able to add a class to that top div.wp-block element so I can properly style my block in the editor. The class is dynamically generated based on an attribute so I can't just use the block name class. Is there a clean way of doing this? I can hack it using javascript DOM, but it gets overwritten quickly enough.
https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#editor-blocklistblock
const { createHigherOrderComponent } = wp.compose
const withCustomClassName = createHigherOrderComponent((BlockListBlock) => {
return props => {
return <BlockListBlock { ...props } className={ 'my-custom-class' } />
}
}, 'withCustomClassName')
wp.hooks.addFilter('editor.BlockListBlock', 'my-plugin/with-custom-class-name', withCustomClassName)
You can add class in your block edit view by using className that is present in this.props, className will print class in following format wp-blocks-[block_name]
edit( { className } ) { // using destructing from JavaScript ES-6
return <div className={ className }></div>
}
Suggestion
Always try to look for manipulating DOM via React instead of manipulating DOM directly because React manages it's own state and issues can occur by manipulating DOM directly.
html
<p> Tags:<input name="tags" id="tags" /></p>
jquery
$('#tags').tagit( {tagLimit:3});
I want to control the size of input field,how can i do that ?
If you look at the dynamic HTML that is generated by the tag-it plugin, ul.tagit is the class assigned to the UL that is generated. So to set the width to 200px in your CSS set:
ul.tagit {
width: 200px;
}
(function( $ ) {
$.fn.extend({
tagit: function (params) {
return this.each(function () {
console.log(params);
console.log(params['tagLimit'] );
$(this).attr('maxLength', params.tagLimit );
$(this).parent().css('maxwidth', params.tagLimit );
$(this).parent().css('width', params.tagLimit );
});
}
} )
}( jQuery ));
But you can do it directly by jQuery too, like below:
var _width = 3;
$("p input").each( function() {
$(this).css('width', _width);
$(this).css('maxWidth', _width);
})
Since I had tag-it being used in multiple places, I decided to do it in Javascript. The size needs to be big enough that it doesn't do to a double line when you add tags to it. The basic code is:
// adjust tag it size
$("ul.tagit").attr("style", "width:450px;")
Offcourse, you can decide to choose something other than 450px.
However, I also wanted to line it up with other jquery-ui buttons, which I styled with ul, instead of li, so they would have a fairly snug fit with the search box. The bottom margin needs to be adjusted to have it line up more precisely with the buttons. Here is the code for that.
// adjust tag it size and line it up with buttons
$("ul.tagit").attr("style", "width:450px; display:inline-block; margin-bottom:-10px")
How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?
Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.
Is there any other way that we could perform this while view element is getting rendered?
didInsertElement: function() {
this._super();
var personStr= this.get("content").person;
if(personStr==1){
this.$("img").addClass("add-person");
this.$("img").removeClass("view-person");
this.$("img").removeClass("edit-person");
}
}
You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.
See an example here http://jsfiddle.net/pangratz666/b4xGP/:
Ember.CollectionView.create({
content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],
itemViewClass: Ember.View.extend({
templateName: 'item',
classNameBindings: 'beginsWithA'.w(),
beginsWithA: function() {
var name = this.getPath('content.name');
if (!Ember.empty(name)) {
return name.indexOf('A') === 0;
}
}.property('content.name')
})
}).append();
jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};
jQuery UI makes buttons look nice with $('button').button();.
Is there an equivalent for text input boxes?
There's nothing to stop you from doing $("input").button()... I like this:
$('input:text, input:password')
.button()
.css({
'font' : 'inherit',
'color' : 'inherit',
'text-align' : 'left',
'outline' : 'none',
'cursor' : 'text'
});
A fuller example.
Add the class ui-corner-all to your input and post-style the input with CSS.
$('input').addClass("ui-corner-all");
http://jsfiddle.net/TTShr/
I know this is old. But, if anyone is just looking to style their inputs to look more UIish, just add the following classes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");
You could just hard code the classes too.
To sum things up I would like to add my implementation:
$('input:text, input:password, input[type=email]').button()
.addClass('ui-textfield')
.off('mouseenter').off('mousedown').off('keydown');
The CSS would be:
.ui-textfield {
font: inherit;
color: inherit;
background: none;
text-align: inherit;
outline: none;
cursor: text;
}
See it here: http://jsfiddle.net/UXdLQ/1544/
I had the same problem, I came up with the following solution. Use these classes on your input field:
ui-widget ui-state-default ui-corner-all
You may modify the padding - f.e. if you select elements on your site - to be unified.
jQuery UI v1.11.4
also add a .off('keydown') to Corin's answer to prevent the box from turning white when enter or space is pressed.
The example in your question cites jQuery UI's Button widget. The idea of this widget is to have a range of options including ease of theme-ing. There is a widget for input boxes too. Some of them that I'm aware of are as below:
Auto-Complete Widget
Default Text Plugin for input-box
Text Limit Plugin for input-box / text-area
There are many such plugins if not for widgets. You can always browse/search through at the search box available in the page http://plugins.jquery.com/
I liked the idea of simply adding the classes so much I wrote it as a jQuery plugin. Benifit here is if at some poitn in the future jQueryUI do a version it will most likely use the same format, so converting will be easy.
(function($)
{
$.fn.input = function ()
{
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
});
}
})(jQuery);
Call it like:
$('input, password').input();
If you wanted to add hover effects etc, just add the logic into
return this.each(function ()
{
// display logic
});
EDIT:
Added in additional class "ui-button" to make them the same height / padding etc as .button()
EDIT 2:
This turned out to be such a good idea I've carried on, adding a version for labels, and allowing custom CSS to be passed in.
// some styling for inputs
(function($)
{
$.fn.input = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-widget-content ui-corner-all ui-button");
$(this).css(css);
});
}
})(jQuery);
// and labels
(function ($)
{
$.fn.label = function (css)
{
if (!css)
css = {};
return this.each(function ()
{
$(this).addClass("ui-widget ui-button");
$(this).css(css);
});
}
})(jQuery);
Then too style your inputs / labels. The class / styles of these don't actually need to exist anywhere.
$(".client-input").input();
$(".client-label").label({ "min-width": "125px", "text-align": "right" });
Outputs UI like this - with inputs and labels matching the style of the button. (Select's need work)
To have the same corners/font/padding/spacing as button, but without the button interactions (hover, active etc.)
HTML:
input type="text" class="ui-button ui-widget ui-corner-all"
if you want to align text add another custom class
CSS:
.textfield { text-align:left; }
HTML:
input type="text" class="ui-button ui-widget ui-corner-all textfield"