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">
Related
I have built a form in HTML 5 that is in a modal window and wrapped in Bootstrap and the layout is perfect. I have the need to use another modal window, however instead of the form being built in HTML 5 I need to place and iframe in the modal and display and asp form. I have wrapped everything identically in Bootstrap, but for some reason the label next to my form control displays on top and not next to. I'm stumped, I have played with CSS for two days now trying to figure out why. Thoughts?
HTML CODE FOR FORM THAT LAYS OUT PERFECT
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width:100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Observation Form</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
<fieldset>
<!-- Form Name -->
<!-- Enter Building -->
<div class="form-group">
<label class="col-md-3 control-label">Building</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
</div>
</div>
</div>
IMAGE FOR PERFECT LAYOUT
ASP CODE WRAPPED IN IFRAME THAT IS DISPLAYING IN MODAL
<form id="form1" runat="server" class="well form-horizontal">
<fieldset>
<legend>File Upload Form</legend>
<div class="form-group">
<label class="col-md-3 control-label">Choose File</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
</div>
</div>
</div>
<asp:HiddenField ID="site" runat="server" />
<asp:HiddenField ID="dateobserved" runat="server" />
<asp:HiddenField ID="guid" runat="server" />
<asp:HiddenField ID="username" runat="server" />
<asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
</fieldset>
</form>
IMAGE FOR INCORRECT LAYOUT
To me it seems like you need to set a width to the iframe 'cause the modal size isn't changing. Try set width to 100% for the iframe
i try to design a popup window in my aspx page. The problem is the page is reloaded and the popup not shown!
here is the code
aspx
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:Label ID="popuplbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" PopupControlID="panel1" TargetControlID="popuplbl" CancelControlID="cancelbtn" runat="server"></cc1:ModalPopupExtender>
<asp:Panel ID="panet1" class="modal fade in" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal"></button>
<h4 class="modal-title">New Study Design</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Some Input</h4>
<p><input class="col-md-12 form-control" type="text"> </p>
<p><input class="col-md-12 form-control" type="text"> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="cancelbtn" class="btn default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn blue" type="button">Add</button>
</div>
</div>
</div>
</asp:Panel>
<button runat="server" id="AddNew_StudyDesign" class="btn sbold green" title="Add New Study Design" style="width:200px" onserverclick="AddNew_StudyDesign_Click" >
Add New Study Design <i class="fa fa-plus"></i>
</button>
c#
protected void AddNew_StudyDesign_Click(object sender, System.EventArgs e)
{
mpe.Show();
}
I try using "ToolkitScriptManager" but it is not known!
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server" />
I can see one issue,
Replace PopupControlID attribute in ModalPopupExtender ,
PopupControlID="panel1"
To
PopupControlID="panet1"
Panel ID is panet1, not panel1.
Additionally, Panel should have display style none (style="display:none;"), but you can keep as per your requirements.
I have code html bootstrap, but when display incorrect.enter image description here
code bootstrap
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.js" rel="stylesheet" />
<script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
</form>
</body>
</html>
when display on browser
It appears your bootstrap css is either not being included or you have some other css overriding it.
Translated from Google:
Nó xuất hiện "bootstrap.css" hoặc là không được bao gồm hoặc bạn có một số css khác ghi đè lên nó.
ASPX Markup:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
Renders HTML:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
Run the snippet and you can see it works.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
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>
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>