is it possible to fix the dropdown list items after first click? I'm using bootstrap and have created a header with two Menu items. I want, if user clicks on first menu item then it will be open until unless when he/she clicks on second menu item.
this is something, I've already prepared. The below code will produce fixed header at top position of the web page with two Menu items called Menu1 and Menu2
Menu1 has 5 submenu items which will be displayed in horizontal list.
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topmenu">
<div class="container-fluid">
<div class="navbar-header">
<img src="~/Content/img/logo.png" style="padding-top:6px" class="pull-left" />
<ul class="nav navbar-nav">
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>
</div>
</div>
<div class="panel navbar-inverse" id="submenu">
<ul class="nav navbar-nav collapse" id="one">
<li>#Html.ActionLink("Submenu1", "Submenu1", "Submenu1Controller")</li>
<li>#Html.ActionLink("Submenu2", "Submenu2", "Submenu2Controller")</li>
<li>#Html.ActionLink("Submenu3", "Submenu3", "Submenu3Controller")</li>
<li>#Html.ActionLink("Submenu4", "Submenu4", "Submenu4Controller")</li>
<li>#Html.ActionLink("Submenu5", "Index", "Home")</li>
</ul>
</div>
</nav>
<div class="container-fluid body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My Website</p>
</footer>
</div>
</body>
slight adjustments to the .panel css in bootstrap.css file to make
.panel {
margin-bottom: 0px;
background-color: #fff;
border: .5px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
now what I want is, when user clicks on menu1 then it will display the associated submenu items and list will keep open (not collapsed) unit unless user click on Menuitem2.
This means that in second or next attempt if he/she click on Menu1 again or click any of the associated SubMenu item under menu1 then list will keep open and not get collapsed.
Related
Navbar toggle button is coming in center on small screen. how can i move it to right??
i tried few ways but it is not working. However the navbar works fine on medium and large screens.
here is my code:
""
<!-- ========================= Theme Feature Page Menu ======================= -->
<nav class="navbar float-right navbar-expand-lg navbar-expand-md theme-main-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle float-xs-right collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menu</span>
Menu
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li class="dropdown-holder">ABOUT COLLEGE
<ul class="sub-menu">
<li>College Profile</li>
<li>Principals Message</li>
<li>Vision & Mission</li>
<li>Committee List</li>
<li>Photo Gallery</li>
</ul>
</li>
<li>CONTACT
</ul>
</div><!-- /.navbar-collapse -->
</nav> <!-- /.theme-feature-menu -->
</div>
</header> <!-- /.theme-main-header -->""
Within the desired CSS file of yours declare definition sizes and then use float: right;
Example:
#media (min-width: 576px) and (max-width: 767px) {
.navigation.navbar {
float: right;
display: inherit !important;
padding: 0;
width: 100%;
}
.navigation .navbar-collapse {
background: #fff;
padding: 20px;
margin-top: 56px;
position: absolute;
width: 100%;
margin-right: 20px;
z-index: 999;
}
.navigation.navbar-dark .navbar-nav .nav-link {
padding: 10px 0;
color: #000;
}
.navigation.navbar-dark .navbar-toggler {
border-color: #fff;
float: right;
}}
Without the float atrribute the navbar will not responsively move to the given definitions.
I am trying to implement ngx-infinite-scroll
I am unable to get it to do what I want which is listen to my browser or window scroll so I may scroll content and load when needed.
What's happening is can implement this library ONLY when I set the scroll to listen to some other div so the result is two scroll bars (1) browser window scroll bar (2) content div scroll bar - this is not desirable and creates a real messy UX.
You will notice a setting in the template "scrollWindow" I have tried changing this value without any success I'm not too sure what i'm doing wrong here...
Environment
Angular 8 with Angular Material
Template and Styling:
.container {
height: 100vh;
width: 70vw;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
overflow-y: auto;
}
HTML
<app-navigation-bar></app-navigation-bar>
<app-userpost></app-userpost>
<div *ngIf="loading">
<app-progress-spinner></app-progress-spinner>
</div>
<!-- infinite scroll div -->
<div
class="container"
infiniteScroll
[infiniteScrollContainer]="container"
[scrollWindow]="false"
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="5"
[infiniteScrollThrottle]="300"
(scrolled)="onScrollDown()"
>
<mat-card *ngFor="let post of postObjects">
<mat-card-header>
<img mat-card-avatar src={{post.profile_picture}} alt="no profile image">
<mat-card-title>{{post.email}}</mat-card-title>
<mat-card-subtitle> {{post.upload_date | date:"medium"}} </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src={{post.photo}}>
<mat-card-content>
<p>
{{post.author_comment}}
</p>
</mat-card-content>
<!-- This fills the remaining space of the current row -->
<mat-card-actions class="action-buttons">
<button mat-button color="primary" (click)="post_like(post.post_id)">
<mat-icon>thumb_up_alt</mat-icon> {{post?.post_likes?.length}} Likes
</button>
<button mat-button color="primary" (click)="post_dislike(post.post_id)">
<mat-icon>thumb_down</mat-icon> {{post?.post_dislikes?.length}} Dislikes
</button>
<button mat-button color="primary">
<mat-icon>share</mat-icon> Share
</button>
<a mat-button color="primary" target="_blank">
<mat-icon>visibility</mat-icon> View
</a>
</mat-card-actions>
<mat-accordion>
<div *ngIf="post?.post_comments?.length > 0">
<mat-expansion-panel>
<mat-expansion-panel-header>
<div class="comment-header">
<span class="label label-primary">{{post?.post_comments?.length}} Comments</span>
</div>
</mat-expansion-panel-header>
<mat-list>
<div *ngIf="post?.post_comments?.length > 0">
<div *ngFor="let postSection of post.post_comments; let i = index">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header collapsedHeight="80px" expandedHeight="30px">
<mat-panel-title>
<div style="max-height: 53px; text-overflow: ellipsis">
<img mat-card-avatar
src="https://source.unsplash.com/random/200x200"
style="padding: 5px">
<strong
style="padding: 5px">{{postSection?.comment_author}}</strong>
<small style="padding: 5px">
{{postSection?.date | date:"medium"}}</small>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<hr>
<p>{{postSection?.post_comment}}</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-accordion>
<form [formGroup]="PostComment">
<div class="input-group">
<div id="container">
<div id="profile_img">
<div class="actions">
<div class="avatar">
<img class="d-flex mr-3 rounded-circle" src={{userAvatar}} alt="Cannot Load Photo"
width="30" height="30">
</div>
</div>
</div>
<mat-form-field class="example-full-width" style="margin-top: 10px;">
<textarea matInput formControlName="post_comment" #message maxlength="500"
placeholder="Leave a comment"></textarea>
<mat-hint align="start">
<strong>Say something constructive..</strong>
</mat-hint>
<mat-hint align="end">{{message.value.length}} / 500</mat-hint>
</mat-form-field>
<div class="post-button">
<button mat-raised-button (click)="createComment(post.post_id)">Post</button>
</div>
</div>
</div>
</form>
</mat-card>
<div *ngIf="end_of_data">
<strong><h3>No More Data To Load..</h3></strong>
</div>
</div>
change this [infiniteScrollContainer]="container" by [infiniteScrollContainer]="'.container'"
I have combed through compatibility issues on this site looking for fixes for this problem and I cannot seem to find any posts with quite the same issue as me.
Basically, when I load the app in chrome browser and inspect through all phone sizes, it is responsive and it works. However when I actually open the app web address in my personal iphone, the toggle menu does not work. It drops down behind the main content and is hardly clickable. Can anyone help?
Here is a link to the app:
https://evening-stream-86674.herokuapp.com/index.html
Here is the portion of the CSS file:
* {
box-sizing: border-box !important;
}
html {
height: 100%;
}
body {
background: url("../images/tree.png") no-repeat center center fixed;
background-size: cover;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
/*my favorite lime green color #47dd1b*/
li {
background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0 !important;
height: 8%;
}
#media only screen and (max-width: 640px) {
/* For mobile phones: */
li {
width: 100%;
}
.navbar {
width: 100%;
}
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">John Wolfe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>
About
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="wrap">
Edited to show less code.
How I can align the icon to the rightcorner position.
but it needs to be responsive too.
I have tried using header in ionic but the right alignment is not working properly.
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
By right corner position, do you mean you want it to be on the header bar's right corner side?
If so, any button/a tag after h1 div would be placed on the right side.
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
If not, can you provide a codepen so I can take a look?
You can try this with position: absolute on image span. Something like this:
<div class="bar bar-header" style="background-color:silver; position:relative">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
You can also use float: right:
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="float:right">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
I guess this might solve your problem of right aligning your image along with responsive design.
I have used "-webkit-overflow-scrolling: touch" to have smooth swipe across the screen for mobile (IOS Device).My page have 5 list items and need to swipe smoothly.After added class "-webkit-overflow-scrolling: touch" Can see a horizontal scroll bar which goes away after I complete my swipe or remove hand from device.
I have tried using overflow-y hidden but this doesn't help
How to disable this horizontal scroll bar?
<div class="nav-tablist">
<ul class="nav-listitems" id="tab-controls" role="tablist">
<li class="nav-item active" >
Home
</li>
<li class="nav-item" >
<a href="" class="navtab-link " id="aboutus" aria-controls="tabs_aboutus" role="tab" tabindex="-1" aria-selected="false">aboutus
</a>
</li>
<li class="nav-item" >
help
</li>
<li class="nav-item" >
<a href="" class="navtab-link " id="contact" aria-controls="tabs_contact" role="tab" tabindex="-1" aria-selected="false"> Stores
</a>
</li>
<li class="nav-line" aria-hidden="true" style="width: 48px; left: 0px;"></li></ul>
</div>
Here is my code ....