The typeahead example on the typeahead website seems to limit the width of the .tt-input using 3em !important in the style of the element, so that when you type something which is longer than 3em it starts to scroll out of view in this tiny input.
How can I make .tt-input wider?
Here is a screenshot to help explain what I'm talking about: http://oi57.tinypic.com/2vvt9qc.jpg.
This appears to be hardcoded into bootstrap-tagsinput.js, see lines 46-47:
var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em";
this.$input.get(0).style.cssText = "min-width: " + inputWidth + " !important;";
inputSize is computed based on the placeholder text. If there is none, it will default to 3em. You might want to change these lines to obtain a different value, or remove the attribute altogether. I'm not entirely sure why it's there.
set the class to this:
input.tt-input {
width:auto !important;
}
... make sure you put it AFTER the typehead css so that it's overwritten.
I had the same problem and Eepzy is correct: bootstrap-tagsinput.js does use the placeholder text to determine the size of the input field, but the 3em is only used if you don't have a placeholder text that is a least 3 characters long.
I think editing a 3rd party js is not good practice in general.
There is a different solution to our problem: just use a placeholder text.
<input type="text" class="tagsinput" placeholder="Type here..."/>
Any text (except whitespaces) will do as long as it is at least 3 characters long.
Related
My Name is Amit Kumar
I want to apply css only Amit without using any tag like span or strong no any tag whole thing wrap in p tag and also if possible not use javascript only css applicable i tried but i cant find if anyone know to do this please help to find out
please help me to find the solution
It is not possible. You should wrap the text with different style in a tag be it span, strong, etc. If you are wanting to do this because of some other reason, like for extracting text only using JavaScript, etc., there are ways to do that too correctly.
Definition of markup in itself goes against what you're trying to achieve:
Markup language refers to a text-encoding system consisting of a set
of symbols inserted in a text document to control its structure,
formatting, or the relationship between its parts.
So if you want a part of text to be shown distinct from others it should be in an identifiable tag.
Only possible with some hack.
There is no selector available in css3 for select word.
Read more at A Call for ::nth-everything
p::after {
content: "Amit ";
color: red;
margin-left: -6em;
}
<p>My Name is Kumar</p>
You mentioned that not using javascript would be ideal, but it appears that is the only option you would have since you need to select the text node and wrap it in spans or other elements in order to selectively apply styling to it. I've had to do this in order to dynamically highlight certain parts of text.
Here's an example from a resource I used to do this:
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span style='color:yellow'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;
}
I am a noob web developer and made a big mistake.
I am creating a website for a college project, it needs to be responsive. I have tons of CSS written all in px units. But now for responsiveness, I want to convert all the px to rem. It would be a tiring task to do it one by one. Is there any tool that can help me?
I don't know of any tool that would automatically change all px to rems but you can make the changes quickly if you do something like this:
body {
font-size: 0.625rem;
{
Now 1 rem will be equal to 10 px, if you use Vscode you can enter a shortcut Ctrl + F and choose a Use Regular Expression option in Find input.
Then you can type (\d*)?(\d).?(\d*)?px in Find field, and $1.$2$3rem in Replace field.
But be alert, this regex doesn't work for sizes beginning with dot like .5px.
The search bar should look like this:
If you want to learn how this regular expression works click here.
Regex shouldn't be used this way, but...
This function should work but the predicament you are in is usually a one time thing and I normally advise against using Regex in this manner. The function pxToRem():
Finds all occurrences of a number (even with a decimal) adjacent to the letters 'px'.
Then a replacer function takes the number part and divides it by 16
Next it suffixes the new number with 'rem' and replaces the old number and 'px'.
Usage
Open your stylesheet, select as much of the text you need to change and copy it.
Next, paste it on a blank .html or .js file.
Wrap the text in grave marks ``` on a QWERTY keyboard it's the key located upper left hand corner `~
Assign the string to a variable.
Copy and paste pxToRem() code to the same page.
let css = `.box {width: 32px; height: 16px; border: 6px; padding 2.5px;}`;
function pxToRem(CSSString) {
const rgx = new RegExp(/(\d+\.?\d*)px/, 'g');
return CSSString.replace(rgx, (match, n) => (n / 16) + 'rem');
}
console.log(pxToRem(css));
Keep in mind that rem are relative to the font-size set on :root/html and if that font-size happens to be absolute (like the default of 16px) then the styles with rem aren't responsive, but they have the potential to be responsive. If you use a vmin units all rem will react immediately to any changes to the viewport. This not for the faint of heart.
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.
E.g. here: http://jsfiddle.net/j7b9A/2/
<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>
<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.
A comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?
Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.
Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.
I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?
What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
all you need is... add this
textarea.ui-input-text { height: inherit !important}
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.
Demo
CSS solution:
.custom_class {
height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
$('textarea').css({
'height': 'auto'
});
}, 0);
JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.
If you want to override that size when it's empty, you have two options:
Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.
The other is to override the default class, as seen in this answer.
I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+
Text area content auto scroll when more lines. max-height as you wish.
Add css
textarea.size{max-height:30px;}
<textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
You can use this : data-autogrow="false"
like this :
<textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>
I wrote a function to override my FLEX LineChart's datatips because the default datatips were ugly and rather boring.
I finally set the style I wanted but am now having some problems removing un-necessary tags from being displayed in the custom datatips.
For example, the datatips now display things like this:
"<b>Humidity</b></BR>2010-07-05T00:15:00"
I can always perform a "Replace()" to remove those break and bold HTML tags, but that seems really un-necessary and anti-development.
I am using this to set the dataTip's label text:
var hd:HitData = value as HitData;
var item:LineSeriesItem = hd.chartItem as LineSeriesItem;
_xAxisText = String(hd.displayText + ' ' + item.xValue);
Why is [displayText] displaying HTML tags I must parse out? How can I format those tags out of my text's value? Is there a setting?
I understand the HTML tag's purpose, although they are not being used by FLEX (apparently). I just dont understand how to remove them from the text. I already set my style attributes in the container, which I think would override these tags? Could that be why they are appearing?
Any ideas or suggestions? Thanks!
Flex should definitely be using the HTML tags to format your dataTip. Check this article.
Because you are seeing HTML tags in your dataTips, I am wondering if you perhaps implemented the dataTipFunction incorrectly. If you are able to, you should post a little bit more code.