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.
Related
So, I'm creating a Memory Game and I want to be able to select and flip the different cards using the keyboard. Right now I'm using tab index on the cards (which are DIV elements), but the problem is that when traversing over the cards using TAB I'm not selecting the cards in the correct order, rather it's jumping around when selecting. I have tried setting the tab index value to different values, such as the first card having the lowest value and the last card having the highest value.
So, my question is: How can I traverse the cards with the tab key in the correct order?
Note, I'm only using vanilla javascript.
Next time, try to provide a minimal reproducable example.
Here's one: sort the elements on their tabindex property value:
document.querySelector(`[tabindex="1"]`).focus();
const sortedDivsOnTabIndex = [...document.querySelectorAll(`[tabindex]`)]
.sort((divA, divB) =>
+divA.getAttribute(`tabindex`) - +divB.getAttribute(`tabindex`));
// result
document.querySelector(`pre`).textContent = sortedDivsOnTabIndex
.map(div =>
`tabindex ${div.getAttribute(`tabindex`)}, content "${div.textContent}"`)
.join(`\n`);
#tiContainer {
display: inline-block;
width: 12rem;
}
pre {
display: inline-block;
position: absolute;
top: 0;
left: 13rem;
padding-left: 1rem;
border-left: 1px solid #999;
}
<div id=tiContainer>
<div tabindex=3>t3</div>
<div tabindex=4>t4</div>
<div tabindex=8>t8</div>
<div tabindex=6>t6</div>
<div tabindex=1>t1</div>
<div tabindex=9>t9</div>
<div tabindex=2>t2</div>
<div tabindex=10>t10</div>
<div tabindex=7>t7</div>
<div tabindex=5>t5</div>
</div>
<pre></pre>
<div class="col-sm-12" style="margin-left:0px; margin-top: 20px">
<label style=" width: 99%; font-weight:normal; margin-left: -15px" class="surveyquestion">2.b. Identify other lending programs managed by applicant.</label>
<textarea style="width:90%; " id="otherLendingPrograms" maxlength="8000" data-bind="css: otherLendingProgramsCSS , attr: { title: otherLendingProgramsToolTip }, event: {focusout: checkLostFocus.bind($root, $data, 'otherLendingPrograms')}, value: otherLendingPrograms"></textarea>
</div>
I would like the text to be shifted to the next row underneath the first row when it reaches specific amount of digits. I don't want the teach to go all the way to the end of the text area box. for example: text is 123456789
I would like 12345 for the first row and 6789 goes to the next one under. Just an example.
Rather going too much complicated on a simple thing,
You can use CSS to adjust the length of the line.
textarea{
max-width:200px;
word-wrap:break-word;
}
This would give a word-warp and line change when the width is 200 px, You can adjust the max-width too.
There is savvy example here.
I want to make the div element changed its size depending on texts size from <span id="dykSelectedReadMore">.
<div class="flipper-back">
<div class="pad-box">
<h3 class="colored">Did you know</h3>
<div class="pad-30-0-0">
<b><span id="dykSelectedIssue">som text</span></b>
<br><br>
<span id="dykSelectedReadMore">...e-identities by 2025. Estonia introduced e-residency in 2014. Non-residents can get ID certificates with the functionality of Estonian ID card. This allows them to start using Estonian digital services from anywhere on Earth. E-residency is attracting entrepreneurs needing an investment account in the European Union, and is bringing more customers to Estonian companies and more capital into the country's economy.</span>
</div>
</div>
I think you shouldn't use Javascript, use CSS instead. This kind of problem occurs when div contains floating elements can't calculate its right height (because doesn't consider height of those elements).
Following the easiest and fastest way to solve.
Start adding this CSS code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
(source CSS-Tricks)
Than apply that class to the flipper-back div or pad-box.
Depends on witch <div> contains floating elements.
eg. <div class="flipper-back clearfix">
I would like to have a text field which has pre appended text which is not modifiable.
So when user tries to add text it starts after the pre text.
Also when the form is submitted it should not pass the pre appended text. Its mainly for display purpose but within the text field. I have attached the image which will clarify my question further. For example I would like to add "$" as pre text in the image below. Any help is greatly appreciated.
Note: the $ is dynamic text and so could not be image.
I've made a fiddle with two solutions, both using CSS.
The first uses a data URI of a PNG that contains a dollar sign for the background image of the text input. The second uses a label containing a dollar sign and shifts it over to be on top of the input (you probably should use a span instead of a label, for accessibility's sake).
HTML:
<input type="text" id="bob" />
<br/>
<label for="fred">$</label><input type="text" id="fred" />
CSS:
#bob {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAG1BMVEX///8AAAC/v7/f398/Pz8fHx9/f3+fn59fX19QuZN1AAAAbElEQVQokWNgGFyASRiN7ygYhiKgGCYW6IAs4KgsYCqELCDKLMCehCwQyCyAamhjM5qAiaC4AqpIiaAoqgizuKMQqoAAuwgytxxoiyiSABvQHcwoKgSVBVjEkI1IlEDzCzu6bxnQnY4pQFsAAC/cCbAPkBI2AAAAAElFTkSuQmCC') no-repeat;
background-size: contain;
padding-left: 1.1em;
}
label[for="fred"] {
position: relative;
left: 15px;
z-index: 1000;
font-size: smaller;
}
#fred {
padding-left: 1.2em;
}
Both of these methods are hacky. A JS solution would be more involved, but handle much more nicely (I just don't have time to implement one).
Here's a neat way using background-image
http://jsfiddle.net/dxu2s/1/
HTML:
<label for="RefundAmount">Enter a refund amount: </label>
<input type="text" name="RefundAmount" id="RefundAmount">
CSS:
#RefundAmount {
margin: 0;
padding: 0 0 0 25px;
width: 100px;
height: 25px;
background: #FFF url(http://oi57.tinypic.com/nmncz5.jpg) no-repeat left center;
}
I've also tried using the css psuedo-element :before but it didn't work as input tags doesn't have content in em'.
This is a class i wrote you can use it for free, i didnt test it a lot. if you find a bug let me know
HTML: <input type="text" id="inputA" value="$" />
in script add this Class constructor
//***************************************************************
//-------------------------------------- Class halfEditable_INPUT
//***************************************************************
//-- divides an Input into an non editable area from 0 to index, but not including the index, the rest is editable
//-----------------------------------------------------
//-------- constructor
//-----------------------------------------------------
function halfEditable_INPUT (inputField,index)
{
if (typeof index=="undefined") index=inputField.value.length;
//------------------------------------ PUBLIC Objects, Properties
this.element=inputField;
this.index=index;
//-- a reference to the instance of the halfEditable_INPUT class saved in the html element, to get instance values in DOM events
Object.defineProperty (inputField,"halfEditable_instance",{value:this,writable: false, enumerable:true, configurable:true});
//-- get the value of the input directly
Object.defineProperty (this,"value", {get:this.PRIVATE_getValue,set:this.PRIVATE_setValue});
inputField.addEventListener ("keydown",this.PRIVATE_checkStatus_ONKEYDOWN);
}
//-----------------------------------------------------
//-------- prototype
//-----------------------------------------------------
//------------------------------------ PRIVATE Methods
/* this --- points to the input field
checks if the cursorPosition is in the non Editable area or is at the limit Point
if it is at the limitPoint - dont allow backspace or cursor left
if it is inside allow nothing and move cursorPosition to the limit
reset the Position1 key to index */
halfEditable_INPUT.prototype.PRIVATE_checkStatus_ONKEYDOWN=function (event)
{
var keyCode=event.keyCode;
var index=this.halfEditable_instance.index;
var selectionStart=this.selectionStart, selectionEnd=this.selectionEnd;
if (keyCode==36) //-- position1 key
{
event.preventDefault();
this.setSelectionRange (index,index);
return;
}
if (selectionStart<index)
{
if (selectionEnd>index) this.setSelectionRange (index,selectionEnd);
else this.setSelectionRange (index,index);
}
else if (selectionStart==index) {if (keyCode==8 || keyCode==37) event.preventDefault();} //-- backspace, left cursor
}
halfEditable_INPUT.prototype.PRIVATE_setValue=function (value) {this.element.value=value;}
halfEditable_INPUT.prototype.PRIVATE_getValue=function () {return this.element.value;}
//-----------------------------------------------------
//-------- prototype -- END
//-----------------------------------------------------
//***************************************************************
//-------------------------------------- Class halfEditable_INPUT -- END
//***************************************************************
var inputA=new halfEditable_INPUT(document.getElementById ("inputA"));
if you have further questions let me know.
To preface, I am utterly incompetent with CSS. However, I have been watching/reading tutorials, and still cannot figure out why my page would render the way it is. I'm hoping that this will be quick and obvious for somebody here.
I want the page to be shaped something like this:
Filter by: CPM Owner: [DROPDOWN] CP: [DROPDOWN] Series: [DROPDOWN]
[APPROVE SELECTED] [REJECT SELECTED]
[there's a table down here, but it isn't relevant to the question]
However, it looks like this when I load the page:
EDIT: I changed the flexbox container to a span instead of a div, and now the page looks like:
There are all kinds of newlines I don't want, and strange spacing being put before the dropdowns. Here are the relevant bits of CSS, JS, and HTML that are making this part of the page:
HTML:
<div id="filters">
<span id="filter_dropdowns_label" class="dropdowns_bar_label">
Filter by:
</span>
<ul id="filter_dropdowns" class="dropdowns_bar">
<!-- populated by changerequest.js -->
</ul>
</div>
<ul id="buttons_top" class="buttons">
<li><input type="button" value="Approve Selected" id="approve_button_top" class="approve_button" onclick="approveSelected()"/></li>
<li><input type="button" value="Reject Selected" id="reject_button_top" class="reject_button" onclick="rejectSelected()"/></li>
</ul>
CSS:
.dropdowns_bar {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdowns_bar li {
display: inline;
}
.buttons li {
display: inline;
}
.hidden_column {
display: none;
}
#filters {
display: inline;
}
And the JS:
// Create a dropdown
function createDropdown(id, label, data, defaultValue) {
// initialize elements
listEl = document.createElement('li');
flexboxContainerEl = document.createElement('div');
spanEl = document.createElement('span');
// setup dropdown
$(flexboxContainerEl).flexbox(data);
$(flexboxContainerEl).attr('id', id);
if (defaultValue != null) {
$(flexboxContainerEl).setValue(defaultValue);
}
// setup label
$(spanEl).html(label + ':');
// add to document
$(listEl).append(spanEl);
$(listEl).append(flexboxContainerEl);
$('#filter_dropdowns').append(listEl);
}
// Creates and populates the filter dropdowns, selects default if present
function createDropdowns() {
createDropdown('cpm_dropdown', 'CPM Owner', cpmList, cpmDefault);
createDropdown('cp_dropdown', 'CP', cpList, cpDefault);
createDropdown('series_dropdown', 'Series', seriesList, seriesDefault);
}
Sorry, I realize that this question is very much "help, my code's broken, fix it." I am just spending a lot of time looking at CSS tutorials and documents and I cannot find anything resembling my problem.
EDIT: Modified my CSS according to this answer: https://stackoverflow.com/a/17417451/1532702
The page now looks like:
I've tried swapping the .appends, but nothing affects the order on the labels. Obviously, they should be in front of each of the corresponding inputs.
EDIT: I solved my problem by just rewriting that portion as a table instead of a list. Made everything much, much simpler.
EDIT: Ok, better answer I think. Try this:
.dropdowns_bar li {
display: inline-block;
}
.buttons {
display:block;
margin-top:10px;
}
.buttons li {
display: inline-block;
}