I am using Twitter's Bootstrap in an MVC 4 project, and it basically works, however the styling is off. For example, this is what a popover should look like:
However, the button renders incorrectly:
and the popover arrow is not aligned properly:
Any thoughts on what might be happening? Here is my .cshtml file:
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
<div class="well">
hover for popover
</div>
<script>
$(function () {
$("#example").popover();
});
</script>
Found the answer.. it was due to CSS conflicts with the default Site.css file.
body had a top border of 10 px, which was causing the misalignment of the popover
Also, i changed <a to a <button and the button rendered correctly.
Related
I am using jquery mobile and wanted a overlay in to be visible when ever i need. I have this at first in my html
<body>
<div id="overlay"></div>
</body>
(if you are wondering about other pages then they are added afterwards)
but when jquery mobile 1.4.2 initializes it turns my div in to a page like so:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 640px;">
<div id="overlay">
</div>
</div>
How can i make Jquery not touch this element?
Let me guess you are using it to show a splash screen.
jQuery Mobile requires at least one page to exist during initialization.
To solve this problem add one dummy jQuery Mobile page and just set it CSS to display: none; something like this:
<body>
<div id="overlay"></div>
<div data-role="page" style="display: none;">
<div/>
</body>
I seems it only does it if there are no pages initially in the body. but if you add a blank page every works fine:
<div data-role="page"></div>
When navigating with $.mobile.changePage("#page2"); I realized that jQM adds 1-3px gap under the header on the next page.
When calling the photolibrary with Cordova to select a photo, the gap will disappear, but I don't need the camera plugin, I want the gap not to appear in the first place.
(I am not talking about the white gap that gets added to the bottom when calling camera plugin - and can be resolved by changing the self web view in MainViewController under viewWillAppear - or any other of the gap issues I found).
The gap I am talking about is between header and ui-content.
I have been working with jQM before and the versions I used in past projects have not caused any similar problem.
I am using jQM 1.4.2, JQuery 1.11.0 and Cordova 3.1.0.
Here are 2 images, I changed to colors to make the problem more obvious.
darkgray -> header
red -> ui-page background
blue -> first (and only) DIV element in ui-content
1 image: no gap - this is if the page is the INDEX page
2 image: this is when the page is page 2 and gets navigated to with changePage
Between header and first DIV in content you can see a gap.
I have commented out every single line of code, except the basic structure and those to color the elements. Plus, the page WILL appear without gap IF it is the MAIN page. However, if I have a different main page and tap on a div which calls $.mobile.changePage("#page2"); the second page will be shown with a gap between header and content.
edit - UPDATE:
I created a clean project just to reproduce this issue. I don't know how to resolve it and if I can't fix this I can't continue with any project, because this happens in every Project with jQM 1.4.2:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.css" />
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('tap', '#gotop2', function(event){
event.preventDefault();
//$.mobile.changePage('#p2');
$.mobile.pageContainer.pagecontainer("change", "#p2")
});
</script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 1</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="gotop2">go to page2</div>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 2</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"></div>
</div>
</div>
</body>
Don't forget to include jQ or jQM in the folder.
If you call "/index.html" in you browser and navigate to the second page you will see the gap.
If you call "/index.html#p2" directly in the browser there won't be any gap.
I have a project where I need to use both EasyUI (Datagrid) and JQueryUI (Dialog Form) libraries.
When I import the JQueryUI library, I see a strange behavior on the EasyUI Datagrid Header Resize feature. If I try to manually resize the header, only the header cell is resized (the data cells for this column are not resized).
Note that the double click on the header cells separation works and will auto resize the column on the preferred size. The problem occurs when you try to resize by click and slide (manually defining the size of the column).
If I do not import JQueryUI library, then I confirm the resize columns feature of the datagrid is working fine. So I am guessing there must be a kind of conflict between both libraries, but I am not sure on how I could solve this issue.
To reproduce, it is easy, you just need to include the different libraries and create a datagrid.
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px">
...
I created a small jsfiddle project to illustrate the issue, see the http://jsfiddle.net/melane/vmDP8/
You can see for yourself that the header cell size changes is not applied on the data cells.
Do you know how I could fix this?
Thanks
In fact, I got the answer from the developer of EasyUI framework, it is simply not possible to fix this incompatibility between both framework. So instead, I used the dialog box from EasyUI, and got rid of the dependence of the JQuery-UI framework :
<div id="dialog" class="easyui-dialog" title="Action" style="width:317px;height:260px" data-options="
modal:true,
closed:true,
buttons:[{
text:'Cancel',
iconCls:'icon-cancel',
handler:function(){
$('#dialog').dialog('close');
}
}]
">
This is illustrated on http://jsfiddle.net/vmDP8/11/ for those interested
Why does .hide() not work on elements within an jquery ui accordion? It does work before the call to $("#accordion").accordion(), but not afterwards. The .show() method works fine before and after. The .toggle() method works half (only the show part).
<html>
<head>
<link href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
<script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<script>
$(function()
{
//$("#inside").hide("fade"); /* <-- this does work */
$("#accordion").accordion();
$("#inside").hide("fade"); /* <-- but this doesn't */
});
</script>
</head>
<body>
<div id="accordion">
<h3>Page 1</h3>
<div id="page1">Blah</div>
<h3>Page 2</h3>
<div id="page2">
<div id="inside">Blah too</div>
</div>
</div>
</body>
</html>
Please explain not only how to solve it in another way, but more importantly why it doesn't work this way.
Based on the fact that calling hide() without the "fade" parameter, actually works (see here), I would say it has to do with the way that fade is implemented. The fade effect might be depending on the fact that the element is visible, since when you use hide("fade") when the div is showing it works (see here).
This happens because of accordion's use of hide. The first time a panel is shown, the contents are shown as well, even if they were previously hidden, so if the panel is not open when you hide the contents, they will appear when you first select that panel. See juan.facorro's explanation as it provides a correct explanation as to what's not working.
Here's one possible start of a workaround by showing the panel containing #inside initially, hiding it, then showing the first panel instead: http://jsfiddle.net/cjc343/KuJJm/2/
Problem
Jquery UI overylay is causing browser's scroll bars to show up. I am using latest Jquery and Jquery UI without any theme.
Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="includes/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="includes/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
</head>
<body>
open modal
<div id="dialog" style="display:none;">test</div>
<script type="text/javascript">
$('a').click(function () {
$('#dialog').dialog({modal: true});
});
</script>
</body>
</html>
This is extremely simple one. I have no idea why it creates scroll bars.
Any ideas on this one? I will be really glad.
Thank you in advance.
P.S.
I'm trying to add Jquery UI to a theme that I have to work with. I tried to eleminate as much as CSS rules as I can.
Right now I'm not so sure if this problem is not related to FireFox (7.0.1). When I use modal dialog window on the theme (UI has theme) I am working with and go back to test.html (without UI theme), problem occurs again.
If I am using in both windows (with theme) both is ok with the theme.
Does anyone experienced similar problem?
I ran into this issue as well. Adding the following CSS fixed it.
.ui-widget-overlay {
position: fixed;
}
I solved my problem with using blockUI.
If anyone experiences similar problem here is another possible solution;
//Get The Height Of Window
var height = $(window).height();
//Change Overlay Height
$(".jquery-ui-dialog-overlay-element").css('height',height);
If you experience width related problems, you could do the same with adding var width = $(window).width(); variable to your page and changing overlay's width with .css()
Does anyone experienced similar problem?
I have and I added the following to my CSS. It puts the scroll bar on the page all the time in an inactive state when not needed. It prevents the page from appearing to "jump" when something is added to the page that activates the scrollbar.
html {overflow-y: scroll;}
Not sure if it works with your theme but worth a try.