I need to change an exising ASPX page by adding a tab control. This will change the layout and so I have started with this tag:
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">TAB1</li>
<li>TAB 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="tab1">
This is Tab 1
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
This is Tab 2
</div>
</div>
</div>
</div>
Now, I need to insert a control for tab panel. How can I share it and modify it on the fly during swtich from one tab to another tab?
I will appreciate it.
Thanks.
p.s. I'm not an expert in this so are there better ways or sample that you could share?
Related
I'm trying to display a grid of cards with information retrieved by the backend, but it seems that the bootstrap classes are not working as intended. The layout.cshtml view appears to display bootstrap properly, and other views I have do too. Don't know if its just something with the .card and row/col classes or is a larger issue.
<div class="row">
#foreach (var product in Model)
{
<div class="col-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" style="width: 18rem;" src="#product.Url" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">#product.Title</h5>
<p class="card-text">#product.Price</p>
</div>
</div>
</div>
}
</div>
What the page looks like:
https://imgur.com/a/8yEDxee
For example: when home is clicked #Url.Action("Information", "Admin") has to be viewed and when menu1 is clicked #Url.Action("Information1", "Admin1") has to be viewed.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#Url.Action("Information", "Admin")
</div>
<div id="menu1" class="tab-pane fade">
#Url.Action("Information1", "Admin1")
</div>
<div id="menu2" class="tab-pane fade">
#Url.Action("Information2", "Admin2")
</div>
<div id="menu3" class="tab-pane fade">
#Url.Action("Information3", "Admin3")
</div>
</div>
</div>
The tab-content divs are intended to be used if you have rendered the HTML for each tab already, and you simply wish to show/hide them on the page (which Bootstrap does using some JavaScript).
In your case, you actually want to show different pages, so you should add just the 'nav-tabs' HTML to each page, and use #Url.Action in the hrefs instead.
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
You will need to manually control the "active" class on the li on each page.
If you do actually want to pre-render the HTML so it all shows in one page, then rather than use Url.Action as in your question, you should be rendering a set of partial views using Html.RenderPartial instead.
I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Tabdrops Source
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script>
<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<li>Tab 8</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>
I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?
I had same issue. The tabdrop plugin initialized when window re-size.
I solved it by resizing the window after init tabdrop.
$(window).resize();
Below is some html code.
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single" style="width: 389px;">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)">
<span>Choose an Option</span>
<div>
<b></b>
</div>
Upon clicking the dropdown the list pops up.
I'm trying to locate an element with the C# code below:
driver.FindElement(By.XPath("//div[#Id='ServiceTypeId_chzn']")).Click();
But I'm unable to locate it.
XPath is case-sensitive:
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single" style="width: 389px;">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)">
<span>Choose an Option</span>
<div>
<b></b>
</div>
id="ServiceTypeId_chzn"
//div[#Id='ServiceTypeId_chzn']
Should be: //div[#id='ServiceTypeId_chzn']
I have modal that opens up and in that modal i want to show tabbed navigation. i have the following code
<div id="TaskListDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
<h3>Task List</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Data 1
</div>
<div class="tab-pane" id="tab2">
<p>Data 2.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
the problem i have is that modal launches with the first tab but on clicking the second tab nothing happens.
what have i missed that it's not loading the second tab.
any help highly appreciated.