I have an odd bug that only occurs when the dropdown panel extends past the browser window. The background of the panel then becomes transparent. If the browser window is resized so that the dropdown panel can be completely visible upon clicking, the background is no longer transparent.
These are the custom styles affecting the ng-select dropdowns:
.prop-form {
...
&__row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
&__col {
flex: 1;
}
&__dropdown {
display: flex;
align-items: baseline;
}
&__ng-select {
width: 100%;
margin: 0.75em 0.5em;
}
&__ng-select > .ng-value-container {
padding-bottom: 0;
}
}
And the markup:
<div class="prop-form__row">
...
<div class="prop-form__col">
<div class="prop-form__dropdown">
<ng-select class="prop-form__ng-select" name="time"
[items]="scheduleFormService.timeOptions" [markFirst]="true" [clearable]="false" [searchable]="false"
placeholder="Select time" formControlName="time">
<ng-template ng-option-tmp let-item="item">
<div>{{ item }}</div>
</ng-template>
</ng-select>
</div>
</div>
...
</div>
Solutions already attempted (but did not work):
Using ViewEncapsulation.None in the component and parent component
Overriding default styles with ::ng-deep in both the component and global styles
Bug occurs in Chrome and Safari.
My coworker was able to find the problem. The height of the dropdown container was set to auto. So when the height of the modal isn't enough to display all of the items, the height adjusts to a smaller value.
Solution:
.ng-dropdown-panel {
white-space: normal;
height: fit-content;
}
Related
We have had a Kendo Angular implementation in place for several years now. We recently updated Kendo and Angular and we found that a click event we placed on a is now broken.
We have an outer div which contains our combobox and another div with an icon containing a click event that is broken. See the screenshot with the red arrow pointing to the broken div icon.
Below is the HTML and the css governing the div.
<div *ngIf="values.length < maxCardinality"
class="editor-row">
<kendo-combobox #selectBox
[data]="connectionCandidates$ | async"
[textField]="'_id'"
[valueField]="'name'"
[filterable]="true"
[placeholder]="'Search...'"
(selectionChange)="handleComboBoxValueChange($event)"
(filterChange)="handleFilter($event)"
class="reference-combobox">
<ng-template *ngIf="resultCount >= 50" kendoComboBoxNoDataTemplate>
<span i18n>50+ partial matches. Type more.</span>
</ng-template>
<ng-template *ngIf="resultCount == 0" kendoComboBoxNoDataTemplate>
<span i18n>No results found.</span>
</ng-template>
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="row">
<div *ngIf="hasConnectionTo(dataItem)"
class="checkmark"></div>
<span class="item"
[ngClass]="{
connected: hasConnectionTo(dataItem)
}">
{{ dataItem.name }}
</span>
</span>
</ng-template>
</kendo-combobox>
<div
class="picker-button"
*ngIf="values.length < maxCardinality"
(click)="handleClickReferencePicker($event)"></div>
</div>
The Div at the end of this with the class "picker-button" is the broken click event.
CSS for the picker-button
.picker-button {
position: absolute;
top: 6px;
right: 32px;
cursor: pointer;
user-select: none;
outline: none;
display: flex;
flex: 0 0 auto;
align-content: center;
justify-content: center;
width: 24px;
height: 20px;
background-size: 20px 20px;
background: url($assets-dir + '/picker_multiple_blue.svg') 3px 2px no-repeat transparent;
&.disabled {
background: url($assets-dir + '/picker_multiple_grey.svg') 3px 2px no-repeat transparent;
}
}
I omitted the rest of the CSS file as I don't think its relevant.
I have moved the div outside of the div containing the combobox and I can get the click event to work. I have tinkered with removing some CSS elements as an experiment to no avail. Its worth nothing this is all within a kendo grid cell. Anyone that can toss any help would be great.
I was able to fix this by adding a z-index: 2; to the picker-button class. The Combobox updates added a z-index of 1 causing it to overwrite our click event.
I am using Vuetify and have a v-list-item with a title and a subtitle. But the title length is limited to only show one line. If the title is longer it will be cut off and show "...".
If I click the list item i want the subtitle to disappear and show the full title instead. This might result in a new height of the whole v-list-item. The expansion of the height should be a transition so that the height is not hopping when I am clicking the list item. I have trouble to solve this problem so maybe you have some ideas. This is my code so far:
<v-list-item three-line :class="{ activeListItem: currentPostId === post.id }">
<v-list-item-content>
<v-list-item-title :class="{'full-text': currentPostId === post.id}">
Title
</v-list-item-title>
<v-list-item-subtitle :class="{ 'post-subtitle-hidden': currentPostId === post.id }">
Subtitle
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
CSS:
.activeListItem {
background-color: #c4e0ff !important;
}
.full-text {
white-space: normal;
}
.post-subtitle-hidden {
display: none;
}
.v-list-item__subtitle, .v-list-item__title {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Instead of display: none use max-height: 0 then on the active class give it a max-height of like 100px (the maximum height you think it will ever use) than add a transition on max-height
that way it will have a sliding effect
--- edit ---
snippet for what is discussed in the comments
$('.title').click(function() {
$('.subtitle').toggleClass("subtitle-show");
});
.subtitle {
max-height: 0;
overflow: hidden;
transition: max-height .3s;
}
.subtitle-show {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="title">
Title
</div>
<div class="subtitle">
The subtitle
</div>
</div>
When I click on the title the subtitle appears/disappears the only problem with this implementation is that when you close it you have a little delay because it is transitioning on the max-height 100px to 0
As far as I know there is no better way to do this in css.
I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.
<mat-list>
<h3 matSubheader>Persönliche Daten</h3>
<mat-list-item>
<button mat-icon-button ngxClipboard [cbContent]="firstname">
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<h4 matLine>{{firstname}}</h4>
<p matLine>Vorname</p>
</mat-list-item>
<mat-divider [inset]="true"></mat-divider>
<mat-list-item>
<mat-icon matListAvatar>description</mat-icon>
<h4 matLine>{{lastname}}</h4>
<p matLine>Nachname</p>
</mat-list-item>
</mat-list>
My CSS:
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
background-color: rgba(0,0,0,0.04);
}
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
align-items: center;
align-content: center;
justify-content: center;
display: flex;
}
/deep/ .mat-list-item-content {
padding: 0!important;
}
/deep/ .mat-list-base .mat-subheader {
padding: 0!important;
}
p {
font-family: Lato;
color: rgba(0,0,0,.54);
}
Using the (click) property
You can just make the icon behave like a button.
Add a (click) property to it and call the function you want!
<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>
Then you can add some :hover css to it to make it feel like a button.
Using HTML/CSS
You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)
<button mat-icon-button >
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<div class="test-wrapper">
<h4 matLine>{{firstname}}</h4>
<p matLine> Vorname</p>
</div>
with this css:
.test-wrapper{
padding-right: 0;
padding-left: 16px;
width: 100%;
display: flex;
flex-direction: column;
}
.test-wrapper > *{
margin: 0;
}
I have a problem where I have created a header component but there is still whitespace above the header on every page I pull the header component in
this is my entire header component:
import React from 'react';
import { Link } from 'react-router';
import './index.scss';
export default class Header extends React.Component {
render() {
return(
<div className="container">
<ul>
<div className="links">
<li><Link to="quizzes">Quizzes</Link></li>
</div>
<div className="links">
<li><Link to="categories">Categories</Link></li>
</div>
<div className="links">
<li><Link to="create">Create</Link></li>
</div>
</ul>
</div>
)
}
}
and this is my entire css
body {
margin: 0;
}
.container {
margin: 0;
background-color: #bec0c4;
height: 50px;
width: 100%;
}
.container ul{
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: space-between;
list-style-type: none;
width: 90%;
}
I have seen many answers saying to set the margin to 0 but this is still giving me whitespace at the top. if i set margin-top to -20px, it removes it but i dont like this solution
Most browsers (eg. Chrome) come with a default set of rules (user agent stylesheet) and set rules like margin in ul's, so you likely have a margin-top (-webkit-margin-before: 1em;) set to your ul.
Set margin-top: 0 on the ul will remove the space:
ul {
margin-top: 0;
}
I've set the margin for ul to zero (and included padding to force a default reset). Let me know if this meets your requirements.
You may want to have a look at tools like normalize.css for future use.
body {background-color: red;}
body, ul {
margin: 0;
padding: 0;
}
.container {
background-color: #bec0c4;
height: 50px;
width: 100%;
}
.container ul {
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: space-between;
align-items: center;
list-style-type: none;
width: 90%;
height: 100%;
}
<div class="container">
<ul>
<div class="links">
<li>
<a>Quizzes</a>
</li>
</div>
<div class="links">
<li>
<a>Categories</a>
</li>
</div>
<div class="links">
<li>
<a>Create</a>
</li>
</div>
</ul>
</div>
I added a margin: 0 to .container ul to and it doesn't leave any whitespace. It was leaving whitespace before over the Header component. Here's a picture of how it looks now.
First check the page using inspect element (Ctrl+shift+I = for google chrome in windows).
Then check if <ul> is consuming the whitespace, then set ul { margin:0; } or for anyother element which is consuming the space. Hope it helps !
In my case, following code snippet worked (Mentioned this in app_directory/src/index.css)
* {
margin-top: 0;
}
You have two ways to get rid of this issue!
One as mentioned by most of the people do 'margin: 0;' or 'margin-top: 0;' to your ul tag or the child you have in your header.
or
Second as mentioned by Bahu, you can go to your index.css or App.css the parent components css files and do this.
* {
margin: 0; /* or margin-top: 0; */
}
If you apply a reset.css on your code, ensure your page loads this reset.css. If you are loading it from the homepage for example -index.js-, and then you open your browser directly on, let's said about_us' page -about_us.js-, then if about.us.js fails to load the reset.css you will have a standard page with all the browser's default styles.
So, always ensure you are loading your reset.css on all your routes to avoid default browsers' page overflowing.
I've got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don't understand why.
The result in Chrome:
The result in Firefox:
As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has significant overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.
The relevant HTML & CSS from the page is:
/**
* The ".charsheet" prefix on each rule is automatically added
*/
.charsheet .sheet-flexbox-h input[type=number] {
flex: 1 1 40%;
margin-left: 5px;
}
.charsheet .sheet-flexbox-inline > label > span {
white-space: nowrap;
font-size: 89%;
}
.charsheet .sheet-flexbox-h > label {
width: 100%;
display: flex;
flex-direction: row;
}
.charsheet .sheet-flexbox-inline {
display: inline-flex;
width: 100%;
}
.charsheet .sheet-3colrow .sheet-2col:last-child {
width: calc(66% - 5px);
}
.charsheet .sheet-body {
display: block;
overflow-x: visible;
overflow-y: scroll;
position: relative;
flex: 1 1 auto;
}
.charsheet .sheet-content {
height: 100%;
display: flex;
flex-direction: column;
}
.charsheet {
position: absolute;
left: 0;
height: calc(100% - 70px);
width: calc(100% - 12px);
}
/**
* CSS rules below are on the page, but not editable by me
*/
.ui-dialog .charsheet input[type=number] {
width: 3.5em;
}
.ui-dialog .charsheet input {
box-sizing: border-box;
}
<!-- I can only modify the descendants of .charsheet -->
<div class="charsheet tab-pane lang-en" style="display: block;">
<div class="sheet-content">
<div class="sheet-body">
<!-- ... -->
<div class="sheet-3colrow">
<div class="sheet-col"><!-- ... --></div>
<div class="sheet-2col">
<!-- ... -->
<div class="sheet-flexbox-h sheet-flexbox-inline">
<label>
<span data-i18n="current-experience-points">Current XP:</span>
<input type="number" name="attr_xp">
</label>
<label>
<span data-i18n="total-experience-points">Total XP:</span>
<input type="number" name="attr_xp_max">
</label>
<!-- etc... -->
</div><!-- /sheet-flexbox-h -->
<!-- ... -->
</div><!-- /sheet-2col -->
</div><!-- /sheet-3colrow -->
<!-- ... -->
</div><!-- /sheet-body -->
<div class="sheet-footer"><!-- ... --></div>
</div><!-- /sheet-content -->
</div><!-- /charsheet -->
My full CSS and HTML can be found at Roll20/roll20-character-sheets on GitHub. The full CSS that I can't edit can be found live (minified) at Roll20.net
Update: I've created a fiddle to demonstrate the problem: https://jsfiddle.net/Lithl/az1njzn8/
Fiddle in Chrome, fiddle in Firefox
Short answer
Add a simple min-width:0 rule to the input selector
Explanation
After doing a bit of research, I think the conclusion that I can make here is that flex has been known to have various issues and different behaviours across browsers, specially Firefox. I found a couple of useful threads that can lead to various fixes/hacks to have consistent results. A thread that helped me is : https://teamtreehouse.com/community/firefox-flexbox-not-working (scroll down to the comments)
Coming back to your question, I was able to fix it using two separate ways and I was able to produce consistent results in Chrome and Firefox. Both of them require a simple CSS change.
First approach
Change your CSS to the following:
.charsheet .sheet-flexbox-h input[type=text],
.charsheet .sheet-flexbox-h input[type=number],
.charsheet .sheet-flexbox-h select {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
margin-left: 5px;
}
I noticed that you had 40% as the flex-basis value but could not really figure out why you had this value, perhaps it may have other impacts elsewhere changing it to auto. But this does fix the issue.
Second approach
Add a simple min-width:0 rule to the input selector in your CSS. So your CSS would look like:
.charsheet input[type=text],
.charsheet input[type=number] {
display: inline-block;
min-width:0;
width: 165px;
font-size: 12px;
border: none;
border-bottom: 1px solid black;
border-radius: 0;
background-color: transparent;
}
I found this helpful tip from the link I posted above. Again, I do not have a very concrete explanation as to why this works, but it seems to get the job done.
I would recommend you go with the second approach, as it may have minimal impact since you are setting the width.
Working fiddle here with second approach: https://jsfiddle.net/az1njzn8/4/
I've had the same issue with number inputs behaving differently in Chrome vs. Firefox, and Gurtej's solution unfortunately didn't work for me.
What works for me though is to set a default width that would override the useragent's default width – even though the width is eventually being modified by more complex rules and circumstances with percentages, min-width, max-width and flexbox.
input[type="number"] {
width: 100px;
}
Compare https://jsfiddle.net/pyu0h1r2/1/ vs. https://jsfiddle.net/pyu0h1r2/2/.