http://techbrij.com/responsive-menu-twitter-bootstrap-asp-net
I followed this link to make the menu control responsive but no luck.Can someone tell me what's wrong in this link?
I copied the code below in the code to see how it becomes responsive upon resizing the browser. I noticed that on hover function is still active instead of click on ipad mode.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal"
CssClass="navbar navbar-fixed-top"
StaticMenuStyle-CssClass="nav"
StaticSelectedStyle-CssClass="active"
DynamicMenuStyle-CssClass="dropdown-menu">
<Items>
<asp:MenuItem Text="Home" ToolTip="Home"></asp:MenuItem>
<asp:MenuItem Text="Music" ToolTip="Music">
<asp:MenuItem Text="Classical" ToolTip="Classical" />
<asp:MenuItem Text="Rock" ToolTip="Rock" />
<asp:MenuItem Text="Jazz" ToolTip="Jazz" />
</asp:MenuItem>
<asp:MenuItem Text="Movies" ToolTip="Movies">
<asp:MenuItem Text="Action" ToolTip="Action" />
<asp:MenuItem Text="Drama" ToolTip="Drama" />
<asp:MenuItem Text="Musical" ToolTip="Musical" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
</div>
hi there as I know this js code will help you
<script type="text/javascript">
//Disable the default MouseOver functionality of ASP.Net Menu control.
Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
return false;
};
</script>
Related
I am having issues styling the buttons in the Primefaces text editor. I was able to find the documentation here: link to quill. Unfortunately, I can' figure out how to do the styling for a simple dark mode. Every icon and text in the menubar should be white, the background should be dark. So far I've tried inline style, assigning a class. Nothing seems to lead to success. Even primetek itself doesn't seem to be very successful with that.
Minimal reproducible example:
<p:textEditor widgetVar="editor1" value="#{editorView.text}" height="300" />
<p:textEditor
widgetVar="editor2"
value="#{editorView.text2}"
height="300"
placeholder="Enter your content"
>
<f:facet name="toolbar">
<span class="ql-formats">
<select class="ql-font" />
</span>
<span class="ql-formats">
<button class="ql-bold" />
<button class="ql-italic" />
<button class="ql-underline" />
</span>
<span class="ql-formats">
<select class="ql-color" />
<select class="ql-background" />
</span>
<span class="ql-formats">
<button class="ql-script" value="sub" />
<button class="ql-script" value="super" />
</span>
<span class="ql-formats">
<button class="ql-code-block" />
</span>
<span class="ql-formats">
<button class="ql-list" value="bullet" />
</span>
<span class="ql-formats">
<button class="ql-link" />
</span>
</f:facet>
</p:textEditor>
Simply add this code to a JSF-page and try to style the top toolbar with bold, italic, etc.
I'm really not getting why my <h:commandbutton> wont work.
If I put the same commandbutton outside of the navbar, it works. the button becomes white if I hover over it. My code is the following:
<nav class=" navbar nav-bottom">
<img class="nav-item navbar-picture" src="#{resource['images/logo.gif']}" />
<img class="nav-item nav-logo-text" src="#{resource['images/retailsonar.svg']}" />
<div class="topnav-right">
<div style="float:left; margin-top:5px">
<h:outputText class="navbar-text" id="welkom" value="Welkom, #{userBean.getNaam()}"/>
</div>
<div style="float:right">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
</div>
</div>
</nav>
<!-- navbar einde -->
<div class="vertical-center-full-page">
<center class="vertical-center">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
the button in the navbar wont work
the button on the main screen does work, I can log out by clicking on it
I have a very similar to many topical problem here on StackOverflow, but none of the solutions listed solved my problem.
(
Bootstrap dropdown closing when clicked
Bootstrap dropdown propagation closing when clicked
Twitter Bootstrap cant stop a dropdown from closing on click
Twitter Bootstrap dropdown closes when clicked
)
I have a horizontal navigation bar, and in the end want to put a dropdown to log in form. However when you click inside the form closes the plumb alone.
Could someone help me ??
Thanks So Much.
My code this:
<head runat="server">
<%--<link href="../Styles/Estilos.css" rel="Stylesheet" media="all" type="text/css" />--%>
<link href="../Styles/Print_Screen.css" rel="Stylesheet" media="print" type="text/css" />
<link href="../Content/CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../Content/CSS/jasny-bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<script type="text/javascript">
$(function () {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input, .dropdown-menu label').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu input').click(function (event) {
event.stopPropagation();
});
$('.dropdown-menu').on('click', function (e) {
e.stopPropagation();
});
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu').click(function (e) {
e.stopPropagation();
});
})
</script>
</asp:ContentPlaceHolder>
<div class="page-header" style="margin: 10px 0 20px;">
<div id="Div1" class="container">
<div class="navbar-inner navbar-content-center" style="text-align: center;">
<img id="Img3" alt="" style="border: 0" runat="server" src="~/images/logo.png" />
</div>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span><span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<asp:SiteMapDataSource ID="menuData" runat="server" ShowStartingNode="false" />
<asp:Repeater ID="r1" runat="server" DataSourceID="menuData">
<HeaderTemplate>
<ul class="nav navbar-nav">
</HeaderTemplate>
<ItemTemplate>
<li id="Menuitem" runat="server"><a href='<%# ((System.Web.SiteMapNode)Container.DataItem).Url %>'>
<i class='<%#((System.Web.SiteMapNode)Container.DataItem).ResourceKey%>'></i>
<%#((System.Web.SiteMapNode)Container.DataItem).Title%></a> </li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<form class="form" id="formLogin" runat="server">
<ul class="nav navbar-nav navbar-right">
<li id="liLogin" runat="server" class="dropdown"><a href="#" class="dropdown-toggle"
id="register" data-toggle="dropdown" style="padding: 20px 5px;"><i class="glyphicon glyphicon-cog">
</i>LOGIN</a>
<div class="dropdown-menu" style="padding: 17px;">
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<asp:TextBox ID="txtLogin" runat="server" class="form-control" placeholder="username or email"
Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-bottom: 25px" class="input-group input-group-sm">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password" class="form-control"
placeholder="username or email" Style="width: 200px;"></asp:TextBox>
</div>
<div style="margin-top: 10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<asp:LinkButton ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-success btn-sm btn-block"></asp:LinkButton>
</div>
<asp:Label ID="errorLabel" runat="server" Text="" Visible="false"></asp:Label>
</div>
</div>
<!-- /dropdown-menu -->
</li>
</ul>
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
</form>
</div>
</div>
<!--/.nav-collapse -->
</div>
<script src="../Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../Scripts/jasny-bootstrap.min.js" type="text/javascript"></script>
Hi I am using bootstrap styles for my asp.net web application and I have a menu control at the top. I want to insert a search text box at the top right on the same line as the menu bar. Following is my code. Can anyone please suggest how to do this? Thanks.
<div id="container">
<form runat="server" class="navbar-form navbar-left" role="search">
<div class = "navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal"
CssClass="navbar"
StaticMenuStyle-CssClass="nav"
StaticSelectedStyle-CssClass="active"
DynamicMenuStyle-CssClass="dropdown-menu">
<Items>
<asp:MenuItem Text="Home" ToolTip="Home"></asp:MenuItem>
<asp:MenuItem Text="Music" ToolTip="Music">
<asp:MenuItem Text="Classical" ToolTip="Classical" />
<asp:MenuItem Text="Rock" ToolTip="Rock" />
<asp:MenuItem Text="Jazz" ToolTip="Jazz" />
</asp:MenuItem>
<asp:MenuItem Text="Movies" ToolTip="Movies">
<asp:MenuItem Text="Action" ToolTip="Action" />
<asp:MenuItem Text="Drama" ToolTip="Drama" />
<asp:MenuItem Text="Musical" ToolTip="Musical" />
</asp:MenuItem>
</Items>
</asp:Menu>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
`
Try adding the navbar-right class.
<div class="form-group" class="navbar-right">
I'm trying to use a modal popup extender.
But I have a problem when using it inside an userControl.
I put the drag property true, and PopupDragHandleControlID but I can't drag the popup.
It seams that this problem happens only when I use the popup modal extender inside the userControl.
If I use it inside an aspx page, then it is OK.
Please can you help me how to deal with this problem?
Here is the code that I use in my user control:
<asp:LinkButton ID="lnk" runat="server" Text="Rezervo"></asp:LinkButton>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="lnk"
PopupControlID="pnlBooking" Drag="true" PopupDragHandleControlID="PopupHeader">
</ajax:ModalPopupExtender>
<div id="pnlBooking" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Rezervo</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
</div>
<div class="popup_Buttons">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
</div>