I'm trying to use the Foundation framework in an Ember app. The problem I'm having is with the navbar dropdown menu. When placing the Foundation layout in the handlebars template, the navbar no longer works on hover or on click. However, if you shrink the window so the mobile version is displayed, the navbar works on click. I'm pretty sure it's not the Foundation code, because the same code in regular HTML without Ember works.
I checked out these solutions, but neither worked for me (the first is still in place in my code).
My code can be found here, with index.html using Ember and grid.html not using Ember.
If you have any insights or questions, please let me know.
The dropdown hover behaviour comes from CSS. Ember doesn't play a part in this bug. :)
I noticed grid.html uses CSS from the foundation website, while the index.html uses CSS from local files. I think you have mismatched versions of foundation's CSS files.
I changed the CSS link tags inside the index.html to use the one on foundation as the grid.html does. That fixes the problem.
<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/style.css">-->
<!--<link rel="stylesheet" href="css/foundation.css">-->
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/normalize.css">
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/foundation.css">
I would suggest downloading the working CSS from the foundation site, and customizing it from there.
Related
I am creating a project using Javascript. In my project i am using kendo with bootstrap. The Problem some of the kendo and bootstrap are conflicting.I know there is $.noconflict, But this create me lot of problems. Mainly the kendodropdown is conflicting.
<!-- Mainly scripts -->
<script src="$themeDisplay.getPathThemeRoot()/js/jquery-2.1.1.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/bootstrap.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.mousewheel.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/jquery.jscrollpane.min.js"></script>
<script src="$themeDisplay.getPathThemeRoot()/js/custom.js?v=$version"></script>
If I remove the bootstrap file then kendo functions working properly.Please help me for using kendo and bootstrap together.
The exact issue is when i open dropdown and scrolls it automatically closes.
This is the code:
$("#searchTktID").kendoDropDownList({
filter: "startswith",
});
and am handling this situation using
close: function(e){
if(isScroll) {
e.preventDefault();
}
},
open:function(){
isScroll = true;
},
But this is not correct way i think.
Without knowing your exact problem it sounds like it may be a script ordering problem.
For example this is how I include the scripts in my projects for kendo and bootstrap integrated MVC apps.
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap-switch.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2019.2.514/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2019.2.514/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Scripts/umd/popper.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
#Scripts.Render("~/bundles/fa")
#Scripts.Render("~/bundles/Custom")
As long as you ensure that the bootstrap.js file is loaded after the kendo.js files you should be good.
As I said in my comment I have been using this approach for both version 3.x and 4.x
Edit: Please see a this dojo with bootstrap and kendo libraries working together.
https://dojo.telerik.com/AkIBOjOr/2
One thing to check is that you aren't reloading JQuery after you have loaded the kendo js files as that will show the kendoDropDownList is not a function error.
Edit 2: I have added filtering on the cap colour dropdown list.
That is one of the downsides of Kendo, you will need to customize your controls to look the way you would like. Kendo override your base bootstrap css, and mainly on the controls like dropDown, comboBox, autoComplete they are quite problematic. One solution is to use the telerik theme builder
You are able to customize your controls and download the CSS files. Other solution will be choosing a different theme from the bootstrap theme but both solutions need to override your css to get the final design you intend.
general documentation for setup a theme
I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can't seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn't. If you remove the bottom the nav bar doesn't work but the bottom does.
I am wondering if there is a workaround.
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be 'No'.
I don't know if there's a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.
I am confused as to why there is a difference in both of these CDN links when used to modify my simple website. What is the difference?
Method 1: These links allows my code to resize perfectly as the window goes from widest possible width to minimum width using chrome, IE11, and Firefox. The problem is 2-fold: 1) I lose the <span class="input-group-addon">$</span> as a neat looking symbol and instead get a plain ol' dollar sign. 2) I am a beginner, so I don't know if using these seemingly outdated links will make me have to backktrack in the future. See example here.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Method 2: These links have a hiccup when resizing. As you pass mid-width the AddMoney element jumps to the full width of the textarea above it. I want it to resize similar to the above. Fortunately, these links are directly from the current bootstrap page so I assume they are the most recent. Using the same link above simply paste over the js and css links using the below.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Because in your first example, you are including Bootstrap 2 and in the second you are including Bootstrap 3. These two versions of Bootstrap are vastly different in the way the HTML needs to be structured as well as what features they offer. I would suggest that you use the latest version of Bootstrap 3, so go take a look at the docs to figure out how the HTML should be formatted for that version and adjust your code accordingly.
For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?
Something was pointed out to me that I never heard of before and came as quite of surprise to me: the files to include when using jQuery Mobile and a custom theme.
As their site states, if you just want to use the bare-bones version of jQuery Mobile, all you need to include is jquerymobile.css, jquery.js, and jquerymobile.js. But what was pointed out to me is that if you want to use a custom theme, you do not have to include jquerymobile.css in your header. Just theme.css and mobilestructure.css.
Is this true or just some confusion on my part? It seems like a simple question but I couldn't find a definitive answer out there.
Yes this is true, I just looked at my code that works using jquerymobile and a theme I made using the theme roller and the only two css files I have are .
<link rel="stylesheet" href="/stylesheets/themes/cyan1.css" />
<link rel="stylesheet" href="/stylesheets/jquery.mobile.structure-1.3.1.min.css" />