Angular ui-select-match placeholder automatically setting width - javascript

I have <ui-select-match placeholder="Select areas...">{{$somestuff}}</ui-select-match>
The input box with the placeholder is getting its width set to 10px; automatically no matter what I do (as seen in the picture below). I have no idea why this is happening, and if I touch anything on the page or even adjust the size of the browser window it goes back to displaying the entire placeholder.
Does anyone know why this is happening? In the console I can see that it is says: element.style: width: 10px; but there is no reference to any css file where that is coming from, and I haven't touched any css files anyway.

The 10px width you are taking about is added by angular ui-select library. One solution you can do is override the width of the textbox by using css !important property.
.ui-select-container{
width:50px!important; //put whatever pixel value you need.it wont change
}
ui-select-container class is added by the library after the ui-select is rendered.

Related

Can I detect the width of a dynamicaly filled div box without rendering it on the web page?

Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...

Can #page directive(CSS) values be changed from code behind(C#) or javascript?

With the #page directive, we can specify printer margin of the page (which is not the same as normal css margin of a html element):
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
Can these values be changed from code behind(C# Code) or javascript?
i.e set size:landscape or size:8.27in 11.69in; and change margin value from code behind(C#) or javascript or jquery.
This seems to be inline css (directly in the page). If so, I can`s see any reason you should not be able to just output the values you want to be able to change as variables or properties from C#. Your browser does not know or care how the page is composed, it just accepts the html and other stuff within it - in your case, css.
If you are using external style sheets, you could use different style sheets for each option you want to provide, and then use C# to change the url to the appropriate style sheet as needed.
Yes, you can also change the CSS from java script if you prefer that. I havent tried manipulating#page` directives myself, but I can't see why it should not work. There are several ways to change CSS from JS. For example, a quick search turned up this other answer on SO.

How to change background color of jQuery UI Dialog?

I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?
you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​
Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.
If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...
Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.

JQuery: Attaching input form to input field in datepicker style

I want to display an input form attached to an input field like the datepicker does.
I've tried the "show" function, but instead of displaying the input form overlaid, it shows what was hidden and moves the rest of the page down.
There are many overlay libraries out-there, but none (that I've seen) attaches the overlaid form to the input field, like the "datepicker" does.
Is there a simple way to accomplish this? (preferably no other external libraries, other than jQuery or jQuery UI).
Thanks!
The problem you're having is CSS related.
Just apply some absolute positioning on the DIV you're showing via .show().
Example :
// jQuery is :
$('#yourDiv').addClass('yourDivClass');
/* CSS is : */
.yourDivClass {
position: absolute;
top: 50px;
left: 100px;
}
Adjust left and top values to your likings.
As far as I know, there is no library or plugin for this (correct me if I'm wrong). You should use CSS absolute positioning for the form, and set the top/left properties on the form to the offset of the input field. Here is a quick example of how I'd do it: http://jsfiddle.net/85ZkV/

How can I define an accesskey for an invisible HTML element

I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7

Categories