trying to follow Xamarin tutorial for a label view at :
Label Tutorial
when applying italic font attribute in a span tag , while setting the size of the label text to any value in the label tag. the text size did not get applied to the text in the span with italic attribute.
<StackLayout Margin="20,35,20,25">
<Label FontSize="50" TextColor="Blue">
<Label.FormattedText>
<FormattedString>
<Span Text="underlined text" TextDecorations="Underline" />
<Span Text=", emphasized" FontAttributes="Italic" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
output from android emulator
I also found that it when the span with Italic attribute the FontSize of Label can not work. However , I found a WorkAround for this , you can set FontSize of this Span to solve it .
Have a look at follow code:
<StackLayout Margin="20,35,20,25">
<Label FontSize="50" TextColor="Blue">
<Label.FormattedText>
<FormattedString>
<Span Text="underlined text" TextDecorations="Underline" />
<Span Text=", emphasized" FontSize="50" FontAttributes="Italic" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
The effect :
I think next version of Xamarin Forms will fix it as soon as possible .
Related
I am new to the material UI. here, I have two tabs and that tabs has some content.
Now, I am trying to add the text overflow elipses to this . But the text is in span over there,
<Tab
key={`${tab}_${index}`}
classes={{
root: css.tabRoot,
selected: css.tabSelected,
wrapper: css.tabIconWrapper,
labelIcon: css.tabLabelIcon
}}
disableRipple
label={tab.label}
value={tab.value}
icon={
tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
}
/>
Now, Here the label is having a bit more length . So, I am just trying to limit it as max-width : 100px;
But in the material UI it is getting a bit complicated to override .
SO, what I tried is ,
label={<Typography className={selectedTab ? '' : ''}>{tab.label}</Typography>}
But here
I am not able to get which tab has been selected , I mean I want to add that class if the tab is selected.
can any one help me with this ? any solution like with or without typography works for me.
thanks.
div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
<div class="MuiTabs-flexContainer">
<button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
<span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
</button>
</div>
</div>
I have below span tag generated by custom tool (I can't ask it to generate in different way)
<span tabindex="0" > FINDME </span>
I want to write a script section within and to find the text "FINDME" and replace this with :
<span tabindex="0" style="color:red">FINDME</span>
or
<span tabindex="0">
<font color="red"> FINDME </font>
</span>
Basically I want to get the text colored. Also since I would have multiple span element coming that way so I had to search by text before replacing it.
I don't know how to code it so any help will be appreciated.
thanks !
This code will search for all the spans in your code and the one that have the text " FINDME " will get the color replaced. This solution is using jQuery
$(document).ready(function(){
$("span").each(function(){
if($(this).text() == ' FINDME '){
$(this).css('color','red');
}
});
});
https://jsfiddle.net/wearetamo/mdwkakzz/
The answer is :
<script> var span3 = document.querySelector('#dashboard_page_3_tab span'); span3.innerHTML = '<font color="red"> FINDME </font>' ; </script>
I am creating a native script application and I want my tab View to appear on the top for iOS. I know sticking the tabView on the top violates the human interface guideline, but I need to do it this way.
With the new Nativescript 6 there is a new component called "Tabs" that allows you to do this:
Here is how you would do it with Nativescript angular:
<Tabs selectedIndex="1" class="fas font-size">
<!-- Using icon fonts for each TabStripItem -->
<TabStrip>
<TabStripItem title="Home"></TabStripItem>
<TabStripItem title="Account"></TabStripItem>
<TabStripItem title="Search"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
</Tabs>
Here is a playground project I created.
Hereis a playground example with Nativescript typescript using both top and low tabs
Here you can find the documentation
important note: this widget is currently on beta
You can achieve that. Here's how i have done the similar thing -
<StackLayout row="0" col="0">
<StackLayout *ngIf="visibility1" id="mainView" visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
<FirstView></FirstView>
</StackLayout>
<StackLayout *ngIf="visibility2" id="mainView" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
<SecondView></SecondView>
</StackLayout>
<StackLayout *ngIf="visibility3" id="mainView" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
<ThirdView></ThirdView>
</StackLayout>
</StackLayout>
and change the visibility of each component based on the click events.
You can implement all manners of TabView behaviours/layouts using the SegmentedBar. See this answer for details
I want to show font-awesome icons in my nativescript application but its not showing everywhere.
<ScrollView row="0" orientation="vertical" ios.pagingEnabled="true">
<StackLayout #container verticalAlignment="center">
<Image src="res://logo_icon_white" stretch="none" horizontalAlignment="center"></Image>
<label [text]="'WELCOME' | translate" class="welcome-text" horizontalAlignment="center"></label>
<label text=" " class="font-awesome" horizontalAlignment="center"></label> <--- WORKS!
<Button [text]="'LOGIN_WITH_PASWWORD' | translate" (tap)="tapped()"></Button>
<Button>
<FormattedString>
<Span text=" " class="font-awesome"></Span> <--- DOESN'T WORK!
<Span text=" " style="font-family: FontAwesome;"></Span> <--- DOESN'T WORK!
<Span [text]="'PROCEED_WITH_FACEBOOK' | translate" ></Span>
</FormattedString>
</Button>
<Button [text]="'CREATE_AN_ACCOUNT' | translate" class="account-button"></Button>
</StackLayout>
</ScrollView>
When i use it in a Label it shows the icon but when i want to display it in a FormattedString/Button (because i use translation) it doesn't show the icon.
I hope someone can help?
The Span element currently does not support styling through CSS. You should use the span's properties to set the styling. In your case the following should work:
<Span text="" fontFamily="FontAwesome"></Span>
While this info doesn't help resolve my issue, I'll let it be known I'm creating automation tests in Python using Selenium WebDriver.
I have an issue where I want to verify the existence of two identical text elements that appear to have identical XPATH addresses. As you can see from the XPATH of the web page below...
<div class="pagebox">
<h2>Database</h2>
Restrict access to group: <input id="database_group" name="database_group" value="postgres" type="text">
<br></br>
<h2>Sessions</h2>
User sessions time out after
<input id="session_timeout" name="session_timeout" maxlength="5" value="1200" type="text">
minutes.
<br></br>
<h2>HMI</h2>
<input id="use_large_header_text" name="use_large_header_text" type="checkbox">
Use large text in the header bar and link bar on HMI
<br></br>
<input id="display_tagging_button" name="display_tagging_button" checked="true" type="checkbox">
Display tagging button and information in HMI control dialog
<br></br>
<br></br>
<h2>Inactive Redirect</h2>
Auto redirect after user is inactive for
<input id="inactive_time" name="inactive_time" maxlength="4" placeholder="Min: 0 (Default) Max: 1440" size="25" value="0" type="text"></input>
minutes.
<span id="ieInactTime" style="font-style: italic"> Min: 0 (Default) Max: 1440</span>
<br></br>
Redirect Address:
<input id="inactive_page" name="inactive_page" placeholder="File Path e.g. /Home/" size="30" value="" type="text"><span id="ieInactPage" style="font-style: italic"> File Path e.g. /Home/</span>
<br></br>
...the phrase "minutes." shows up twice [line 8 and line 21], but it doesn't show up in a way where I can use the element's XPATH to locate which element I want to verify the existence of as I normally would using methods you'd find here, here, or here. Both text elements appear to have the same exact XPATH address:
//div[#class='pagebox']
I tried to distinguish between the two text elements using brackets to signify which text elements I'd like to verify...
e.g. //div[#class='pagebox']/[1] & //div[#class='pagebox']/[2]
...but that didn't work.
The closest I could find to distinguishing between the two of these text elements was to use the 'text()' feature of XPATH.
//div[#class='pagebox']/text()[contains(.,'minutes')][1]
//div[#class='pagebox']/text()[contains(.,'minutes')][2]
Is there any way to verify these two text elements using XPATH?
You can use JavaScriptExecutor to find text node inside the element div. See C# code below:
IWebElement e = driver.FindElement(By.ClassName("pagebox"));
string script = "var nodes = arguments[0].childNodes;" +
"var text = [];" +
"var count=0;" +
"for (var i = 0; i < nodes.length; i++) {" +
" if ((nodes[i].nodeType == Node.TEXT_NODE) && (nodes[i].textContent.trim()=='minutes.')) {" +
" text[count]= nodes[i].textContent.trim();" +
" count++;" +
" }" +
"}" +
"return text;";
Object obj = ((IJavaScriptExecutor)driver).ExecuteScript(script,e);
To distinguish between the two different text elements "minutes.", you need the following XPATH:
For the 1st "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][1]]
For the 2nd "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][2]]