I am looking for a tabbed navigation menu which caters for images as the tabitems.
So I have something like this:
<div class="menu">
<a href="#">
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</a>
<a href="#">
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</a>
<a href="#">
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</a>
<a href="#">
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</a>
<a href="#">
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</a>
</div>
I have tried a few jquery/css ones but I cannot find one that gives me a nice style for a tab that contains images?
Try jQuery UI tabs.
Checkout the code on http://jqueryui.com/demos/tabs/#default
Replace Navigation Items in the demo ie.,
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
with your contents, like...
<ul>
<li>
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</li>
<li>
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</li>
<li>
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</li>
<li>
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</li>
<li>
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</li>
</ul>
Size of the images should be suitable for your tab.
Hope you can understand... :)
Related
Using Bootstrap 5, with the navbar being a re-usable component used on many screens. The drop down menus work on all screens except for one, but for the life of me I can't see why that screen is different. JS console shows no errors, the navbar markup is identical to the one used in the other screens.
Any ideas on this are welcome.
Here's the navbar code (some data redacted for client's privacy):
<div class="bg-light">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">client's name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link " href="/bkofc/">Main</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bkofc/cases/" aria-current="page">Screen 1<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownConfiguration" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ניהול
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownConfiguration">
<a class="dropdown-item" href="/bkofc/branches/">config 1</a>
<a class="dropdown-item" href="/bkofc/caseTypes/">config 2</a>
<a class="dropdown-item" href="/bkofc/clients/">config 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bkofc/users/">config 3</a>
<a class="dropdown-item" href="/bkofc/inviteUser/">config 4</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarUserDropdown">
<a class="dropdown-item" href="/bkofc/users/admin/edit">my account</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" action="/bkofc/logout" method="POST">
<input type="hidden" name="csrfToken" value="..." />
<button type="submit" class="btn btn-outline-danger"> logout</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
I have my navbar working great on fullscreen and the toggler is working on smaller screens. However, when you click on the toggler icon the navbar-items appear on the left side of the screen while the toggler-icon appears on the right. How do I fix this so that the navbar-items appear under the navbar icon and on the right side of the screen? I am using Bootstrap 5 for reference.
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image1.png' %}" alt="MagPie Logo">
</a>
<button
class="navbar-toggler navbar-dark"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!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>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img
class="navbar-logo"
src="{% static 'site_base/images/image1.png' %}"
alt="MagPie Logo"
/>
</a>
<button
class="navbar-toggler navbar-dark"
style="background-color: red"
type="button"
data-bs-toggle="collapse"
data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
<ul class="dropdown-menu">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
You can add text-end class on the navbar-collapse or ul.
Note: Try it on tablet to mobile size, I add background-color: red on the button, to make it visible.
I changed all the elements of my dashboard, for an example of the boostrap site itself, but after I made the change, all my partial views opening below the components of the admin screen
ScreenShot:
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-lg-5">
<li class="nav-item">
</li>
</ul>
#Html.Partial("_LoginPartial")
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#Url.Action("Index", "Barcos")">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
My Partial Example:
<div style="margin-top:40px" class="jumbotron">
<h1>EXAMPLE</h1>
</div>
Resolved, the renderbody was in the wrong place.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#Url.Action("Index", "Barcos")">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
#RenderBody()
</main>
</div>
</div>
I am rendering this partial in adminlte.html.erb file but it is not loading properly. I tried to put this code inside the admin file itself which is rendering this partial but it is still not loading properly.I also checked in other browsers.When I inspect the element,the sidebar suddenly loads by itself.
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<%= image_tag("user2-160x160.jpg", class: 'img-circle')%>
<!-- <img src="images/user2-160x160.jpg" class="img-circle" alt="User Image" />-->
</div>
<div class="pull-left info">
<p>abcd</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<!--Dashboard-->
<li class="active treeview">
<a href="/">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-circle-o pull-right"></i>
</a>
</li>
<!-- Dashboard END -->
<!--USER-->
<li class="treeview">
<a href="#">
<i class="fa fa-user"></i> <span>Manage User</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="active"></i> Create User</li>
<li><i class="fa fa-circle-o"></i> List User</li>
</ul>
</li>
<!-- USER END -->
<!--MY_PROJECT -->
<li class="treeview">
<a href="#">
<i class="fa fa-sitemap"></i>
<span>My Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Active</li>
<li><i class="fa fa-circle-o"></i> Completed</li>
<li><i class="fa fa-circle-o"></i> Hold</li>
</ul>
</li>
<!--END MYPROJECT-->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-envelope"></i> <span>Followups</span>
<small class="label pull-right bg-yellow">12</small>
</a>
</li>
<!--END FOLLOW UPS -->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-laptop"></i> <span>Manage RMs</span>
</a>
</li>
<!--END FOLLOW UPS -->
<!-- CALLS -->
<li class="treeview">
<a href="call_records/">
<i class="fa fa-mobile"></i>
<span>Calls</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CALLS -->
<!-- CONTACTS -->
<li class="treeview">
<a href="#">
<i class="fa fa-file-audio-o"></i>
<span>Contacts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> +New Contact</li>
<li><i class="fa fa-circle-o"></i> Assigned</li>
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CONTACTS -->
<!-- ACTIONS -->
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Actions</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<!--END ACTIONS -->
</ul>
</section>
<!-- /.sidebar -->
</aside>
I'm rendering this partial like
<html>
<body>
<%= render partial: 'layouts/admin_lte_2_sidebar' %>
</body>
</html>
Please help me out to solve the issue. Thanks in advance.
This is because of the height value in slimScrollDiv
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 480px;">
What you can do from here on is to modify your css into
.slimScrollDiv{height: auto !important;}
This will not limit the height of the div
There are one layout page and one page using the layout page. In the Create page there is one textarea id= editor1. In the All the js and css were load successful. But the ckeditor not show, just a blank textarea
The output:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/sb-admin-2.css" rel="stylesheet">
<link href="/css/jquery-ui.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<script src="/js/jquery-ui.js"></script>
<link href="/css/jquery-ui/style.css" rel="stylesheet"/>
<script type="text/javascript">
$('#editor1').ckeditor();
</script>
<script src="/ckeditor/ckeditor.js"></script>
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</button>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="/Home">
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</a>
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Quản lý chung<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Quản lý loại
</li>
<li>
Quản lý danh mục
</li>
<li>
Quản lý sách
</li>
<li>
Quản lý tác giả
</li>
<li>
Quản lý nhà xuất bản
</li>
<li>
Quản lý đối tác vận chuyển
</li>
<li>
Quản lý tỉnh thành
</li>
<li>
Quản lý Đơn hàng
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i>Form
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li class="active">
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a class="active" href="blank.html">Blank Page</a>
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<h2>Create</h2>
<form action="/BeTacGia/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="kzj5sfQHJry54YaqB11hNT3F_72kkly2EG6JnofMrGtIVcAO4YbNUk7aD1wv7db0OPEEUsVdmvT96Nv_tWPer3RkDY1PMLqJskWGDWkT-WQ1" /> <div class="form-horizontal">
<h4>TacGia</h4>
<hr />
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<div class="form-group">
<label class="control-label col-md-2" for="Ten">Ten</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Ten" name="Ten" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Ten" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="NgaySinh">NgaySinh</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field NgaySinh must be a date." data-val-required="The NgaySinh field is required." id="ngaySinh" name="NgaySinh" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="NgaySinh" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="NgayMat">NgayMat</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field NgayMat must be a date." id="NgayMat" name="NgayMat" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="NgayMat" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="MaGioiTinh">Giới tính</label>
<div class="col-md-10">
<select class="form-control" id="MaGioiTinh" name="MaGioiTinh"><option value="False">Nữ </option>
<option value="True">Nam </option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="MaGioiTinh" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<div id="tabs-2">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<textarea cols="20" id="editor1" name="editor1" rows="2">
</textarea>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</form>
<div>
Back to List
</div>
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<!-- Metis Menu Plugin JavaScript -->
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script type="text/javascript">
$("#editor1").ckeditor();
</script>
<script src="/ckeditor/ckeditor.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"a0659a041f2c43debc9047700eda9c38"}
</script>
<script type="text/javascript" src="http://localhost:51010/3ea56a66c2ef4b65975354424aa8f008/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Thanks for the edit, it's a little more clear now. This was too long to be a comment.
Here's some things you might want to have a look at
You have $('#editor1').ckeditor(); 2 times, remove the first
You have <script src="/ckeditor/ckeditor.js"></script> 3 times, remove the 2nd and 3rd
Replace the 2nd $('#editor1').ckeditor(); with CKEDITOR.replace( 'editor1' );
Are you using the CKE jQuery adapter or did you come up with the jQuery-like selector on your own or..? Do you have any errors in your browser dev console?