I have some span tags which I am using to style some headings and some text on the same line.
However I want to style the text in the award class so that it is lined up after the length of the longest sub_heading (which is Date Awarded at 12 characters. Is there a javascript library or css trick to do this?
<span class="sub_heading">Award<span class="award">Award Name</span></span>
<span class="sub_heading">Date Awarded<span class="award">2009</span></span>
It would end up:
Award:..............Award Name (without periods obviously).
Date Awarded: 2009
In my opinion, the best thing to do is to change the markup, you can do that in multiple ways, this is an example:
Example using tables
<table style="width:100%">
<tr>
<td>Award</td>
<td>Award name</td>
</tr>
<tr>
<td>Date awarded</td>
<td>2000</td>
</tr>
</table>
If you change your markup a bit you can use display: table to achieve this effect.
#wrapper {
display: table;
}
.row {
display: table-row;
}
span {
display: table-cell;
}
.award {
text-align: right;
}
<div id="wrapper">
<div class="row"><span class="sub_heading">Award</span><span class="award">Award Name</span></div>
<div class="row"><span class="sub_heading">Date Awarded</span><span class="award">2009</span></div>
</div>
You can use css or table to setup a layout. I think it is a easier way and has better performance. But I would also like to provide you with another way with javascript, and you can figure out which will be the best way for your case. Here is the working example: https://jsfiddle.net/b8063z7c/
The main code is this:
(function() {
var maxWidth = 0;
$.each($(".sub_heading"), function() {
maxWidth = Math.max(maxWidth, $(this).width());
})
$.each($(".sub_heading"), function() {
$(this).css("padding-right", maxWidth - $(this).width());
})
})();
Hope this will help.
Related
I have a directive that renders the following structure
In Div1 I have some content and in Div2 some other content. There is a splitter in the middle. I need a function to swap the div positions Div1 in Div2 position and vice versa. What as some good ways to do this in Angular directive ?
One way i can think of is using ng-switch, but will have to do some reputable stuff... any other good ways ? Some animation during switching would be cool.
No jQuery allowed. Following is the demo fiddle - http://jsfiddle.net/gauravsoni/z9gz1wgy/
Sample code:
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.orientation = "horizontal";
$scope.hello = "Hello from Controller!";
})
.directive('myDirective',function(){
return{
template:'<div kendo-splitter><div>1st pane</div><div>2nd pane</div></div>'
}
})
UPDATE:
I am using the following code to do the switching,
<button ng-click='toggle = !toggle'>Switch View</button>
<div ng-if="toggle">
<div>
Left side
</div>
<div>
right side
</div>
</div>
<div ng-if="!toggle">
<div>
right side
</div>
<div>
left side
</div>
</div>
So based on the toggle value appropriate div gets activated , only drawback here is i have to write the view 2 times.
Any suggestions ?
You can use flexbox and define an order for the elements. Then use angular to toggle a class on the container. You could also use floats or some other CSS technique to mess around with the order, but the idea is to use CSS for this.
See demo below.
http://codepen.io/jessegavin/pen/ZbWeNV
Template
<div ng-app="demo">
<columns></columns>
<script type="text/ng-template" id="columns.html">
<div>
<div class="columns">
<div class="column column-one">Col 1</div>
<div class="column column-two">Col 2</div>
</div>
<button ng-click="swap()">Swap</button>
</div>
</script>
</div>
CSS
.columns {
display: flex;
}
.column-one { order: 1; }
.column-two { order: 2; }
.swapped {
.column-one { order: 2; }
.column-two { order: 1; }
}
.column {
width: 50%;
height: 200px;
border: solid 1px red;
}
Directive
angular.module("demo", [])
.directive("columns", function() {
return {
templateUrl: "columns.html",
link: function(scope, element, attrs) {
scope.swap = function() {
element.toggleClass("swapped");
}
}
}
})
You could use angular ui sortable on this. You can easily drag and sort them. You can place handlers so only portion of div is able to drag the divs.
There are multiple ways to do this, ones cleaner than others obviously.
If there are no other factors that can affect the method, that you use to resolve this problem and If the task is as simple as just switch positions, I guess you can define the container div (the one that contains both smaller divs) as flexbox with
display:flex
and
flex-flow: row nowrap,
and then on hover, or on scroll, or toggle, or whatever it is... change
flex-flow to flex-flow: row-reverse nowrap
If you need a bit of animation effect you can add transition: .5 to container div
Sorry if I'm not clear :(
I would like to display longer text cells in no multiline and word wrapped mode, instead in a form: |Alfred Fu... [mybutton]|
Unfortunatelly I can not solve how to keep the ending '...' and the button in one line within the cell:
My custom working sample can be viewed and edited here in Telerik dojo playground
I know the no word wrap can be achieved by CSS white-space: nowrap; I also know I should use column Template (.ClientTemplate("...") in ASP MVC). I am utilizing kendo templating infrastructure, so my template is not inline.
The column:
columns: [{
...
}, {
field: "CompanyName",
title: "Company Name",
width: 100,
template: "#=getClientViewTemplate(data.CompanyName)#",
}, {
....
}]
The kendo template (note: using bootstrap 3, what is referenced in the working sample via maxcdn):
<script type="text/kendo-template" id="clientViewTemplate">
<span style="white-space: nowrap;">
#=text#
<span class="glyphicon glyphicon-zoom-in"></span>
</span>
And the template provider javascript function:
<script>
function getClientViewTemplate(data) {
var template = kendo.template($('#clientViewTemplate').html());
var result = template({ text: data });
return result;
}
</script>
I would like to keep those "...", and at the same time I would like to have the data and the button in one line within the cell. How can I accomplish this?
I've got the feeling (maybe I am wrong) that the automatic ... rendering comes from the outer td, which have role=gridCell, and measures the text length. So it hopeless to trick out. ...unless we have a dedicated td with role=gridCell for the text. The only way I could figure out is an embedded table with one row and two cells.
Here is what I've ended: see in action
Style:
<style>
table.clientViewTemplate td span
{
white-space: nowrap;
}
table.clientViewTemplate td
{
border: 0px; // No border for our embedded table
padding: 0px; // No padding for our embedded table
}
table.clientViewTemplate td:nth-child(2)
{
width: 24px; // TODO: The button width should not hardcoded
}
</style>
Template:
<script type="text/kendo-template" id="clientViewTemplate">
<table class="clientViewTemplate">
<tr>
<td role="gridCell">
<span>
#=text#
</span>
</td>
<td role="gridCell">
<span class="glyphicon glyphicon-zoom-in"></span>
</td>
</tr>
</table>
</script>
You can solve this, give styles.
Like this css:
.widthStyle
{
width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float:left;
}
and html:
<div class="widthStyle">
#=text#
</div>
<a href="" style="width:12px; float:left;" class=" btn btn-info btn-xs">
<span class="glyphicon glyphicon-zoom-in"></span></a>
this is working, link
I am looking at aligning numbers on the decimal point in Angular UI Grid like below.
11.293
.89
233424
.34345
I have had a few ideas including a cell template with three aligned divs and using transparent 0s.
Has anyone had any luck with this.
I think that the best way is to select all the numbers with Javascript, then break them and encapsulate them in 2 span elements like this:
<div>
<span class="int">11.</span><span class="float">293</span>
</div>
<div>
<span class="int">233424.</span><span class="float">89</span>
</div>
Then you can assign a with to the elements and align the .int to right and .float to the left with css:
.int, .float{
display: inline-block;
width: 100px;
}
.int{
text-align: right;
}
.float{
text-align: left;
}
This way the selection is ok and div and span doesn't disturb the meaning of your html5 code. Also, you do not deppend on a fixed width font.
Hope this works, if not, please let me know.
In my component.ts file I added a method splitNumbers, which converts each number into a array with the integer and fractional part:
splitNumbers() {
return this.numbers.map(number => {
let str = number.toString();
return str.split(".");
});
}
In my component.html I added separate <span> elements to the integer and fractional parts. Don't use whitespace between the tags unless you want extra whitespace in your output:
<li *ngFor="let parts of splitNumbers()">
<span class="integer">{{ parts[0] }}</span>.<span class="fractional">{{ parts[1] }}</span>
</li>
Then in the CSS I set the integer part to inline-block, give it a width and make it align right:
.integer {
text-align: right;
width: 10em;
display: inline-block;
}
The result:
As you can see the last number is very small and written in scientific notation instead of expanded. So this doesn't work perfectly.
I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?
Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}
I did some research and found that the only way to vertically center a table inside a div(where the table does not span the full height, the height varies with varying content) is with javascript/jquery:
<script>
var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop)
</script>
Now my code looks like this:
CSS:
.rightDiv{
width: 300px
height: 380px;
background: url(http://myimage.com) no-repeat;
}
.rightDiv table{
margin: auto; /*For centering horizontally*/
}
HTML:
<div class="rightDiv">
<table width="80%">
<tr><td></td></tr>
</table>
</div>
My question: How to I implement that code for this situation? Not sure how to call the specific div class and table class in the JS function for the relevant div and table?
Thank You
Hoping I have understood your question correctly - how about this example? http://jsfiddle.net/9Zg8a/1/
<div style="height:200px; vertical-align:middle; display:table-cell; border:green 1px solid">
<table style="border:red 1px solid">
<tr>
<td>test text
</td>
</tr>
</table>
</div>
This answer is for the question:
My question: How to I implement that code for this situation? Not sure how to call the specific div class and table class in the JS function for the relevant div and table?
".rightDiv" and ".rightDiv table" at your sample offers nothing! Make it simpler.
CSS
#rightDiv{
width: 300px
height: 380px;
background: url(http://myimage.com) no-repeat;
}
#rightDivTable{
margin: auto; /*For centering horizontally*/
}
HTML
<div id="rightDiv">
<table id="rightDivTable" width="80%">
<tr><td></td></tr>
</table>
</div>
UPDATE: added missing quotes and requested code
This way you will use $('#rightDiv') and $('#rightDivTable') in jquery for your elements.
JS
var
testHeight = $('#rightDiv').innerHeight(),
tableHeight = $('#rightDivTable').outerHeight(),
tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('#rightDivTable').css('margin-top', tableMarginTop);
This way you can center a table in a div. By setting margin-left and margin-right to auto you can center pretty much every object.
<div style="300px; height: 380px">
<table style="margin-left:auto; margin-right:auto">
<tr>
<td>
...
</td>
</tr>
</table>
</div>
how about this-
<div class="rightDiv">
<center><table width="80%">
<tr><td></td></tr>
</table></center>
</div>
center is not recommended for use but what is the problem in using it.
Update-
i can't assign it center without dimensions.
There may be other ways of centering vertically, but if you want to stick with script, here's one way of doing it - jsfiddle here:
var testHeight = $('.rightDiv').innerHeight();
var tableHeight = $('.rightDiv table').outerHeight();
var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop)
JQuery lets you use CSS-style selectors for referencing elements, so you can use your existing classes and refer to them in the same way that the CSS does. Or you can assign IDs and use $('#idgoeshere') instead - and perhaps update the CSS also to use id-based selectors.
Using IDs can be faster, since JQuery can internally optimize the selector query to use document.getElementById. (One common benefit to using class-based selectors is that you can operate on a set of matching elements all in one go - though this doesn't work in your specific case if the tables have differing heights.)