i am trying to this plugin https://developer.snapappointments.com/bootstrap-select/
It transforms your select into a bootstrap dropdown button. It keeps the select to keep the form consistency, so you can submit the selected value.
however, no transformation occurs.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Final_Year_Project_Allocation_System.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<!-- styling select -->
<link href="silviomoreto-bootstrap-select-d4ec9bd/bootstrap-select.css" rel="stylesheet"
type="text/css" />
<script src="silviomoreto-bootstrap-select-d4ec9bd/bootstrap-select.js" type="text/javascript"></script>
<link href="silviomoreto-bootstrap-select-d4ec9bd/bootstrap-select.min.css" rel="stylesheet"
type="text/css" />
<script src="silviomoreto-bootstrap-select-d4ec9bd/bootstrap-select.min.js" type="text/javascript"></script>
<title>:: Project Allocation System</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="container-fluid">
<form id="form1" runat="server" class="form-horizontal">
<div class="span12"><br /><br /><br /></div>
<div class="row-fluid">
<div class=" span3">
<!--Sidebar content-->
<asp:ContentPlaceHolder ID="SideBarContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="span9">
<!--Body content-->
<asp:ContentPlaceHolder ID="BodyContent" runat="server">
**<select class="selectpicker">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>**
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</div>
</body>
</html>
Related
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
A newly installed visual studio 2010. Then i tried to add bootstrap for better design but its not working
Here is my code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="mySample.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="contents/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar navbar-fixed-top navbar-default" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Job Order System</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Closed Request</li>
</ul>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/script/jquery-2.1.0.min.js") %>"></script>
<script type="text/javascript" src="<%= Page.ResolveUrl("~/script/bootstrap.min.js") %>"></script>
</body>
</html>
It only display a normal list
Please help me solving this kind of problem. Thank you so much
I see 2 potential problems:
You're using a relative URI in the <link /> elements, this won't be a problem if every page is in the root of your website, but it's good practice to make these Application-root-relative URIs. Add runat="server" to the element and begin the href with ~/ and ASP.NET will automatically give it a correct URI
You've put the <link /> inside <asp:ContentPlaceHolder elements, which means they're the "default content" of the placeholders. If any of your pages set content for that placeholder then the default content (i.e. your bootstrap links) will be removed.
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.
Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="kendo_UI.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Styles/kendo/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/kendo/kendo.all.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea id="editor" rows="10" cols="30"> </textarea>
<script type="text/javascript">
$(document).ready(function () {
$("#editor").kendoEditor();
});
</script>
</div>
</form>
</body>
</html>
But textarea appears without kendoEditor :-(
What's wrong?
Thank you!
And no more details ;-(
Kendo UI doesn't work with jQuery 1.9.x. You need to include jQuery 1.8.2. More info can be found in the documentation.
I tried to retrieve the value of a particular variable and alert it.
That is,I wanted to get the value "{"attributes":[{"type":"Text","labels":"Untitled1"}]}
" in that variable. Using the success: function(msg) in ajax ,I alerted the value.
But instead of the required value :{"attributes":[{"type":"Text","labels":"Untitled1"}]}
I am getting the text given below. What is the problem?
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
CakePHP: the rapid development php framework: Forms
</title>
<link href="/cake_1_2/favicon.ico" type="image/x-icon" rel="icon" />
<link href="/cake_1_2/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="/cake_1_2/css/cake.generic.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
CakePHP: The rapid development php framework
</h1>
</div>
<div id="content">
{"attributes":[{"type":"Text","labels":"Untitled1"}]}
</div>
<div id="footer">
<a href="http://www.cakephp.org/" target="_blank">
<img src="/cake_1_2/img/cake.power.gif" alt="CakePHP: The rapid development php framework" border="0" />
</a>
</div>
</div>
</body>
The problem is that you still use the default layout. Try switching to another shipped layout for Ajax-responses:
// In your controller
$this->layout = 'ajax';