Im having table and I have on top of it in the right side button
and in the left side some text.(they parallel)
Currently its very close to the table which is below and I want to move
the text and the button little bit up ,how should I do that ?
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
If I use the <br /> it move it lot up ,there is a way to do it by pixels?
Just make a div surrounding the text and the button and apply some margin-bottom to that.
<div style="margin-bottom: 20px">
<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
//Here start the table
#* List of users *#
<table class="table table-striped ">
Since you're useing Bootstrap you can do a simple grid to accomplish that.
<div class="row">
<div class="col-md-6>
<h4>Users Table</h4>
</div>
<div class="col-md-6>
<i class="glyphicon glyphicon-plus"></i> New
</div>
</div>
<!-- table -->
I don't know what .text-right does, but probably can be applyed to the button.
Yes using CSS you can add padding like this :
style="padding-top:0.5px;"
Or
style="padding-bottom:0.5px;"
do this in your css:
table.table { clear:both; margin-top:10px;}
Related
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 dropdown with list of people results.
Each result contain some details.
The demand is that click in each <div class="list-item clearfix">will redirect the user to specific change ' unless the user click on some inner span ( <span class="locationJob">) which redirect him to another page.
<div class="list">
<g:each in="${peopleList?.getResults()}" var="doc">
<div class="list-item clearfix">
<g:link controller="connection" action="details" id="${ApplicationUtils.encodeString(doc.ref?.toString())}">
<div class="avatar">
<span class=""><img src="${doc.avatarUrl}" width="41" alt="Avatar" class="img-circle"/></span>
</div>
<div class="info">some text</div>
<div class="row no-margin body highlight-search-term">
<span class="locationJob">
<g:link controller="profile" action="show" id="${ApplicationUtils.encodeString(profExperienceCompanyIds[index]?.trim())}" class="professional-exp-highlight">
{currentCompany}</g:link>
</div>
</g:link>
</span>
</div>
</g:each>
</div>
I understood that it's not correct to write inside .... So what should I do?
You can replace inside g:link, use input type with onclick method to run remoteFunction:
http://grails.github.io/grails-doc/2.2.1/ref/Tags/remoteFunction.html
In my code I am using bootstrap and adding words to go with the glyphicons. My words are within the span tag and have this awkwardly large space when it is just a normal space.
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View"/>
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Here is a jsfiddle example http://jsfiddle.net/zbyztda8/
If any of the solution doesn't work, try removing the font-family. I think the spacing is due to font 'Glyphicons Halflings' . Better way is to have text in separate span without any styling and different span for glyphicon.
HTML:
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
<br/>
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"></span><span>View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Demo: http://jsfiddle.net/zbyztda8/2/
See the last section which doesn't have font-family in span tag.
Im using the following code and currently the text and the button is in different side of the
screen,the text is above the button ,I want the both of them be in parallel
how should I do that?
<h4>my text</h4>
<div class="text-right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Sounds like this is how you want it
http://jsfiddle.net/xv5rP/
<h4 style="display:inline">my text</h4>
<div class="text-right" style="float:right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Add style="display:inline" to your <h4> and <div>
<h4 style="display:inline">my text</h4>
<div class="text-right" style="display:inline">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
you cant give heading tags, because they take the whole line within itself and anything else after it is showed in the next line. So try some other tag of better use span to style it.
dont use <p> either.