I couldn’t find a way to put a label inside the antd checkbox, removing the tick and replacing it with the label, in this case a letter, as it appears in the imageantd checkbox customized tick
maybe someone already went through this same case and can give me an idea where to review.
thanks, cheers!
here its how i managed to match the requeriments :
const StyledCheckBox = styled(Checkbox)`
&.ant-checkbox-wrapper {
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.15);
}
&.ant-checkbox-wrapper-checked {
background-color: #1890ff;
color: #fff;
}
.ant-checkbox {
display: none;
}
`;
and then just group that checkboxes
<Checkbox.Group style={{ width: "100%" }}>
<Row>
<Col span={4}>
<MyCheckbox value="1">L</MyCheckbox>
</Col>
<Col span={4}>
<MyCheckbox value="2">M</MyCheckbox>
</Col>
<Col span={4}>
<MyCheckbox value="3">M</MyCheckbox>
</Col>
</Row>
</Checkbox.Group>
Related
I have an issue here with 0clue what is going on. I am currently developing an application using ionic angular. The preview on the web version is totally fine and looks good reference image.
But when I deploy it into iOS the button shape is off and there is a white structure blocking part of the header reference image.
I am new to the app developing world, please bear with my stupidity on this.
Can someone guide me in the right direction, please?
ion-toolbar {
--background: #383E56;
height: 102px;
}
ion-header ion-toolbar:last-of-type {
display: flex;
align-items: center;
justify-content: center;
}
.searchbar {
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
border-radius: 90px;
-webkit-position: sticky;
position: sticky;
display: flex;
justify-content: flex-end;
padding: 3px 3px;
margin: auto;
margin-top: 35px;
}
.btn2{
width: 36px;
height: 36px;
border-radius: 50%;
box-sizing: border-box;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
//position
position: absolute;
top: 3px;
left: 313px;
//vector size & position
font-size: 27px;
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
<ion-header>
<ion-toolbar>
<div class="searchbar">
<button class="btn2" (click)="toMorePage()">
<ion-icon name="arrow-back-outline"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
I am doing svg path animation in it works fine in all browsers except safari and IE
svg example
<svg
v-if="waveid == 6"
class="gotthard-red-pipe"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 732.36 411.6"
>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_20" data-name="Ebene 20">
<rect class="bg-transparent" width="732.36" height="411.6" />
</g>
<g id="_2._Roehre" data-name="2. Roehre">
<g id="_2._Roehre_right_to_left" data-name="2. Roehre right to left">
<g id="_2_Roehre_bg" data-name="2_Roehre_bg">
<path
:id="'wave' + waveid"
filter="url(#innershadow)"
class="gothard-p3"
stroke="url(#img1)"
d="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
/>
</g>
<g style="transform: translateY(-55px);">
<foreignObject
width="30"
height="80"
transform="translate(-12 -24)"
>
<div class="valueSpan-wrapper">
<div
xmlns="http://www.w3.org/1999/xhtml"
class="valueSpan"
:id="'valueSpan' + waveid"
></div>
</div>
</foreignObject>
<animateMotion
:id="'motion' + waveid"
dur="1s"
:repeatCount=" percentageCustom / 100"
fill="freeze"
path="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
></animateMotion>
</g>
</g>
</g>
</g></svg
this code is done in vue.js
Problem is in Foreign object, it should animate on path which is same d = path in animateMotion, repeat count make path move in value what user set up in craftcms
css
.gotthard-blue-pipe,
.gotthard-green-pipe,
.gotthard-red-pipe {
position: absolute;
width: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.textContainer {
width: 90%;
}
.z1{
position: absolute;
z-index: 999;
}
.z2{
position: absolute;
z-index: 998;
}
.valueSpan-wrapper{
width: 100%;
height: 100%;
position: relative;
}
.valueSpan {
position: absolute;
background-color: white;
border: 1px solid $color4;
padding: 2px;
transform: skew(15deg, 320deg) rotate(15deg);
z-index: 99;
color: #4b4d53;
font-weight: 600;
width: 30px;
font-size: 8px;
text-align: center;
bottom: 30px;
left: 0 !important;
.stand {
height: 1px;
width: 50px;
background: #87888d;
position: absolute;
transform: rotate(90deg) translateX(28px) translateY(25px);
}
}
is it possible to animate foreign object with this way also in safari or I have to use different approach?
I am developing an Angular 7 web application and am struggling with a Mat-Selection-List where I allow the user to drag and drop the mat-list-option items.
Each mat-list-option item comprises a div which uses Flex Layout to arrange its components as follows:
<mat-selection-list #taskGroupSelectionList
cdkDropList
[(ngModel)]="selectedOptions"
(ngModelChange)="onNgModelChange($event)"
(selectionChange)="onSelectionChange($event)"
class="task-group-list"
(cdkDropListDropped)="drop($event)">
<mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>
<!-- Task Group Item -->
<div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">
<!-- Move Handle -->
<div fxFlex="32px" style="padding: 0 0 0 4px;">
<mat-icon class="summary-channel-handle">menu</mat-icon>
</div>
<!-- Index -->
<div fxFlex="24px;">
<p style="margin: 0; text-align: right;">
{{taskGroup.orderId}}:
</p>
</div>
<!-- Title -->
<div fxFlex="nogrow">
<p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
{{taskGroup.title}}
</p>
</div>
</div>
</mat-list-option>
</mat-selection-list>
The key CSS styles for this simple component are as follows:
.task-group-list {
width: 100%;
height: 100%;
display: block;
background: white;
}
.task-group-box {
border-left: solid 1px #ddd;
border-right: solid 1px #ddd;
border-bottom: solid 1px #ddd;
border-radius: 4px;
height: 48px;
color: rgba(0, 0, 0, 0.87);
box-sizing: border-box;
cursor: move;
background: white;
}
.task-group-box:first-child {
border: solid 1px #ddd;
}
.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
box-sizing: border-box;
border-radius: 4px;
height: 48px;
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Functionally I can drag and drop the list items, however when dragging, the mat-list-option checkbox which I have placed on the right checkboxPosition="after" moves to the top left corner and pushes the elements of the mat-list-option down.
Does anyone know why the layout changes on dragging please?
The element being dragged can be found as the last child of body in the DOM (only on drag), and this creates quite some problems as you can read here.
If your mat-list-option element is not very complex, only the checkbox and some text, you can solve this by adding some CSS to the global styles.css file, for example:
/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
display: flex;
align-items: center;
}
/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
margin-right: 10px;
}
You can see a DEMO in this stackblitz that I created.
If the content of your mat-list-option element is a bit more complex you will need to inspect the element and add the necessary styles. You can do this by dragging the mat-list-option and right clicking while dragging, inspect element and find classes that you can use to style it.
A better alternative might be to just create a custom cdkDragPreview. You can style this as you wish.
<mat-selection-list #movies cdkDropList>
<mat-list-option *ngFor="let movie of movies" cdkDrag>
{{movie}}
<ng-template cdkDragPreview [matchSize]="true">
<div class="movie-preview">
{{ movie }}
</div>
</ng-template>
</mat-list-option>
</mat-selection-list>
Important: The matchSize input is required to automatically size the item being dragged.
And since the css is scoped to your component, even when it's moved outside the DOM tree of your component it retains the style (assuming Emulated style encapsulation).
.movie-preview
{
line-height: 3;
padding: 0 1em;
color: hotpink;
background: white;
/* border (and hotpink color) are optional, based on your preference */
border: 1px solid #ccc;
border-radius: .5em;
}
That looks like this when dragging:
Try with ::ng-deep
::ng-deep .cdk-drag-preview .mat-list-item-content{
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
padding: 0 16px;
position: relative;
height: inherit;
}
this works for me
When using jQuery mobile, is it possible to combine a checkbox or button with a text input? Something like in my image below.
I want to use it as field validation so it will turn red or green when user updates the field.
jQuery Mobile does not include this, but you can do it via CSS.
Here is a DEMO with a couple of options
The first uses a table, so the left button is always the same size and the input grows/shrinks on window resize. While the second option uses a div and bothe button and label grow shrink.
Fot the table, the css removes borders and spacing on the table and sets the first td width to a constant value. The rest of the css makes the button and input look right:
<table id="specialContTbl">
<tr>
<td class="btntd">
<button data-role="none" id="btn">B</button>
</td>
<td class="inptd">
<input data-role="none" type="text" id="inp1" name="inp1" value="" placeholder="enter some text" />
</td>
</tr>
</table>
#specialContTbl {
border-spacing: 0;
border-collapse: collapsed;
}
#specialContTbl td {
padding:0;
margin: 0;
border: 0;
vertical-align: top;
}
#specialContTbl td:first-child{
width: 60px;
}
#specialContTbl{
width: 100%;
}
#specialContTbl button, #specialContTbl input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#specialContTbl button {
font-weight: normal;
background: #00f050;
padding: 5px;
color: #333;
border: 1px solid #d4d4d4;
border-right: 0;
border-bottom-left-radius:1em;
border-top-left-radius: 1em;
line-height: 28px;
height: 38px;
width: 100%;
float: left;
text-align: center;
cursor: pointer;
white-space:nowrap;
}
#specialContTbl input {
width: 100%;
height: 38px;
padding: 8px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 1em;
border-top-right-radius: 1em;
line-height: 18px;
float: right;
box-shadow: inset 0px 2px 2px #ececec;
}
#specialContTbl input:focus {
outline: 0;
}
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>