I have some custom tags as follows:
<section>
<section-wrap></section-wrap>
</section>
<form>
<form-wrap></form-wrap>
</form>
... and so on. Imagine I add another custom tag of the same order such as header-wrap. I would require to register it again using web components. Css as far as I have read has no way of picking up tag names except by declaring them explicitly.
How can I declare the custom tags ending in -wrap as being inline-grid elements universally?
You could add classes to the elements. It is trivial to select the *-wrap classes then.
This setup is fairly simple and will keep working if the dom changes (e.g. elements are inserted).
[class$=-wrap] {
display: inline-grid;
grid-template-columns: 1fr 1fr;
}
<section>
<section-wrap class=section-wrap></section-wrap>
</section>
<form>
<form-wrap class=form-wrap>
<div>grid cell 1</div>
<div>grid cell 2</div>
</form-wrap>
</form>
Related
It seems my class is not working in my JS code. I have attempted a few ways so I'll show you what I have done.
<h2 id="firstbutton" class="firstbutton" type="button">Let's go!</h2>
This method let me style, but a button was definitely not visible.
My other way was replacing this with a "button" tag, but this did not let me style the button although I used the class.
<button id="firstbutton" class="firstbutton"> Let's go!</button>.
This way actually gives me a button, but it was tiny and was not very helpful. Remember in my CSS code I used both of the two methods:
.firstbutton {text-align: center;}
And my second one:
#firstbutton {text-align: center;}
I hope I gave enough information as reference and this question does not closed. I am trying to think of another way.... renaming perhaps?
Thank you very much!!
Your code is generally correct, cut there are several things you need to consider.
If the parent tag of your <h2> is <body> tag, then this .firstbutton {text-align: center;} code will work.
But if the parent tag of your <h2> is not <body> tag, you have to align the parent to the center. Example:
if the parent code is <div>, like this:
<div>
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
you have to make it like this:
<div align="center">
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
Or if you want to use CSS, you can read this great article.
Let me know if this helpful
You can make a button in two ways: using <input type="button" value="Content!"> and <button>Content!</button>.
Styling the buttons using classes and ids as you are doing works as normal.
However, if you are trying to center-align the button, you have to put the styling on the parent element, like so:
.parent {
text-align: center;
}
input, button {
color: red;
}
<div class="parent">
<input type="button" value="Content!">
<button>Content!</button>
</div>
Do anyone have idea how to fix elements in div with class="row" ?
How it should look like: Good view, Click: Live show(example without angular)
How it looks like: Bad view
Switch component is repeated in lights component
When i remove <div class="row"></div> elements looking good, but the are under themselves
<div class="row">
<app-switch *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
Link to my repository: SmartPi-Client
It is because Bootstrap 4 is using Flexbox. app-switch selector is between .row and .col divs so the correct bootstrap style wasn't applied to them.
You can make the browser to ignore this app-switch selector using the following css code.
:host {
display: contents;
}
I added a working example here.
https://stackblitz.com/edit/angular-ho3q4q
Instead of adding .col-sm-12 .col-md-6 .col-xl-4 to child div of app-switch, add it to app-switch.
<div class="row">
<app-switch class="col-sm-12 col-md-6 col-xl-4" *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
The thing is that the style for the columns is applied to the direct child/ren of the html element with the ‚row‘ class.
You could add that class to your app-switch component tag or use a wrapper around it to define the col design
i want to add some css changes only to the a(link) elements, that are placed inside divs whose class names are defined as "x". (not to all links in the page)
is there any proper way to do that other than defining classes to each and every "a" elements.
<body>
<div class="x"> <a>Home</a></div> <!--to these-->
<div class="x"> <a>contact</a></div><!--to these-->
<div class="x"> <a>about</a></div><!--to these-->
<a>hello</a><!--but not this-->
</body>
if what i'm asking is not clear
consider: i want to change the decoration of a that is placed in side a div,and i can do it like this
.x.m{text-decoration:none;}
<div class="x"><a class="m"></a></div>
but i want to know if there are any other methods to do the same without defining a class to element "a".
you can do this like
.x a {text-decoration:none;}
here is the example js fiddle
I have this example:
http://codepen.io/dbugger/pen/IuDxw
Where I have an insertion point inside the Shadow DOM and I try to apply an style to it, making it disappear. But the image is still visible. I suspect there is some principle I haven't undestood propely from the Web Components.
Can someone explain me what am I doing wrong?
The trick is that the image is not, as kkemple mentioned, part of the Shadow DOM, but rather the Light DOM, which means it's not directly accessible from inside the component. It's user provided content, like the parameters passed into a class constructor in an OOP language. If at all possible, then, the user should provide their own styles to go with it.
That being said, there are definitely valid use cases where the component author wants to style user-provided content. Hiding certain parts of the user-provided markup based on attributes on the host, events (clicks), etc. is definitely one of those. In that case, wrap the <content> element in a Shadow DOM element and hide that:
<template>
<style>
.image {
display: none;
}
</style>
<div class="image">
<content></content>
</div>
</template>
http://codepen.io/anon/pen/rCGqD
On a side note: It is technically possible to apply styles directly to Light DOM elements, but be aware that in many cases this is considered leaking implementation details to the outside world. If the first solution works, use that instead.
It is not working is because your code is not in the shadow DOM, the div and image is still accessible through default styling. I forked your codepen and added the styling so you could see.
var host = document.querySelector(".host");
var template = document.getElementById( 'template' );
var root = host.webkitCreateShadowRoot();
root.appendChild( template.content );
<template id="template">
<style>
.wrapper {
display: none;
}
</style>
<div class="wrapper">
<content selector=".img"></content>
</div>
<h2>In the Shadows</h2>
</template>
<style>
img {
border: 1px solid black;
}
</style>
<div class="host">
<img class="img" src="http://placehold.it/200x275&text=1" alt="" />
</div>
http://codepen.io/kkemple/pen/euBKs
I didn't go in to why it was not creating a shadow DOM element as your JS looked correct to me but here is a great article on shadow DOM web-ponents:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.