I'd like to position two <paper-input>s horizontally like this:
How do I do that?
There are several solutions to your problem. The simplest is to add a CSS class to your input element, which should contain the display:inline-block rule.
.inline-element {
display: inline-block;
}
And apply your class to the <paper-input>s:
<paper-input label="Email" class="inline-element"></paper-input>
<paper-input label="Sub ID" class="inline-element"></paper-input>
Polymer way of doing it is by iron-flex-layout element.
When using it take care of this note from the docs:
...You must do this in any element that uses any of the iron-flex-layout
styles.
So, after all imports(element & style), it should look as this:
<div class="layout horizontal">
<paper-input label="Email"></paper-input>
<paper-input label="ID"></paper-input>
</div>
Related
I have to remove the extra padding being adding up in .item-inner class inside .item-native.
https://ibb.co/vs4BWWp
<div class="item-native">
<slot name="start">
</slot>
<div class="item-inner">
<div class="input-wrapper">
<slot></slot>
</div><slot name="end"></slot>
<div class="item-inner-highlight"></div></div>
</div>
ion-item{
--inner-padding-end: 0px;
--padding-start:0px
}
This works, because since ionic 4 web components & shadow DOM were introduced to keep "essential CSS" isolated.
In a lot of cases it just works to put -- in front of the wanted CSS attribute to change it or in other words: just define a CSS variable with the same name as the attribute you want to change.
Does someone know a complete reference to ionic's shadow DOM or something like that?
Further information:
Shadow DOM in Ionic (and Why it’s Awesome), CSS Shadow Parts,
CSS variables, Web Components
.item-native .item-inner{padding:0}. this will remove padding of that element
this and remove padding of that element with class item-inner:
.item-inner{
padding:0 !important;
}
I try so solve the following problem. Please, see example:
custom-elements.html
<polymer-element name="ui-nav" class="_row _columned _cols-2 mobile_cols-12" noscript>
<template>
<content></content>
</template>
</polymer-element>
index.html
<ui-nav>
<div>Привет русским</div>
<div>Контакты</div>
<div>О себе</div>
</ui-nav>
main.css
._row {display: block;}
._row [class*="_cols-"] {float:left;}
._cols-2 > * {width: 20%;}
...
The example above works as expected: all the styles applied to ui-nav (using classes) inherited by all div child elements. However, what if I need to add additional classes to ui-nav in different case? For example
<ui-nav> <!-- case 1 -->
<div>Content</div>
...
</ui-nav>
<ui-nav class="border-green"> <!-- case 2 -->
<div>Another content</div>
...
</ui-nav>
In the example border-green will break the logic, because it overwrites predefined classes previously defined in class attribute of polymer-element. I tried to apply classes on content tag, but it doesn't work. As well as the following form doesn't work too:
<polymer-element name="ui-nav" noscript>
<template>
<div class="_row _columned _cols-2 mobile_cols-12">
<content></content>
</div>
</template>
</polymer-element>
So how can I apply already existing classes like _row _cols-2 to the elements of lightDOM without defining additional classes/styles using ::shadow, ::content etc?
The short answer is you can't.
You could include your stylesheet that contains these styles in your template, and use the last option where you wrap the content in a div with those classes, but that is likely to have some performance issues as the stylesheets will be inlined at runtime.
The only other option really is to use some shadow boundary piercing selector like ::shadow, /deep/, etc from your main stylesheet.
So i have this situation:
<div class="wrapper">
<div class="optional">
<h3>one</h3>
<textarea/>
</div>
<div class="optional">
<h3>one</h3>
<textarea/>
</div>
</div>
inside wrapper there are more elements.
Sometimes I have 1 optional and other times more than once.
I want to add different
.optional{textarea{ height: 150px; }}
.optional:only-of-type{textarea{ height: 75px; }} //sass
but sadly this is not working (I know.. only on elements, not classes).
So - is there a way without JS to give a different height to the textarea when there is only one?
As you have stated, :only-of-type doesn't scope itself to classes.
Since CSS doesn't yet provide an analogue of *-of-type for arbitrary selector sub-matching, and additionally CSS does not provide a way to determine if an element is the only grandchild of its type (or the only grandchild, period), you will have to do this with JS.
So, I have my solution now -
Instead of div.optional I Just chose an other rare element (section), and then I can select only-of-type again.
Simple but ugly :)
Is there anyway to specify a class after a pseudo element? For example, I want to find the :last-childof the parent - and if that child has x-class, style accordingly. With SCSS, this would be relatively easier, but the project I'm working on doesn't use SASS.
Any ideas?
Here's what I was trying to do...which is obvs wrong:
form .entry-form-wrap :last-child.nested-tmpl-inner
HTML is too complex to post, but I've included a general block of code to give you an idea of the flow:
<form>
<div class="entry-form-wrap">
<div class="some-class" />
<div class="some-class" />
<div class="some-class nested-tmpl-inner" />
</div>
</form>
It's not obvs wrong. You can specify a class right after the pseudo, like :pseudo.class.
Check this fiddle: http://jsfiddle.net/fYy4T/
I'm trying to do a sort of pure html/css tabs system. I have
<div>
<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>
</div>
<div class="content">
<div class="tab-1">
</div>
<div class="tab-2">
</div>
</div>
And my css
.content > div {
opacity:0;
}
input.tab1:checked ~ .tab-1, input.tab2:checked ~ .tab-2 {
opacity: 1
}
However the tilde ~ isnt working as its supposed to (because the divs aren't exactly a sibling) - How can I get the css to sort of work across to other nodes? Is there a way of 'saying' and in css?
You would have to go up one level and you cannot do that in CSS as there is no parent selector in CSS. You might want to read this article: why we don't have a parent selector in CSS (there will be a parent selector in CSS4, however)
What you can do:
Option 1: change your HTML:
.a
<input class="tab1" type="radio" checked/>
<input class="tab2" type="radio"/>
<div class="content">
<div class="tab-1"></div>
<div class="tab-2"></div>
</div>
and use input.tab1:checked ~ .content .tab-1
.b Try a structure like described here: http://css-tricks.com/functional-css-tabs-revisited/ - basically, the idea is that you don't make a group of tabs and a group of tab contents, but you group each tab with its corresponding content.
Option 2: use JavaScript (which goes against the idea of a pure CSS tab system, it's true)
Important note: keep in mind that setting opacity < 0 on a parent node makes all the children have the same opacity value and there is nothing you can do to change that (except setting the opacity of the parent to 1 again :P ).
Use a , instead of a ~.
Check out the list of all CSS Selectors:
W3 CSS Selectors
You can't do this with pure CSS. There is no relation between tab1 and tab-1.
I believe this is taken from jQuery tabs markup? You are probably better off sticking to using jQuery tabs than trying to do it this way.
Sadly you cannot, as there is no CSS way to travel up the hierarchy. You will have to do this with Javascript.