I have HTML I want to give border-bottom property to the <Label> element which is a child of <StackLayout>.
My problem is the border-bottom is taking full width like a div in the web. I want this Label element to be inline like a span so that it's width should not be more than its content width.
<StackLayout *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
</StackLayout>
Below is the layout I'm getting now. But I don't want that orange line to be end to end. Instead its width should always be equal to the text present inside that Label.
Instead of StackLayout, you can have FlexboxLayout with the justifyContent="center".
<FlexboxLayout justifyContent="center" *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-
5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All
Activities"> .
</Label>
</FlexboxLayout>
Try setting horizontalAlignment on Label to center
<Label horizontalAlignment="center" ...
Add horizontalAlignment="center" to the label. This will center the component, making it only the size it needs to have.
Example playground: https://play.nativescript.org/?template=play-vue&id=8kZUFY
Related
I have a Metronic 8.1.2 template (Angular) and I wish to use the IgniteUI (am on trial, but evaluating buying it).
The problem I've is that if I set the width to 100% it won't cover the full width available...
Here's the code:
<igx-grid [data]="Items" height="400px" primaryKey="id" [allowFiltering]="true" [rowEditable]="true"
(rowAdd)="addRow($event)">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
<igx-column field="id" [hidden]="true" dataType="string"></igx-column>
<igx-column field="tipo" header="Tipo" dataType="string"></igx-column>
<igx-column field="descrizione" header="Descrizione" dataType="string"></igx-column>
<igx-column [width]="'100px'">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="editItem(cell.row.data)">
<igx-icon>edit</igx-icon>
</button>
<button igxButton="icon" (click)="deleteItem(cell.row.data)">
<igx-icon>delete</igx-icon>
</button>
</ng-template>
</igx-column>
</igx-grid>
and here's the result
Also if I remove the height, the grid goes forever down
When the width of the igxGrid is set to percentages it will size itself based on the parent element's width. If the parent element does not have width specified the igxGrid will size relative to the browser window.
I would recommend reading the Grid Sizing topic in order to familiarize yourself wiht the possible configurations.
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
Let this piece of html code:
<button
id= 'btnBckGrndColor'
class="jscolor {valueElement:'valueInput', styleElement:'zColorSample'}">A button
</button>
Chosen value: <input id="valueInput" value="">
<div id="zColorSample">Some text</div>
Clearly it modifies the background color of zColorSample.
How do I modify the font color of zColorSample?
A little late, but I figured I would answer because I just had this issue. To achieve this using JsColor, I just added the class jscolor to the input element then added the attribute onchange, which pointed to an update function that would update the font color instead. Here is an example of what I did,
<input type="text" class="jscolor" onchange="update(this.jscolor);" />
<p id="toChange">Text To Change</p>
Then the update function looked like this using jQuery,
function update(jscolor) {
$('#toChange').css("color", "#" + jscolor);}
I got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.
Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).
I tried:
<north border="none">
<hbox width="100%">
<menubar id="menubar" width="380px">
<menu label="A">
<menupopup>
<menuitem label="A1"/>
</menupopup>
</menu>
....
</menubar>
<hbox vflex="1" hflex="1" align="center">
<div hflex="1"></div>
<label id="B"/>
<button id="C" label="C" />
<button id="D" label="D" />
<label id="E"/>
</hbox>
</hbox>
</north>
which looks fine, but when I set a value for label "b" or "e", the design gets broken.
h**p://i.imgur.com/HnRnxmj.png
The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".
Thanks
Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.
This gives you something like that:
...
</menubar>
<hbox vflex="1" hflex="1" align="center" pack="end">
<label id="B"/>
...
As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>