I'm building an app with StencilJS and when I navigate to another page, the new page doesn't render correctly. The toolbar color doesn't get set correctly and the page doesn't render page content like it does on the home page (padding, etc.).
Here's the render method for the about page (that isn't rendering correctly).
render() {
return [
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="/" />
</ion-buttons>
<ion-title>About</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content class="ion-padding">
<p>
Bacon ipsum dolor amet pork pork chop burgdoggen, swine spare ribs capicola andouille shankle. Buffalo landjaeger meatball chislic tenderloin. Meatloaf capicola ham hock, kevin biltong cow ground round shankle. Chislic sausage picanha porchetta doner corned beef. Andouille prosciutto short loin alcatra landjaeger capicola rump buffalo. Tri-tip kielbasa beef pork belly, cow turducken bresaola.
</p>
<p>
Doner biltong jerky flank pancetta. Andouille pork chop shankle jerky meatloaf. Drumstick alcatra ham hock swine venison turkey capicola bresaola jowl buffalo kevin cow hamburger. Biltong burgdoggen pig shank shoulder. Cupim chicken doner sirloin alcatra strip steak. Jowl pork t-bone, ham burgdoggen venison ball tip swine ham hock biltong ground round tri-tip kevin bacon.
</p>
</ion-content>
];
}
Any idea what I'm doing wrong? In regular Ionic/Angular the pages all look the same as you navigate between them and I've never been unable to set the header color.
Found the answer in the Ionic Forums: https://forum.ionicframework.com/t/using-a-stenciljs-project-with-electron-for-capacitor/171219/4
Related
I am using element-ui, version 1.43.
I want to add spell-check in text area input(if I write something wrong then red line should appear below that text and on right click i can get suggestion).
How to implement it using element-ui.
If you're using an el-form & el-form-item to wrap your el-input type='textarea' elements, you can utilize the label slot to hook into native browser spellcheck functionality.
<el-form>
...
<el-form-item>
<label slot="label" spellcheck="true">Notes</label>
<el-input type="textarea"></el-input>
</el-form-item>
...
</el-form>
novantiqua.net/very-new/e62.html
I want to hide some images and texts of certain popups if the screen height is too small, but it's not working on Macbook Air (with Safari as Web Browser). I don't know why.
Safari ignoring css max-width media queries below a certain point didn't help me.
css:
#media screen and ( max-height: 800px ){
.nasconditi-se-schermo-piccolo {display:none;}
h1{font-size:14px;}
}
html:
<h1>2 CD | Tuscania</h1>
<h2 class="nasconditi-se-schermo-piccolo">NA17</h2>
<img
src="cd-grafiche-400px/NA17-tuscania.jpg"
width="200" class="nasconditi-se-schermo-piccolo">
<p>
<b>Prima registrazione mondiale</b> dei Quartetti op.21 di Cambini.
<br>Libretto con un articolo storiografico sulla conquista dei diritti civili in Corsica e in Toscana nella seconda metá del Settecento.
<br>Cambini | 6 Quatuors Concertant op.21
<br>Boccherini | Duo per viola e violoncello
<br>
<br><b>Ensemble Alraune</b></p>
screenshot from a not working "display:none" rule
I have a list of li's within an ul, where the li would look like:
<li class="list-group-item operator">
<div class="pull-right">
<a href="/index.php?page=excursion_transport&sub_page=operators&mode=edit&id=10" class="tooltip-hook" title="" data-original-title="Rediger operatøren">
<span class="fa fa-pencil fa-fw"></span>
</a>
<span class="text-muted tooltip-hook" title="" data-original-title="Operatøren kan ikke slettes da den har transportmidler.">
<span class="fa fa-trash fa-fw"></span>
</span>
</div>
Ice Cap Tours
</li>
How do I with Selenium IDE find the text "Ice Cap Tours" and at the same time press the pencil that are present in the "span class='fa-pencil'"?
If you're looking to interact with them you'd need the following locators
//a[contains(text(),'Ice Cap Tours')]//..
//span[contains(#class, 'fa-pencil')]
The first will just look for the span containing the text you're after, and the "//.." navigates up to the parent element (the a tag) to click on the link
The second one will look for the span whos class contains "fa-pencil", you may have had trouble with the other suggested locators as they will have been looking for an exact match of the class, rather than just a class which contains that one
Use click or clickAndWait Command and in Target you can write xpath as //a[text()='Ice Cap Tours']//preceding-sibling::div/a[#class='fa-pencil']
You can try bellow xpath :
//a[normalize-space()='Ice Cap Tours']/preceding-sibling::div/a/span[contains(#class,'fa-pencil')]
Here is explanation :
//a[normalize-space()='Ice Cap Tours']
This will locate your anchor tag which having text Ice Cap Tours
/preceding-sibling::div
Used to navigate to locate the preceding sibling node of a tag. In your case div is preceding sibling of a tag
div/a/span[contains(#class,'fa-pencil')]
Will locate your span which having class name pencil
My pagers will not align correctly on an Xpages view. The blank table cells on the left and right are huge.
Any help would be greatly appreciated:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<div
class="panel panel-default">
<!-- Default panel contents -->
<div
class="panel-heading">Panel heading</div>
<xp:viewPanel
rows="30"
id="viewPanel1"
viewStyleClass="table"
var="rowData">
<xp:this.facets>
<xp:pager
partialRefresh="true"
layout="Previous Group Next"
xp:key="headerPager"
id="pager1" />
</xp:this.facets>
<xp:this.data>
<xp:dominoView
var="view1"
viewName="(PC)" />
</xp:this.data>
<xp:viewColumn
id="viewColumn1">
<xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
<xp:link
escape="true"
id="link1"
value="">
<xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("serialNumber");}]]></xp:this.text>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage
name="/xpPCForm.xsp"
target="openDocument">
<xp:this.documentId><![CDATA[#{javascript:rowData.getDocument().getUniversalID()}]]></xp:this.documentId>
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:link>
<xp:viewColumnHeader
id="viewColumnHeader1"
sortable="true"
value="Serial Number" />
</xp:viewColumn>
</xp:viewPanel>
</div>
</xp:view>
=============================================================
I am still getting a space where I don't want it. Not horrible, but I do not like not knowing why something is occurring.
As you can see there is space to the left of the pager. It is a table column. I tried Bryan's suggestion and used several of the other facets, but that didn't work either. If I put the pager in northWest, then the first column of the table was extremely wide.
Oliver's suggestion shrunk the margin for top and bottom (so closer to the button and closer to the start of the view, but no change to the left column).
Just baffled as to why it is doing this?
You should use a different facet for the pager on the view panel. Sven Hasselbach had a good blog post explaining the layout of the various viewPnael facets: http://hasselba.ch/blog/?p=793. These additional facets explain why you can see empty table cells in firebug.
So you could try using the North or Northwest facets, instead of the headerPager facet:
<xp:this.facets>
<xp:pager
partialRefresh="true"
layout="Previous Group Next"
xp:key="north"
id="pager1" />
</xp:this.facets>
UPDATE:
If sticking with the headerPager facet and viewStyleClass="table", you could work around the spacing in a few ways.
Make that first empty TD invisible
.panel > .table > tbody > tr:first-child > td:first-child {
display:none;
}
Or re-style the pager to alter its position:
<xe:pagerSizes id="pagerSizes1"
xp:key="headerPager"
style="left:-20px;position:relative;">
</xe:pagerSizes>
In both cases, adding Oliver's suggested margin change helps too.
Usually I add this to my CSS:
.pagination {
margin: 0;
}
Though I've never seen those big spaces...
ok here is what i got from you can you check if this is right i cant edit to much of it from what the book says so it has to stay somewhat in this format im guessing..hope you can help
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
document.getElementById( news ) .innerHTML='newsItem1';
var newsItem1 = "L'AQUILA, ITALY (AP) - L'Aquila's chief prosecutor announced an investigation into allegations of shoddy construcation as workers continued to scour the rubble for people still missing after a devastating earthquake five days ago. http://in.reuters.com/article/idUSWBT01103020090411;
var newsItem2 = "WASHINGTON (Reuters) - President Barack Obama said on Friday the recession-hit US ecomony was showing 'glimmers of hope' despite remaining under strain and promised further steps in coming weeks to tackle the finicial crisis. http://in.reuters.com/article/idUSWBT01103020090411";
var newsItem3 = "(eWeek.com) - Apple is close to hitting 1 billion downloads from its App Store and plans on prize giveaway for whoever downloads the billionth application that includes a MacBook Pro and an iPod Touch. http://www.eweek.com/c/a/application-development/eweek-newsbreak-april-13-2009/";
var newsItem4 = "ALTANTA (AP) - Chipper Jones drove in two runs, including a tiebreaking single, and the Atlanta Braves beat Washington 8-5 on Sunday to hand the Nationals their sixth straight loss to start the season. http://www.newsvine.com/_news/2009/04/11/nationals-8-5?category=sports";
</script>
</head>
<body>
<form action="" name="newsHeadlines" method="get">
</form>
<table style="border: 0; width: 100%">
<tr valign="top">
<td>
<select name="headline" multiple="multiple"
style="height: 93px">
<option onclick="document.newsHeadlines.news.value=newItem1">Investigation of building standards in quake zone</option>
<option onclick="document.newsHeadlines.news.value=newsItem2">Obama sees signs of economic progress</option>
<option onclick="document.newsHeadlines.news.value=newsItem3">Apple App Downloads Approach 1 Billion</option>
<option onclick="document.newsHeadlines.news.value=newsItem4">Jones, Braves beat winless Nationals 8-5</option>
</select>
</td>
<td>
<textarea id="news" name="news" cols="50" rows="10"
style="background-color: transparent"></textarea>
</td>
</tr>
</table>
</body>
</html>
can someone help me fix the problem everytime i click on "Investigation of building standards in quake zone" nothing shows in the textarea i created.
Although it might be too late for your assignment, I thought I should point out some errors in the code and try to implement what you are intending to, i.e. displaying different newsItems upon clicking corresponding select option.
document.getElementById( 'news' ).innerHTML='newsItem1';
should be written after the textbox tag with id 'news' is declared, or else will give null value.
In <option onclick="document.newsHeadlines.news.value=newItem1>,
there's a typo (newItem1 should be newsItem1) and the onclick attribute value is not correct. To correctly select the textbox and display intended text in it, you should use the following: onclick="document.getElementById('name').value=newsItem1". Use similar values for rest of the options.