I am trying to implement the type ahead and all seems to be working. The only problem is something with the styling is wrong, it displays the dropdown like it is going to autocomplete but it is all blank.. the values are there and in fact if you hit enter they work.. but aren't being displayed
I should mention that I am using AngularJS with Ionic...
I'll paste my code here just in case.. any help would be great!
HTML:
<!-- UI BootStrap style sheet and js -->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class='container-fluid' >
<pre>Model: {{Selected| json}}</pre>
<!-- <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> -->
<input type="text" ng-model="Selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control" />
</div>
and the Javascript.. I doubt this is the problem but can't hurt
$scope.Selected = undefined;
$scope.Unidades = [{
"Nome": "laskjdhflksjfg",
"Codigo": "11106600"
},
{
"Nome": "wertwertwertwer",
"Codigo": "11106601"
},
{
"Nome": "wertwertwertwer",
"Codigo": "11106602"
}];
I actually copied this example from here: http://plnkr.co/edit/1Sm17103S73nJbpb2PmK?p=preview
So I know it works....
Thanks Guys!
Do you really need Bootstrap together with Ionic?
There are some post on Ionic forum relating the question, for example https://forum.ionicframework.com/t/ionic-twitters-bootstrap-css-framework-again/8269/6
CSS classes of Bootstrap could interfere with Ionic ones.
Why not using Ionic Autocomplete or other similar components?
Can you confirm If the values are coming onto the DOM using Inspect Element or such and send the screenshots. Because this usually happens when there is an empty string. Like in this screenshot.
Your code according to your screenshot seems to behave the same. Also can you please elaborate when you say - when I hit enter it works. What do you see as the Model: value when you hit enter ?
Related
When wiring together Trix editor content with Livewire, I am stumbling into problems. I believe that the issue is that when Livewire receives content from Trix, the content is swapped out and Trix becomes disabled. Is there a better way?
What I have done, that works, is as follows. At the moment, the page is the redirected to itself in order to reboot Trix (defeating the whole point of Livewire, but it's being used for other things too).
<div>
<input
id="newCommentTextTrixContent"
type="hidden"
wire:model="newCommentText"
>
<trix-editor
id="newCommentTextTrixEditor"
input="newCommentTextTrixContent"
></trix-editor>
<button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>
I have tried
wire:model on the hidden input -- nothing happens
x-on:trix-change="$set('comment', $event.target.innerHTML) -- this works, but Trix goes grey and ceases to work after the first keypress (reboot problem?)
I'm sure something like the latter is better, but with Trix somehow being rebooted each time. It all seems a bit messy - so the question is, what's the right way to do this?
I got it working. With up to date Livewire and Alpine installations, the code is roughly as follows.
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
x-ref="trix"
wire:model.debounce.60s="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
Why does this work?
You need wire:ignore on the parent node, because Trix inserts the toolbar above the text area. wire:ignore stops Livewire from worrying about it and therefore not removing it or messing with it on the next cycle.
You need a wire:key because the DOM moves around a bit, and this helps Livewire to keep track of it.
I propose the long debounce, which is a hack as the .lazy modifier doesn't work well with text. Also, waiting for Ajax on each key press is painful.
The alpine event ensures that Trix events (like bold, italics etc) are still fired
That's it. I use this above to repetitively submit comments onto the end of a comment stream, and everything seems to work fine. Good luck!
Note, I also have CKEditor working similarly, as described here.
As an extension on #Kurucu 's answer, and the comment under it from #Rehan;
This seems to work very well. But when I apply styles like li or bold
it doesnt retain in the wire:model. Ex:
<div>foo<br>bar<br>foobar</div> I applied the Bullets here the tags
are missing. Did you face this issue? – Rehan
To fix the issue of not having an updated value when pressing buttons bold, italic, or quote for example, add the following part to the trix editor (note the x-on:trix-change="$dispatch('input', event.target.value)"):
<div wire:ignore>
<trix-editor
class="formatted-content"
x-data
x-on:trix-change="$dispatch('input', event.target.value)"
wire:model.debounce.1000ms="newCommentText"
wire:key="uniqueKey"
></trix-editor>
</div>
The above option works but wasn't getting the data back from my field, Here's what worked for me with a little tweak using AlpineJS's #entangle.
Below is my working solution:
<div class="mb-2" x-data="{ description: #entangle('description').defer }"
x-init="$watch('description', function (value) {
$refs.trix.editor.loadHTML(value)
var length = $refs.trix.editor.getDocument().toString().length
$refs.trix.editor.setSelectedRange(length - 1)
}
)" wire:ignore>
<label class="form-label">Job Description <span class="text-danger">*</span></label>
#error('description')
<span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
#enderror
<input name="description" id="description" type="hidden" x-model="description">
<div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
<trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
style="height: 20rem;"></trix-editor>
</div>
</div>
I got it to work by using Trix's built-in events.
<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>
<script>
var about = document.getElementById("about")
addEventListener("trix-change", function(event) {
console.log(about.getAttribute('value'));
#this.set('about', about.getAttribute('value'))
})
</script>
Here is a list of the research that I have done. First I looked how to do it on the internet and I found this site.
Then I asked a friend and he suggested that I do this with the code, and as an example, gave this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
so in HTML
<h1 class"best-header-ever"> Header </h1>
then in CSS
.best-header-ever {
color: blue;}
I don't know if he was doing it in the right order so the above, is the most information I have of an alternative strategy
Now I am working on this, again in the WordPress editor:
.best-header-ever{color: blue;}
<header> header
link rel="stylesheet" type=text/css href=styles.css
[header/]
(this text to the left was part of the website-->)This is a contact page with some basic contact information and a contact form.
[contact-form]<span id="mce_SELREST_start" style="overflow:hidden;line-
height:0;"></span>[contact-field label="Name" type="name" required="1"/]
[contact-field label="<span id="mce_SELREST_start"
style="overflow:hidden;line-height:0;"></span> Email" type="email"
required="1"/][contact-field label="Website" type="url"/][contact-field
label="Comment" type="textarea" required="1"/][/contact-form]
body/
I don't know what I'm doing wrong and I would like to add background colour to the font and text. Oh, I have also been working on freecodecamp.org as research.
I am trying to learn how to do this work without the security net of freecodecamp to improve my skills.
Also, I don't know if I can even add HTML5 to HTML (everything from contact form to /contact form was being registered by the computer, but when I added any other characters, no background colours or colours would display).
This is what the page looks like:
myedit_pic
I don't know if this makes a difference, but the WordPress editor has buttons:
wordpress-editor-interface
I suggest you use background-color: instead of color:. Color will just change the text color, or the color of the words inside that header. Using background-color will change the background color.
First to answer your initial question:
When you assign a class in HTML, make sure to put an equals sign between 'class' and the name of the class in quotes:
This:
<h1 class"best-header-ever"> Header </h1>
Becomes:
<h1 class="best-header-ever"> Header </h1>
Also, to address your issue about how to learn and test your code, I suggest using something like jsfiddle.net. You can test HTML, CSS, and Javascript (when you are ready for that) and see the results live.
I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
I am working on adding custom CSS styling for my checkboxes via Awesome Bootstrap Checkboxes and have them actually showing up in the grids with them initially being checked or unchecked properly via JSON data being read...
the issue is when I go to change the value. The values are updating properly from when shown to when hidden.
However, instead of just the checkmark disappearing in the checkbox, the entire checkbox disappears and the only way for me to get it back is to change the value of the back to ui-grid-cell-focus manually through F12 debugger in the browser.
It appears something is not set up right with them, but I haven't been able to pinpoint exactly what he issue is yet...any help would be appreciated.
Cell Template:
cellTemplate:
`<!-- .blueCheckbox --> <div class="checkbox checkbox-primary"> <input type="checkbox" class="ng-scope" value="true" name="select_item" ng-model="row.entity.Name" /> <label></label> </div> <!-- end .blueCheckbox -->,`
Got them working...Had to enable the checkboxes and move them underneath the overlay and they worked fine...weird because its totally different from how it normally works...
I'm working on a site using Twitter Bootstrap, and want to put some content in a gray box or panel.
I mean much like the 'Basic block' example from bootstrap's own docs. Small screenshot cutout to display what I mean:
Except it's supposed to contain normal HTML content, no code or <pre> stuff or anything.
You can use a well for this. See docs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-sm">Well well well</div>