I have a question regarding the ion-radio component from the Ionic 4 component library.
Unfortunately this component https://ionicframework.com/docs/api/radio allows very little access to customise it's CSS through CSS variables. What i'm trying to achieve is to set the style of this checkbox icon to match this https://i.stack.imgur.com/PQnkY.png . Currently the style is the default one which corresponds to this https://i.stack.imgur.com/Vm9UQ.png. I've tried targeting the inner classes to no avail. I think it's because the divs are rendered inside the shadow-dom of the component ion-radio itself.I know this could be done with javascript, i would rather keep this as a last resort. Does anyone know of any other solution of achieving the same styling using this component?
Thank you
There is Ionic issue #20140 that will introduce new variable properties --border-radius and --inner-border-radius to the ion-radio component. The PR has been accepted is included in 5.0.0-beta.3.
Although the inner border radius is set to 50% if you're not using 5.0.0-beta.3 or higher, you can still change the CSS to address some of your needs. Maybe something like this?
ion-radio {
--color-checked:green;
--color:green;
margin-top: 20px;
width: 30px;
height: 30px;
}
Hope this helps.
You can play around with CSS to achieve this. Hide the ion-radio:
ion-radio {
opacity: 0;
width: 0px;
margin: 0px;
}
Place your custom radio button/shape inside ion-item:
<ion-radio-group>
<ion-item>
<ion-radio slot="start" value="foo" checked></ion-radio>
<ion-icon slot="start" mode="ios" name="radio-button-off" />
<ion-label>foo</ion-label>
</ion-item>
<ion-item>
<ion-radio slot="start" value="bar" checked></ion-radio>
<ion-icon slot="start" mode="ios" name="radio-button-off" />
<ion-label>bar</ion-label>
</ion-item>
</ion-radio-group>
Use the Ionic .item-radio-checked class:
ion-radio-group .item-radio-checked ion-icon {
fill: teal;
}
ion-radio-group ion-icon::after {
content: "";
width: 14px;
height: 14px;
background: teal;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50%;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
transform: scale(0);
}
ion-radio-group .item-radio-checked ion-icon::after {
transform: scale(1);
}
This works for md mode only, but you can customize it further for ios with CSS.
Related
I want to increase the size of whole vuetify v-switch component,as it is not listed in v-switch api
i tried to change the sass variables but it change the entire switches that the application have
click to see the current size
When you are changing SASS variables, it must affect all the elements in the application.
To change the only one v-switch, you can write something like:
<template>
<v-switch
v-model="switch1"
class="custom-switch"
:label="`Switch 1: ${switch1.toString()}`"
></v-switch>
</template>
<style>
.v-input--switch__track {
border-radius: 15px;
width: 48px;
height: 29px;
top: -2px;
}
.v-input--switch__thumb {
left: 6px;
}
.custom-switch .v-input__slot .v-label {
left: 6px !important
}
.v-input--selection-controls__ripple {
height: 0;
width: 0
}
</style>
CodePen demo is here.
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.
I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.
This is what I've done so far:
<Tag class="Badge-tag" color="warning" closable #on-close="removeTag">{{ badge }}</Tag>
Then on the less file I added the following:
.Badge-tag {
width: 60px;
position: relative;
.ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I had no luck at all. I don't know why is not setting it.
If you put above css as global css, I think it should work.
I create a demo on jsfiddle here, please check
If you use scoped css, you can try using deep selector
.Badge-tag {
width: 60px;
position: relative;
/deep/ .ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
When dragging a Web Component in Safari 11.1 (MacOS) dragstart is immediately followed by a dragend event if dragging starts on a child in the Web Component's Shadow DOM.
It works fine in Chrome and Firefox, how to enable drag and drop in Safari?
This happens for Web Components build without external library as well as when using Polymer 3.
For example, dragging <drag-item> works, but dragging the included <div class="child"> does not.
import {PolymerElement, html} from 'https://unpkg.com/#polymer/polymer/polymer-element.js?module';
class DragItem extends PolymerElement {
static get template() {
return html`
<style>
:host {
user-select:none; background-color: green; width: 80px; height: 80px; display: block; margin: 10px;
}
.child {
background-color: red; width: 20px; height: 20px; display: block; margin: 0 auto;
}
</style>
<div class="child"></div>
`;
}
}
customElements.define('drag-item', DragItem);
When used like this:
<div>
<drag-item draggable="true"></drag-item>
<drag-item draggable="true"></drag-item>
<drag-item draggable="true"></drag-item>
<drag-item draggable="true"></drag-item>
</div>
Codepen using Polymer 3 Web Components
Codepen using only native Web Component
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}