Layout.js file
<div class="row">
<div class="col-12" style={{padding: 0}}>
<div class="tabs-container-fluid">
<MidTabs />
<div class="tab-content">
<Mail />
<PromotionalActiv/>
<Dashboard />
<SalesOver />
<XYZAnalysis />
</div>
</div>
</div>
</div>
MidTabs.js file where hrefs are added for the different tablets.
return (
<div>
<ul class="nav nav-tabs" role="tablist">
<li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with ABC</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-3"> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
<li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>XYZ Analysis</a></li>
</ul>
</div>
);
Dashboard.js file
return (
<div>
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............
I have similar files for Mail.js, PromotionalActiv.js, etc.
The problem is that when I click on a tab like Dashbaord/Mail, etc, I can't see the corresponding content. Instead, all the content in Dashboard, Mail, PromotionalActiv, etc are stacked one below the other. I want that content to be rendered conditionally based on whether the tab has been clicked or not.
Am I making a mistake in the way I'm arranging the components?
If you are trying to control with some custom css, you can do this.
Inside the Dashboard.js file, in the tab-pane class, put display: none;
And in the active class next to tab-pane, put display: block;
Ok, so the issue was that I was adding an extra div in every child component like Mail, PromotionalActive, etc due to which the CSS class was getting affected. After removing the extra div in those components, the problem got solved.
For example, the Dashboard.js file will now look like this without the extra div:
return (
<div role="tabpanel" id="tablet-1" class="tab-pane active">
<div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
<div class="row" style={{marginBottom :30, zoom:"75%" }}>
<div class="timeline col-12" style={{fontSize : 12}}
............
Related
I'm working on a Comments system whose listing has, in its essence, the following format:
body {
font-size: 1.15rem;
}
.comment {
display: flex;
padding: 1rem;
}
.comment .message {
margin: 0 1rem;
}
.comment .replies {
margin-left: 15px;
}
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.dots {
cursor: pointer;
height: 1.5rem;
width: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Lorem ipsum dolor
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #1
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author1">
<div class="col w-175 message">
#author1 - Reply #2
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">
<div class="row comment" data-author="author2">
<div class="col w-175 message">
#author2 - Reply #3
</div>
<div class="col tools">
<div class="dropdown dropstart">
<svg class="icon dots" data-bs-toggle="dropdown" aria-expanded="false" role="menu">
<use xlink:href="#dots" />
</svg>
<ul class="dropdown-menu">
<li class="follow">
<a href="javascript:void(0)">
<span class="ms-2">Follow</span>
</a>
</li>
<li class="d-none follow">
<a href="javascript:void(0)">
<span class="ms-2">Unfollow</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row replies">
<div class="col">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none">
<svg id="dots" viewBox="0 0 24 24">
<path d="M12 16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM10.5 12c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5zm0-6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5z"/>
</svg>
</div>
</svg>
As you can see, comments have an identifier data-attribute with authors' usernames and each Comment has a toolbox of sorts, which I've simplified to one action here.
In this simple example, when the User clicks the *Follow entry, it should flip all of Bootstrap's d-none class on .follow and .unfollow on all toolboxes belonging to that author, so it's possible to Follow/Unfollow without reloading the Page.
Initially, I tried:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $toolbox = $( sprintf( '[data-author="%s"] .tools', username ) );
sprintf() is a 3rd-party component because I honestly don't really like Template Literals
An honest attempt, but when I wrote it I forgot that this would also bring all matching Elements from child selectors. For example, if the variable username above had the value author1, entries on author2 toolbox would also be changed.
Then I've narrowed the selector:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comment = $( sprintf( '[data-author="%s"] .tools', username ) );
const $toolbox = $comment.children().find( '.tools' );
While it solved the previous problem, it created a new one: now entries nested within .replies, even those that DID match the data-attribute, would not change.
Then I tried something silly:
const username = 'author1'; // This actually comes from the data-attribute read when clicking the link
const $comments = $( sprintf( '[data-author="%s"]', username ) );
$comments.each( ( _offset, comment ) => {
const $this = $( comment );
const $toolbox = $this.children().find( '.tools' );
$toolbox.find( 'li.follow' )
.addClass( 'd-none' )
.siblings( 'li.unfollow' )
.removeClass( 'd-none' );
});
And it worked perfectly, but I'm executing the same instructions over and over and over again N times as the data-attribute matches.
How could I accomplish that more efficiently?
[EDIT]
In this very minimalist scenario, the Child Combinator Selector (>) does the trick, however, in the real layout made with Bootstrap Grid, it doesn't. For reference, this is an example of the whole CSS Path:
div#comment_1212130616.comment.gx-0 div.row.gx-3.profile div.col.align-self-center div.row div.col-2.d-flex.flex-row.justify-content-end.tools
I have two tabs,
1) Annotation and
2) Data String.
in a nav tabs
<nav>
<div class="nav nav-tabs nav-fill " id="nav-tab2 " role="tablist ">
<a class="nav-item nav-link active" id="nav-annotations-tab" data-toggle="tab" href="#nav-annotations" role="tab">Annotations</a>
<a class="nav-item nav-link" id="nav-datastringbox-tab" data-toggle="tab" href="#nav-datastringbox" role="tab">String</a>
</div>
</nav>
And the respective divs are as follow:
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent2">
<div class="tab-pane fade show active" id="nav-annotations">
<app-pvgfp-annotation-list></app-pvgfp-annotation-list>
</div>
<div class="tab-pane fade" id="nav-datastringbox">
<div class="line-loader " [hidden]="!lineLoader"></div>
<textarea rows="5 " class="form-control">
</textarea>
</div>
</div>
</div>
And annotation List component consists of
some a-tags, all of which consists of some links.
which(app-pvgfp-annotation-list component) are as follows:
<div>
Google
Facebook
</div>
Now I want, On click of that link, I have to open the #nav-datastringbox tab.
So, Basically, My question is how to open another tab from typescript.
Can anybody please help me to solve this.
I am using bootstrap and react js.
if i use this code in destop view its working fine but i am using this in mobile view onclick function not working
here is my code
JSX CODE
<div className="container main-menu">
<div className="row align-items-center justify-content-between d-flex">
<div id="logo">
<img src="/public/img/logo.png" alt="" title="" className="logo" />
</div>
<nav id="nav-menu-container">
<ul className="nav-menu">
<li>About Us</li>
<li>How It Works</li>
<li>Become A member</li>
<li><a href="#" className="btnlogin" onClick={() => { alert("test"); this.setState({showLoginModal: true});$('#loginModal').modal('show'); $('.eazyforgot').fadeOut('fast');}}>Login</a></li>
<li><a href="#" className="btnlogin" onClick={this.testing}>TEST</a></li>
</ul>
</nav>
</div>
</div>
Here is my function
testing(){
alert("de mo");
}
i used both methods but not working both methods
https://ibb.co/m4pv3K3 'mobile view screen shot no errror comming in console'
https://ibb.co/RS39Rxc 'here is destop view screen capture '
anyone know please help to solve this error.
thanks
Form:
<form asp-action="Edit" method="post">
<ul class="nav nav-tabs">
<li class="nav-item">
<a id="informacje-ogolne-tab" class="nav-link tab-buttons">Informacje ogólne</a>
</li>
<li class="nav-item">
<a id="kategorie-tab" class="nav-link tab-buttons">Kategorie</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="informacje-ogolne-content" class="tab-pane fade">
#await Component.InvokeAsync("ProductEditGeneralInfoTab", new { product = Model })
</div>
<div id="kategorie-content" class="tab-pane fade">
#await Component.InvokeAsync("ProductEditCategoryTab", new { productId = Model.ProductId })
</div>
</div>
<div class="text-left">
<button class="btn btn-primary mt-1" type="submit">Zapisz</button>
</div>
</form>
ProductEditCategoryTab
#model ValueTypeListBoxViewModel
#Html.ListBoxFor(m => m.SelectedValue, Model.Values, new { size = 15 })
<div class="text-left">
<button id="add" class="btn btn-primary mt-1">Dodaj</button>
</div>
<script type="text/javascript"></script>
Inside script tag I want to add javascript logic to add, remove logic from one listbox to another.
But when I press 'Dodaj' it's run the same action as 'Zapisz' button. In this form there will be probably more buttons and the only one that has to run the action should be 'Zapisz'
Question:
How to prevent run action when i press 'Dodaj' and work by javascript/jquery.
I want to custom function too for switch between tabs when clicked on Next button,
I did something like this,this code add the active class into "li" but not show the data under that tab.
How I can do this?
function goNextTab(currtab,nexttab)
{
var curr = $('li.active');
curr.removeClass('active');
curr.next().addClass('active');
$('#'+currtab).attr('aria-expanded', 'false');
$('#'+nexttab).attr('aria-expanded', 'true');
}
<ul id="myTab" role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">Customer
</li>
<li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="job" href="#job" aria-expanded="true">Job</a>
</li>
<li role="presentation">Schedule
</li>
</ul>
<!-- Tab panes-->
<div class="tab-content">
<div id="customer" role="tabpanel" class="tab-pane active">
<button onclick="goNextTab('customer','job')" type="button"> Next</button>
</div>
<div id="job" role="tabpanel" class="tab-pane">
<button onclick="goNextTab('job','schedule')" type="schedule"> Next
</div>
<div id="schedule" role="tabpanel" class="tab-pane">
</div>
</div>
This is how I did it:
curr.removeClass('active');
if (curr.is("li:last")) {
$("li:first-child").addClass('active');
} else {
curr.next().addClass('active');
}
Have a look at the JSFiddle here
1.Remove onclick functions onclick="goNextTab('customer','job')"
2.Bootstrap will automatically takes from href
3. href id and div id should be same
Hope i works..
I suggest to use this:
$("#tabYouSwitchTo").tab('show');
Here is an example:
http://bl.ocks.org/kiranml1/6956013