I got some problems implementing typeahead.js
Current setup:
I use Bootstrap v.3.3.7
I implemented jQuery 3.2
I downloaded the typeahead.bundle.min.js v.0.11.1 from Github
I added the JS file to my project and linked it on the
I implemented the typeahead stuff as described in their docs here
I added (an empty CSS) class named .typeahead to init the JS stuff
NOTE: All the typeahead stuff (live-search) works great, but typeahead destroys my css.
-
My working Pug/Jade searchbar:
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus)
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Result:
-
The code, when I add the .typeahead class to let it init typeahead (also gave it some random other names, the classname is not relevant):
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus).typeahead
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Results in:
-
Why is that? I mean of course typeahead brings its own classes like tt-hint e.g. to display the results - but these aren't any problem. Why does typeahead actually make my searchbar look like this.
This happens because like most JS/jQuery plugins, typeahead.js also modifies the DOM structure of the elements that it works on.
So, the updated DOM after initialisation of typeahead would not be the same as what you wrote in your html or jade. Your existing CSS rules may or may not apply to this new DOM structure as intended now.
Solution
You need to update your CSS rules, so they target the updated DOM after initialisation of typeahead.js.
To view the updated DOM, you can use inspect element feature of browsers or developer tools etc to view the DOM structure in real time.
Related
I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content
Is there any other way, leaving matToolTip to provide popup over hover in Angular
<button [matTooltip]="help|translate" type="button" mat-button class="button-save" [disabled]="!isInfoAvailable">
<mat-icon>help_outline</mat-icon>
</button>
Expected output
firstname mike
lastname ross
Actual output
<b>firstname <\b> mike <\n>
<b>lastname <\b> ross
I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js
I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.
https://atomiks.github.io/tippyjs/#html-content
Hope it helps you.
If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️
A similar post already exists: Angular 2 Material tooltip with HTML content in angular
What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.
Answer from #jelbourn, Angular member team:
When designing the tooltip we deliberately decided not to support
this. The Material Design spec is rather prescriptive about only text
appearing in tooltips. Rich content also presents a challenge for
a11y.
Source: https://github.com/angular/components/issues/5440#issuecomment-313740211
You can find the feature request for popover here.
Until an official release from Material team you can use an alternative. Here are some examples:
https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
Some background information, I am using ASP.NET with the MVC framework and html helpers.
I currently have a dynamic table where each row has a series of input boxes. Each of these input boxes has a validation message. This works completely fine for the first row. However, when other rows are dynamically added (with the IDs' being changed along with other attributes to match the row number) the validation message no longer works.
Both the row and validation message span are being replicated properly.
In JQuery, this is usually just a problem with the binding, so for each row I would simply re-bind the IDs'. However I am not really to sure how to approach them in ASP.NET.
Any assistance would be appreciated.
Thanks
Alright, I have finally figured this out.
In MVC, in order to handle the validation, it import a JQuery file known as jquery.validate.unobtrusive.js.
However, similar to JQuery, this only occurs at the very beginning when the page is loaded. So, when you add a new dynamic element, you need to remove the bindings and the re-bind them again.
Basically, in your function for adding a new element, put the following lines of code AFTER you have added the new element:
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
For example:
function addInfoDynamic()
{
document.getElementById("#myDiv").innerHTML += "New Content";
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
}
In my Java code I want to programmatically create a <fieldset> tag that I can use in my JSF form.
The setup of my form looks like this:
Application app = FacesContext.getCurrentInstance().getApplication();
HtmlForm form = (HtmlForm) app.createComponent(HtmlForm.COMPONENT_TYPE);
form.setStyleClass("pure-form pure-form-stacked");
As you can see I use HtmlForm.COMPONENT_TYPE as an identifier for the JSF UI component but I haven't found an identifier for a fieldset so I tried:
UIComponent fieldset = app.createComponent("fieldset");
form.getChildren().add(fieldset);
Unfortunately this is not working so I have to come up with another solution. Do you have any ideas?
Is there a general approach how HTML tags (which are unknown in the JSF context) can be created?
You can try the following:
Theres a component called <f:verbatim> which you would use in xhtml like this:
<f:verbatim escape="false">
<fieldset id="blah"></fieldset>
</f:verbatim>
To achieve that programmaticlly you can add this component like this:
String fieldsetHTMLText ="<fieldset id=\"blah\"></fieldset>";
UIOutput verbatim = new UIOutput();
verbatim.setRendererType("javax.faces.Text");
verbatim.getAttributes().put("escape", false);
verbatim.setValue(fieldsetHTMLText);
I found three solutions to my problem. The first one is to use PrimeFaces, the second one is to use MyFaces Tomahawk and the third one is to use a JSF Verbatim UI component with string input. I will shortly list up code samples and the differences between the solutions.
1 PrimeFaces
With an include of the PrimeFaces components suite (and it's Apache Commons FileUpload dependency) one can use the Fieldset class to programatically create a fieldset on-the-fly. The bad thing on that is, that the PrimeFaces Fieldset component is depends on a PrimeFaces JavaScript file so instead of the plain fieldset, one will get a fieldset and a JavaScript include which is way too much.
import org.primefaces.component.fieldset.Fieldset;
...
form.getChildren().add(new Fieldset());
2 MyFaces Tomahawk
The UI component set Tomahawk also comes with a Fieldset component that can be used to create an HTML fieldset programatically. If the Fieldset of Tomahawk will be used, then one will get a plain and nice-looking fieldset tag. The bad thing here is that Tomahawk is an extension to MyFaces and MyFaces itself is a whole JavaServer Faces implementation which should not be used alongside standard JSF.
import org.apache.myfaces.custom.fieldset.Fieldset
...
form.getChildren().add(new Fieldset());
3 JSF Verbatim UI Component
The standardized and hacky way is to use a JSF Verbatim UI component. Within a verbatim component you are allowed to put any HTML needed. With this little trick we can create a verbatim tag:
UIOutput fieldset = new UIOutput();
fieldset.setRendererType("javax.faces.Text");
fieldset.getAttributes().put("escape", false);
fieldset.setValue("<fieldset></fieldset>");
The code shown above renders a fieldset HTML element but because it is a string and the tag inside the string is closed you cannot programatically append anything to that tag, so this won't work:
form.getChildren().add(fieldset);
To generate an HTML tag that can be used for nesting of elements, each opening and closing tag must be put in an own Varbatim component which makes this solution very text heavy:
UIOutput fieldsetStart = new UIOutput();
fieldsetStart.setRendererType("javax.faces.Text");
fieldsetStart.getAttributes().put("escape", false);
fieldsetStart.setValue("<fieldset>");
UIOutput fieldsetClose = new UIOutput();
fieldsetClose.setRendererType("javax.faces.Text");
fieldsetClose.getAttributes().put("escape", false);
fieldsetClose.setValue("</fieldset>");
HtmlInputText inputText = (HtmlInputText) app.createComponent(HtmlInputText.COMPONENT_TYPE);
form.getChildren().add(fieldsetStart);
form.getChildren().add(inputText);
form.getChildren().add(fieldsetClose);
Conclusion:
None of the solutions shown is really elegant. PrimeFaces und MyFaces have large dependencies and the standard JEE way requires practally much writing effort. I had hoped to find a nice solution to produce unknown / custom HTML elements, such as: document.createElement("fieldset");.
If anyone knows a way to do that, please post the solution.