I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .
But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .
This is what i have tried.
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div class="well">
<input type=”text” value="{{i.comment}}" [readonly]="false" /><span>
Edited <time>{{today | amDifference: i.createdAt :'minutes'
: false}}</time> before
</span><a><i
class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="edit(index)"></i></a>
</div>
</div>
</div>
</div>
I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.
You can use ngIf-Else to provide a second template to show like such:
<div class="tab-content">
<div id="email" class="tab-pane active">
<div *ngFor="let i of comments; let index = index" [#flyInOut]>
<div *ngIf="i.editMode; else editBlock" class="well">
<!-- Show stuff here -->
<a>
<i class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
(click)="i.editMode=true">
</i>
</a>
</div>
<ng-template #editblock>
<div class="well">
<!-- Edit stuff here -->
<input type="button" (click)="i.editMode=false" value="Done"/>
</div>
</ng-template>
</div>
</div>
</div>
I have this html file am working on with semantic UI,the final product is supposed to look like the one in the pic.However it doesn't render well and the image keeps being pushed to the far left side of the screen.More so the elements are also improperly aligned.Where am i growing wrong ? Here is the current code.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<meta http-equiv= "X-UA-Compatible" content ="IE=edge,chrome=1"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0,maximum-scale =1.0"/>
<title>SEMANTIC UI</title>
<!--Site properties-->
<!--CSS-->
<link rel = "stylesheet" type ="text/css" href ="dist/semantic.min.css">
<link rel = "stylesheet" type ="text/css" href ="dist/mycss.css">
<script type ="text/javascript" src = "dist/jquery.js"></script>
<!--Javascript-->
<script type ="text/javascript" src = "dist/semantic.min.js"></script>
<script type ="text/javascript" src = "dist/myjs.js"></script>
</head>
<body>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon">Cities</i></a>
<a class ="item" href ="#"><i class="car icon">find a ride</i></a>
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"></div>
<button class = "ui button green">
<i class = "users icon">Sign Up</a>
</button>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui secondary inverted top large pointing menu">
<div class = "left item">
<a class "toc item">
<i class ="sidebar icon"></i>
</a>
</div>
<div class = "right-item">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon">Find a Ride</i></a>
<div class = "item">
<div class = "ui buttons">
<button class = "ui button black">
<i class = "sign in icon"></i>Login
</button>
<div class = "or"><div>
<button class = "ui button green"><i class ="users icon"><i class = "users icon">Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container fluid findbg">
<form class ="ui form">
<div class = "field">
<div class = "fields">
<div class = "eleven wide field">
<div class = "ui search location">
<div class = "ui left icon input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code file
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
I'd have to say that you have a few errors in your markup:
unmatched closing tags (<i> is paired to </a>)
Misuse of Semantic UI icon tags. You shouldn't put any text inside <i class="<icon name> icon"></i> as this is
translated by Semantic UI to icons specified in the class attribute.
(As pointed out by #Anirudh) Improperly closed tag (i.e. <div class="or"> <div>)
Kindy check the code below for reference. Not sure if I achieved your desired look but it fixed the broken display in your existing markup.
.landing{
background:url("bg.jpg") #103d50 70% 30% no-repeat !important;
}
.landing.segment{
min-height: 500px;
padding:0em 0em;
}
.transbg{
min-height: 500px;
background:rgba(32,154,189,0.655);
}
.menu{
border:0px!important;
}
.landing h1.ui.header{
margin-top: 4.2em;
margin-bottom: 0.11em;
font-weight: 100;
}
.findbg{
padding: 1em 1.5em;
width:100%;
background:rgba(255,255,155,0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!--sidebar-->
<div class = "ui sidebar menu large compact container icon labeled vertical thin">
<a class ="item" href ="#"><i class="global icon"></i>Cities</a>
<a class ="item" href ="#"><i class="car icon"></i>find a ride</a>
<div class="item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class="or"></div>
<a class = "ui button green">
<i class = "users icon">Sign Up</i>
</a>
</div>
</div>
</div>
<!--Main content-->
<div class = "pusher">
<div class = "ui vertical aligned center segment landing inverted">
<div class = "transbg">
<div class = "ui container">
<div class = "ui fluid secondary inverted top large pointing menu">
<a class = "toc item">
<i class ="sidebar icon"></i>
</a>
<div class = "right menu">
<a class = "active item" href = "/">Home</a>
<a class ="item" href ="#">Cities</a>
<a class = "item" href="#"><i class = "car icon"></i>Find a Ride</a>
<div class = "item">
<div class = "ui buttons">
<a class = "ui button black">
<i class = "sign in icon"></i>Login
</a>
<div class = "or"></div>
<a class = "ui button green"><i class = "users icon"></i>Sign Up</a>
</div>
</div> <!-- item -->
</div><!-- right menu-->
</div><!-- pointing menu -->
</div>
<div class = "ui text container">
<h1 class = "ui header centered inverted">Look up for a ride near you</h1>
<div class = "container findbg">
<form class ="ui form">
<div class = "fields">
<div class = "sixteen wide field">
<div class = "ui search location">
<div class = "ui left icon fluid input">
<i class = "inverted circular blue map icon"></i>
<input class = "prompt"type = "text" name = "location" placeholder = "enter your location...">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
AdminLTE is based on Bootstrap: https://github.com/almasaeed2010/AdminLTE
Live Preview: http://almsaeedstudio.com/preview/
But I'm unsure as to how to make the collapsable boxes collapsed by default.
I'm assuming since it is built on Bootstrap, this should be rather straightforward. I've tried fellow implementations such as setting the id to "collapsedOne" and attempting to treat the divs as accordions, but to no avail.
On the AdminLTE/app.js ~line 45 there is code that implements slide up/slide down to collapse boxes. Ideally, what we'd want is to have the boxes be in the "slide up" state by default with the class "collapsed-box" so that when the icon is clicked, it executes "slide down".
/*
* Add collapse and remove events to boxes
*/
$("[data-widget='collapse']").click(function() {
//Find the box parent
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!box.hasClass("collapsed-box")) {
box.addClass("collapsed-box");
bf.slideUp();
} else {
box.removeClass("collapsed-box");
bf.slideDown();
}
});
Any suggestions?
Thanks in advance.
When the page loads in its initial state, why not just add the collapsed-box class to box element?
The below will render in the collapsed state and function without modifying AdminLTE:
<!-- Default box -->
<div class="box box-solid collapsed-box">
<div class="box-header">
<h3 class="box-title">Default Solid Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
<button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div style="display: none;" class="box-body">
Box class: <code>.box.box-solid</code>
<p>bla bla</p>
</div><!-- /.box-body -->
</div><!-- /.box -->
$("[data-widget='collapse']").click() Add that to a JavaScript file that runs at the bottom
Here are the steps:
Change the minus icon to plus .
Add explicit style "display:none" to box-body
Add the class "collapsed-box" to the box
For those who are using AdminLTE 2.1.1
just simply add sidebar-collapse class on the <BODY>
Before:
<body class="skin-blue sidebar-mini">
After:
<body class="skin-blue sidebar-mini sidebar-collapse">
An open box:
<div class="box">
A collapsed box:
<div class="box collapsed-box">
And then ofcourse change the icon on the button
In Admin LTE 3 collapse by default by using the class collapsed-card on the main card.
Like this
<div class="col-md-3">
<div class="card collapsed-card">
<div class="card-header" >
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="card-body" >
The body of the card
</div>
</div>
</div>
You should change the icon to a fas fa-plus then the initial box starts with a plus
$("[data-widget='collapse']").click(function() {
//Find the box parent........
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!$(this).children().hasClass("fa-plus")) {.
$(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
bf.slideUp();
} else {
//Convert plus into minus
$(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
bf.slideDown();
}
});
and use in section div
for one specify div
$(function() { $('your-button-id').click(); })
for all
$(function() { $("[data-widget='collapse']").click(); })
Simply add "collapsed-box" to the box and change this:
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
to
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
This should work for me
The correct tested Steps which worked for me are :
Add explicit style "display:none" to box-body
You are done :)
<div class="box ">
<div class="box-header with-border bg-yellow">
<h3 class="box-title">Box Title Here</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body" style="display: none;">
<div class="table-responsive">
<!--Your content here -->
</div><!-- /.table-responsive -->
</div><!-- /.box-body -->
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
This soluction worked for me:
I added "collapse-left" class for the menu and added the "strech" class for the main content.
I use the version 1 for the AdminLTE. It is divided in aside class="left-side" for the left menu and aside class="right-side" for the main content.
So, this is the final code:
<aside class="left-side collapse-left">
<!-- put the left menu here -->
</aside>
<aside class="right-side strech">
<!-- put the main content here -->
</aside>
I added this to the boxWidget object:
setInitialCollapseStatus: function (container) {
var _this = this;
var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');
collapsedBoxes.each(function (index) {
var box = $(this);
//Convert minus into plus
box
.removeClass(_this.icons.collapse)
.addClass(_this.icons.open);
});
}
and called it during initializiation:
activate: function (_box) {
var _this = this;
if (!_box) {
_box = document; // activate all boxes per default
}
//Listen for collapse event triggers
$(_box).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(_box).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
// Set initial collapseStatus
_this.setInitialCollapseStatus($(_box));
},
Add css classes into body tag in the index.html file:
sidebar-closed sidebar-collapse
<body class="hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed">
With Adminlte 3:
Card Parent add ID: <div class="card card-default" id="a">
Change <i class="fas fa-minus"></i> TO => <i class="fas fa-plus"></i>
Add Display:none <div class="card-body" style="display:none">
Add jquery $('#a').CardWidget('toggle');
I am trying to align some button and a input box with a table. Previous day and next day may or may not be present on the page depending on if a day exists. Below is by start code, current output and desired output.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<br>
<button class="btn" name = "prevDayBtn"><i class="icon-backward"></i> Previous Day</button>
<input type='text' READONLY name = 'pageDate' value = '2013-05-18' />
<button class="btn" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
<br>
<br>
<table class = "table table-striped">
<th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</form>
</div> <!-- /container -->
</body>
</html>
Current Output
Desired Output
Edit:
I tried Accipheran answer and got the result below. Also added code to jsFiddle http://jsfiddle.net/Y9SLs/1/
I would give the next-day button a class of pull-right (a bootstrap class) and the date field a class of center (custom class) where center is defined as
.center {
float: none;
display: table;
margin: 0 auto;
}
Think that should work
In addition to Accipheran's answer I used Twitters grid system to get the desired result. Code Below:
HTML
</head>
<body>
<div class="container">
<form class = "form-inline" >
<h1>some data</h1>
<div class = "row">
<div class = "span4">
<button class="btn" name = "prevDayBtn pull-left"><i class="icon-backward"></i> Previous Day</button>
</div>
<div class = "span4">
<input class = "center " type='text' READONLY name = 'pageDate' value = '2013-05-18' >
</div>
<div class = "span4">
<button class="btn pull-right" name = "nextDayBtn" >Next Day <i class="icon-forward"></i></button>
</div>
</div>
<br>
<div class = "row">
<div class = "span12">
<table class = "table table-striped">
<th>col11</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th>
</table>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
Additional CSS
input.center {
float: none;
display: table;
margin: 0 auto;
}