I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
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
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
I want scrollbars to be always visible in IOS. The quick solution is the "::-webkit-scrollbar" fix. However when using "webkit-overflow-scrolling: touch" for the "slide feeling", the scrollbars are not visible anymore.
How can I get them both working?
See the example http://jsfiddle.net/gatb4ct6/5/:
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
/*-webkit-overflow-scrolling: touch;*/
/* uncomment above and scrollbars are not visible on IOS */
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
I was searching for the same problem. It appears that you can use just one of the two options. Scroll auto but with styled scrollbar or fluid scroll but with invisible and not styled scrollbar.
.frame {
overflow-y: auto;
border: 1px solid black;
height: 13em;
width: 10em;
line-height: 1em;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Or use the -webkit-overflow-scrolling: touch; and none of the pseudo classes after.
im new here, I have a page http://www.worldbellydancefestival.com/dance-costumes that the footer can not properly stay on the bottom, i've added clear to the footer block but it is not working. could you please help. many thanks.
the footer css:
#footer{
width: 980px;
margin: 10px auto;
position: relative;
clear: both;
overflow: hidden;
/*border-top:1px solid #ce09d0;*/
/* padding-bottom:20px;*/
background:url(/images/nav-bg-blk0.png) repeat 0 100%;
max-height: none;
}