I know there are plenty of answers to this question already, but none of them work now. Probably due to Bootstrap update.
Here is jsfiddle: http://jsfiddle.net/N0ir/Yh33b/
Who can figure this out?
<select>
<option value="1">Misha, davai po novoi</option>
</select>
.caret {
display:none;
}
You cannot change or alter the caret using css as the select element is generated by the browser by default (that's why they look different from browser to browser). You need to use js/css to get the change you want as well as keep it browser compatible. Here is a link to a nice one for Bootstrap users:
http://silviomoreto.github.io/bootstrap-select/3/
Related
Goodnight.
Working with VUE and MaterializeCSS I'm having problems using since I need to list a number of options from an array of objects filled in from an Ajax request but apparently VUE is hiding the information by creating a new under the main one.
Then I would like to know if anyone knows how to deactivate an element of the Materilizecss framework? In this case . Thank you.
If someone works for you:
Add the browser-default class to the but indicate in the display: block style because for some reason it hides it.
<select class="browser-default" style="display:block" v-model="category_id">
<option v-for="category in arrayCategories" :key="category.id" :value="category.id" v-text="category.name"></option>
</select>
Greetings.
The issue is this:
In my APP, I need to knw if a SELECT element is visible or not in the DOM under the MATERIALIZE framework. (Please do not mark this question as already discussed in here until you read it until the end.
So far I have been using document.getElementById('xx').offsetParent!==null to check that, and it has worked fine for me so far.
However, since I migrated my HTML code to Materializecss, my visiblity checking function does not work anymore.
This piece of code works perfectly in pure HTML
<div class='input-field col s12'>
<select name='V18' id='V18' />
<option value='' disabled selected>Select</option>
<option id='V18_1' value='1'>Choice 1</option>
<option id='V18_2' value='2'>Choice 2</option>
<option id='V18_3' value='3'>Choice 3</option>
</select>
</div>
<script>
if
(document.getElementById('V18').offsetParent!==null){
alert('Select is visible');
}else{
alert('Select is NOT visible');
}
</script>
Once I initialize the Selects in Materialize css, by calling the function $('select').material_select(), my visibilty checking function does not work anymore.
I have already tested all the options discussed on these links, and none of them work for Materialize selects:
Check if element is visible in DOM
How do I check if an element is hidden in jQuery?
My, question is...How can I check if a SELECT element is visible or not within the Materialize Framework? Seems that after initializing the selects, they loose some critical Javascript properties, somehow.
Does anyone have the same problem?
The workaround that I found for materializecss was to treat selects in a different way from radion buttons and texts,
For selects I detect visibility by using: window.getComputedStyle(element)).display === 'none'
For the rest kind of elements I detect visibility by using: "document.getElementById(element).offsetParent!==null"
Is there a way to change autocomplete rule for attribute values in PhpStorm 7.1 (or disable it)?
I mean I want to change autocomplete from
<div class=""></div>
to
<div class=''></div>
In addition to already stated workarounds by Noah.
It's not possible to choose quote symbol in such case.
Please watch/vote this ticket to get notified on progress: http://youtrack.jetbrains.com/issue/WEB-459
I've been using PhpStorm since v5, but have not found a way to address this.
However, this behaviour can vary, depending on how you're getting to the quotes.
If you're typing <div class= and it's automatically filling in the "" for you, you can remove that by [unsetting "Automatically add quotes for attribute values"].
If you're using tab-completion, like <div cla[TAB], then there doesn't seem to be much you can do, except press backspace after tab. I haven't
You can set up your own Live Template <div class='$END$'></div> to give you your desired format.
There may be a plugin or two that can change / override PhpStorm's default behaviour, but I haven't looked too much.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
Ok, so I'm building an app using Dojo 1.8, and I have a custom widget with a template similar to this...
<div>
<label for="tag">Select something: </label>
<select id="tag"
data-dojo-attach-point="tag"
data-dojo-type="dijit/form/Select">
<option value="0">option 0</option>
<option value="1">option 1</option>
</select>
</div>
However, when the template gets rendered, the widget defines a new id, which makes the tag useless. I've tried googling this, but all my searches just direct to the Dojo documentation since they have attributes called labels but have nothing to do with the HTML label tag.
What is the proper why to do this?
In the situation you describe, you can simply place the label around your <select> and dispose with the for/id attributes. see Stackoverflow question:
How do I align two dojo widgets next to each other?, also see: w3 tutorial on label use
Also, if you want to actually use Ids in a widget template, see:
How do I create unique IDs in a Dojo widget template?
Using ids directly (ie. hard-coding them, not assigning them on-the-fly as in the above link) is not encouraged. The reason for this is that a template is meant to used over and over again in the creation of widgets.
In theory, it could be used to create multiple widgets on one page. Hence, in that situation you would have an id conflict. Each HTML id, on any one page, needs to be unique.