I am creating a project Where I have a homepage with a sidebar. On click of the sidebar, the component is supposed to be loaded on the right hand side of the page. I have done the routing for the same too. Can anyone help me?
<div class="container">
<div class="row">
<app-mentor-sidebar></app-mentor-sidebar>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#" >
<em class="fa fa-home"></em>
</a></li>
<li class="active"><a [routerLink]="">Dashboard</a></li>
<li class="active"><a [routerLink]=""> {{breadcum}}
</a></li>
</ol>
</div>
<br>
<div class="row">
<div class="btn-group">
<button class="btn btn-primary" (click)=goback(); >Back</button>
</div>
<router-outlet> </router-outlet>
</div>
</div>
</div>
The is supposed to load the html component but nothing is happening.
Related
I am trying to show the screen like in the image
list inside a container
the problem is the whatever I do, the list is on the bottom of the container like here
the HTML:
<div class="container" ng-init="getCartItems()">
<div class="hidden-xs">
<div class="">
<div class="title">סיכום הזמנה</div>
</div>
</div>
<div class="row">
<div ng-include="'templates/cart.html'"></div>
<div class="subTotalTabs">
<div class="col-md-3 col-xs-12">
<ul class="list-unstyled text-center">
<li>הוספת מבצע</li>
<li><a ng-click="addToCart()" class="clickable btn btn-lg borderBox padTop5 padBtm5 f22">הוספת פיצה</a></li>
<li>הוספת שתייה</li>
<li>מוצרים נלווים</li>
<li><a ng-click="clearCart()" class="my-btn-sqr my-btn-sqr-danger padTop5 padBtm5 f22">רוקן עגלה</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</div>
How can I fix this? Thanks!
`
On initial load, the content from both tabs show on the webpage, once the tab is clicked for the first time they begin to work as expected.
Any ideas on why this is happening?
Here is my html
<div id="userFunctions" style="display: none;" >
<h2 id="welcome"></h2>
<button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button>
<br>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li>
<li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li>
</ul>
<div class = tab-content>
<div id="subscriptionManagement" class="tab-pane fade in active">
<hr>
<section id="sendSubRequest">
<h4>Request Subscription</h4>
<div class="input-group">
<input type="text" id="subUserName" class="form-control "></input>
<span class="input-group-btn">
<button id="btnSubUser" class="btn btn-primary">Subscribe</button>
</span>
</div>
</section>
<br>
<section id="ReviewSubRequests">
<h4>Incoming Request(s)</h4>
<ul id='subscriptionsList'>
</ul>
</section>
</div>
<div id="locationManagement" class="tab-pane fade in active">
<hr>
<section id="cityDetails">
<section id="map">
</section>
<br>
<section>
<button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button>
</section>
</section>
<section id="friendsList">
<h4>Subscribed Friends</h4>
<ul id='subscribedUsers'>
</ul>
</section>
</div>
</div>
</div>
Both your tabs (#subscriptionManagement and #locationManagement) have the active class, meaning they are both active by default. This class should be getting added on navigation, indicating that the content should be shown. You simply need to remove this class from the tab which you don't want to show on initial load:
Change:
<div id="locationManagement" class="tab-pane fade in active">
To:
<div id="locationManagement" class="tab-pane fade in">
Hope this helps! :)
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.