I made two tabs for Fixtures and Results, but when I click on Result tab nothing has change and it remains on Fixtures tab !
This is my code:
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active">Fixtures
</li>
<li class="">Results
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="service-one">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td>
<td class="col-md-2">Manchester United</td>
<td class="col-md-1">vs</td>
<td class="col-md-2">Tottenham</td>
<td class="col-md-2">12:45</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="service-two">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td>
<td class="col-md-2">Manchester United</td>
<td class="col-md-1">5-2</td>
<td class="col-md-2">Tottenham</td>
<td class="col-md-2">Report</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
How can I fix this to switch between tabs and show its content ?
You placed #service-one and #service-two in two different tab contents. That is why its not working.
Place them inside #myTabContent
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active">
<a data-toggle="tab" href="#service-one">Fixtures</a>
</li>
<li class="">
<a data-toggle="tab" href="#service-two">Results</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active in" id="service-one">
.....
</div>
<div class="tab-pane fade in" id="service-two">
.....
</div>
</div>
Here is a demo
Related
After resizing the screensize the nav-link buttons don't use the css i gave them anymore. I tried the #media function but it doesn't react on changes in the css after resizing the screen.
(tables are empty, they get filled by the JS code.)
Why is itn't it responding or using the css after resizing the screen?
before resizing (large screen)
after resizing (smaller screen)
In the picture below you can see that there is some interfering with the code but i don't use the #media function at all but it's still using it.
what the browser is seeing
.annuHypoTabellen .nav-link:hover {
background-color: #ff486dad;
color: #fff;
}
.annuHypoTabellen .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #de002e;
font-weight: 700;
color: #fff;
}
.annuHypoTabellen .nav-link {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: rgba(201, 201, 201, 0.425);
border: 0;
border-radius: 0;
color: #616161;
transition: background-color 0.2s ease;
}
<div class="annuHypoTabellen mt-3">
<div class="row">
<div class="col-md-8 col-xl-9 col-12">
<h4 class="text-gtdirect mt-3 mb-3">
Overzicht totale lasten bij <ins>niet</ins> oversluiten
</h4>
</div>
<div class="col-md-4 col-xl-3 col-12 ml-auto d-flex justify-content-end ">
<ul class="nav nav-pills mb-3 navHypoTabsSmall" id="huidigeHypoTab" role="tablist">
<li class="nav-item">
<a class="nav-link nav-link-annuHypo active" id="pills-jaarHuidigeHypo-tab" data-toggle="pill" href="#pills-jaarHuidigeHypo" role="tab" aria-controls="pills-jaarHuidigeHypo" aria-selected="true">Per Jaar</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-annuHypo" id="pills-maandHuidigeHypo-tab" data-toggle="pill" href="#pills-maandHuidigeHypo" role="tab" aria-controls="pills-maandHuidigeHypo" aria-selected="false">Per Maand</a>
</li>
</ul>
</div>
</div>
<div class="swipeIcons mb-2">
<div class="row">
<div class="col">
<i class="fas fa-arrow-left fa-lg float-left text-gtdirect pt-1"></i>
</div>
<div class="col">
<h5 class="text-center lead">Scroll</h5>
</div>
<div class="col">
<i class="fas fa-arrow-right fa-lg float-right text-gtdirect pt-1"></i>
</div>
</div>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-jaarHuidigeHypo" role="tabpanel" aria-labelledby="pills-jaarHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Totale jaar rente</th>
<th scope="col">Totale jaar aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabelJaar">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-maandHuidigeHypo" role="tabpanel" aria-labelledby="pills-maandHuidigeHypo-tab">
<div class="anhypoResult">
<div class="scrollBox">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Jaar</th>
<th scope="col">Maand</th>
<th scope="col">Rente</th>
<th scope="col">Aflossing</th>
<th scope="col">Schuld ultimo</th>
<th scope="col">Eigen-woning-forfait</th>
<th scope="col">IB-EWF</th>
<th scope="col">IB rente aftrek</th>
<th scope="col">Netto lasten</th>
</tr>
</thead>
<tbody class="annuHuidigeHypoResultTabel">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I recently started using Bootstrap 4 instead of 3. The first problems start to appear...
When i resize the browser window, the divs are getting on top of eachother. They should break to a new row when it does'nt fit anymore.
Why is the happening and how can i prevent it?
Ill followed the docs, but i can't figure out why its doing this. Bootstrap 3 did'nt had this problem (i know, Bootstrap 4 is using flexboxes)
.first-td-bold tr td:first-child {
font-weight: bold;
padding-right: 40px;
}
.no-wrap tr td {
white-space: nowrap;
}
.no-wrap a {
white-space: nowrap;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md-8">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</div>
</div>
</body>
Ok so this seems to do what you are looking for. Here's the pen https://codepen.io/chris-hitchcock/pen/BPybej
I did take out the nested row because it seemed negligible with what you are doing, but if you need to put it back, pretty simple. Basically only declared the width of your first one "col-md-2" the rest are col-md to allow the break but have content flow. Also added a little margin to the first column as the middle column was squishing into your navbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 pad">
<nav class="nav nav-pills flex-column no-wrap">
<a class="flex-sm-fill nav-link active" href="#">Alles</a>
<a class="flex-sm-fill nav-link" href="#">Calculatie</a>
<a class="flex-sm-fill nav-link" href="#">Opdracht</a>
<a class="flex-sm-fill nav-link" href="#">Contract</a>
<a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
</nav>
</div>
<div class="col-md">
<table class="table table-striped first-td-bold no-wrap">
<tr>
<td>Datum toegevoegd</td>
<td>05-08-2017</td>
</tr>
<tr>
<td>Bestandsnaam</td>
<td>179358-Wanden.pdf</td>
</tr>
<tr>
<td>Type</td>
<td>PDF</td>
</tr>
<tr>
<td>Grootte</td>
<td>8.642,35 KB</td>
</tr>
</table>
</div>
<div class="col-md">
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
</div>
</div>
</div>
</body>
I would like to align this entire panel center of the web page. Could someone help me out on this?
Also could you please help me a good book I can use to learn Bootstrap design?
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">
<h3 class="panel-title text-center">User Login</h3>
</div>
<div class="panel-body">
#Html.ValidationSummary(true)
<table class="table">
<tbody>
<tr>
<td>#Html.LabelFor(model => model.Username)</td>
<td>#Html.EditorFor(model => model.Username)</td>
<td>#Html.ValidationMessageFor(model => model.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.Password)</td>
<td>#Html.EditorFor(model => model.Password)</td>
<td>#Html.ValidationMessageFor(model => model.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" class="btn btn-default" style="" />
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Thanking you
Swetha
You can remove css style from panel and wrap this as follows.
<div class="col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
...
</div>
</div>
just add
position:fixed
and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/xyrkyxe8/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
It worth saying that in order to center a panel, or even a group of pannels, it's also possible to use a combination of flex and justify-content property:
.row-fluid {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center row-fluid">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Panel 1</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Line 1</li>
<li class="list-group-item">Line 2</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Panel 2</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Line 1</li>
<li class="list-group-item">Line 2</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Panel 3</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Line 1</li>
<li class="list-group-item">Line 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm taking a long shot at trying to get tabs functional in my LeftAndMain Extension.
I couldn't find any documentation on how one would achieve this so I was just looking at the "Settings" tab setup in the Admin panel.
As I said, long shot :P
This makes them appear beautifully as tabs, however the toggle-between functionality isn't working due to a JS error:
jquery.js:551 Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
/mymodule/templates/MyAdmin_Content.ss
<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content-header north">
<div class="cms-content-header-info">
<% include CMSBreadcrumbs %>
</div>
<div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav ss-tabset">
<ul class="cms-tabset-nav-primary ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0"
aria-controls="Root_Servers" aria-labelledby="ui-id-1" aria-selected="true"><a
href="#Root_Servers" class="ui-tabs-anchor" role="presentation"
tabindex="-1">Main</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Root_Settings"
aria-labelledby="ui-id-2" aria-selected="false"><a
href="#Root_Settings" class="ui-tabs-anchor"
role="presentation" tabindex="-1" id="ui-id-2">Access</a></li>
</ul>
</div>
</div>
<div class="cms-content-fields cms-panel-padded center">
<fieldset>
<div id="Root" class="field CompositeField tabset">
<div id="Root_Servers" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom"
aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false"
style="display: none;">
TAB 1
</div>
<div id="Root_Settings" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom"
aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true"
style="display: block;">
TAB 2
</div>
</div>
</fieldset>
</div>
<div class="cms-content-actions cms-content-controls south text-center">
Footer
</div>
</div>
I'm aware that majority of the tabs classes are added by jQuery UI however I'm yet to discover how these tabs are instantiated for me to trim off what isn't initially required.
I was hoping to simply access updateCMSFields() but method does not exist on LeftAndMain
Hoping for a pointer, thanks
Old question but I got stuck on this as well.
The tabs and the tabbed content need to be in the same "tabs" container. In the case of Silverstripe that container is .cms-tabset so moving that class up to the .cms-content div at the top accomplishes that. Here's the modified code from the question (trimmed some of the fat to make it more legible):
<!-- Add .cms-tabset class here -->
<div class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
<!-- Start north -->
<div class="cms-content-header north">
<div class="cms-content-header-info">
<% include CMSBreadcrumbs %>
</div>
<div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav">
<ul class="cms-tabset-nav-primary">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
<a href="#Root_Servers" class="ui-tabs-anchor" role="presentation" tabindex="-1">
Testing
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#Root_Settings" class="ui-tabs-anchor" role="presentation" tabindex="-1">
Settings
</a>
</li>
</ul>
</div>
<!-- End north -->
</div>
<!-- Start center -->
<div class="cms-content-fields cms-panel-padded center">
<div id="Root" class="field CompositeField tabset">
<div id="Root_Servers" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom">
TAB 1 Content
</div>
<div id="Root_Settings" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom">
TAB 2 Content
</div>
</div>
<!-- End center -->
</div>
I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>