Hi we've recently started making custom elements in Aurelia. One of the rules we have established is that we cannot put class names on custom elements when using them.
This is causing problems for me because the custom element itself doesn't have any properties so it breaks a lot of styling.
In particular it breaks when put inside a flex-container.
I have read on developers.google.com that you can style the custom element using the :host selector, but I can't find any mention of this for Aurelia and I'm struggling to get it to work.
I have a codepen to demonstrate the problem here.
You can style custom elements f.i. by referencing the element itself, like this:
o-custom-element {
color: white;
background: green;
flex-grow: 1;
}
I've forked your codepen to show the change: http://codepen.io/anon/pen/ZeEdLL
Put your custom element in the flex-item div:
<div class="half-container">
<p>Breaking because of custom element (Flex container is yellow)</p>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item green">
<o-custom-element></o-custom-element>
</div>
</div>
</div>
If you want to use :host, you'll have to put it in a <style> element inside the Shadow DOM of your custom element: http://codepen.io/anon/pen/LWYwxK
The problem is that you'll have to duplicate the rules and it's worse than adding classes to custom element...
Related
I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
Take an xpage containing a RichText control (this is Domino 8.5.3, so we're using ck-editor).
Quite often tables are used by the users to structure their RT content. One request is to make sure that those tables have a unique formatting esp. regarding cellspacing and cellpadding.
Through Firebug I see that those inserted tables are setting their borders and cell* parameters using html attributes. And of course, since the html inside the editor has been created using "manual" html the xsp engine can't have much influence here.
Before we start writing some client side js to try and remove or manipulate those attributes: maybe there is someone having a neat idea of how we could accomplish this?
Since the output from the RichText control is, AFAIK, always rendered within a <div> with a class called "domino-richtext" one could use CSS to get that identical appearance you're looking for (at least I think with "unique" you mean identical or uniform).
I pasted an HTML structure below, where the user added some cellspacing and cellpadding:
<div class="domino-richtext xspInputFieldRichText" id="view:_id1:inputRichText1">
<table cellspacing="1" cellpadding="2" border="1" dir="ltr">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
...
</tbody>
</table>
<p dir="ltr">Some more content besides the table...</p>
</div>
When the following styles are applied / defined within a theme or stylesheet, all tables, created within the RT control will look the same.
.domino-richtext table {
border-collapse:collapse; /*remove spacing or padding when defined*/
}
.domino-richtext table tbody tr td,
.domino-richtext table thead tr th {
padding: 0; /*define / remove padding*/
border:1px solid #eee; /*border definition for all tables*/
}
When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>