I have installed Dropkick to be able to create nice looking dropdowns [http://jamielottering.github.com/DropKick/]
My test is installed here:
http://test.mobilkul.se/dropkick/
Width is calculated in regards to the longest element in the dropdown menu.
I would like to increase the height of this dropdown.
Right now 8 options are showed if I click on the button.
Is this possible or is this a browser issue?
If you look at dropkick's CSS file, you'll find the following at line 132 - Check it out using Firebug or Chrome dev inspector.
.dk_options_inner, .dk_touch .dk_options {
max-height: 250px;
}
You can either:
Change that 250px to whatever you need - for example, 350px
OR
Override the style in your CSS file (recommended):
body .dk_options_inner, .dk_touch .dk_options { /* see body prefix for more specificity */
max-height: 350px;
}
Related
I have a project in which I use Angular Material Components and I would like to customize mat-select. I want to achieve select input which mat-select-panel looks like it's dropdown as in native html select. I accomplished good effect using only CSS styles but I have one problem.
The problem is that my mat-select looks different depending on the size of the browser window. More specifically, mat-form-field and mat-select-panel sometimes are not aligned (there left sides are not in line) and this is not acceptable in my project.
This link is how it should look (example: Firefox browser, window size 100%):
This link is what I want to fix(example: Firefox browser, window size 90%):
My predictions why it does not work:
mat-select-panel has a position absolute and is set to position depending on cdk-overlay-panel. Cdk-overlay-panel position is calculated dynamically. Sometimes fractional width and height values are truncated and hence the difference of one pixel between mat-form-field and mat-select-panel. This is an example:
What I want to achieve?
I am looking for a way to make my input always look good regardless of the browser window size. Line between mat-form-field and mat-select-panel must always be straight.
Stackblitz for my input is here:
a link
Love the attention to detail in your observation... I've had a customer with such an eye also :) ... on checking your stackblitz, we observe the following which is a bigger issue which needs resolution:
Commented your CSS .container>*{ position: absolute; top: 30vh; left: 30vw; } with the following to observe the effect of mis-aligned few pixels on zooming in/out on the browser:
.myMatOptions{ position: absolute; top: 30vh; left: 30vw; }
::ng-deep .cdk-overlay-container{left: 30vw;}
::ng-deep .cdk-overlay-pane { left:0 !important; transform:none !important;}
::ng-deep .mat-select-panel{left: 0}
on a zoom of 80%, we see:
on a zoom of 90%, we see a minor mis-alignment in the rendered output:
on a zoom of 100%, we see:
on a zoom of 110%, we see a minor mis-alignment in the rendered output:
on a zoom of 125%, we see:
These minor visual issues (on 90% and 110%) are on the rendered output - the css behind these is exact so there is nothing fundamental to resolve. working stackblitz here
The question is about FullCalendar v3.4.0.
If you open the example here and choose day view, you get a vertical scrollbar. I want the view to fit to the browser window instead. What I mean is that I want the height to shrink when the browser window height shrinks, and have no scrollbar.
I haven't found a way to achieve this. Also, I found the following CSS code, which might be relevant:
/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
height: 1.5em;
border-bottom: 0; /* each cell is responsible for its top border */
}
Looks like the height of each cell is fixed, but I'm not skilled enough to say.
I prefer not to modify the library source code, but that's an option as a last resort.
Here's the look:
[]
I did the page in ReactJS, but I've made a copy of the page here.
To better show the white space, here's the screenshot:
several interesting observations:
when the page is first loaded, there's no such issue.
the issue only appear, when the second image box (the one with 100% bar there) added into DOM
screen.width = 375
$('html').width() = 375, also
I don't know how and why the white space appeared, nor can I find any element having width > 375. (I didn't check through all element though)
$('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
I try to do inspect on that white area, cannot. It would imply show me the body
this issue appear both on web and on mobile
this issue doesn't appear for the code in codepen I've shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed
Any idea on: 1) why the white space appeared? 2) how could I solve the issue?
PS: just in case if you missed the part I put link to CodePen, Here it is again.
Update 2: I have this input box which I'm placing outside the page:
<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">
Corresponding style:
.review-add-form form .uploader .attache-upload-area .attache-upload-button {
position: fixed;
top: -1000px;
}
I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared
Add this to the CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Faced this issue multiple times and in my case, it's generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements, etc.
It appears that Facebook has decided to change the like box to page plugin, and limit the maximum size to 500px.
Page with the script: http://akecheta.com/facebooklikeplugin-responsive.html
My problem is exactly that one, I can't use a full width layout on the likebox. Here is what I've tried so far:
/* Fits the like box to the parent div, creating a fluid layout */
#u_0_0 > div {
width: 100% !important;
}
/* Fits the background image to the like box */
.uiScaledImageContainer._2zfr {
width: 100% !important;
}
/* Modifies the first background color of the fans part */
._h7l {
background: #EE6C00 !important;
}
/* Modifies the second background color of the fans part */
._h7n {
background: transparent !important;
}
/* Modifies the color of the text above the fans thumbnails */
/* Modifies the color of the text above the fans thumbnails */
._50f3 {
font-size: 150%;
line-height: 25px;
color: #FFFFFF !important;
}
It worked amazingly well on the fly, but then I saved those changes to my stylesheet, nothing happened.
All the classes are changed when the page loads, but the id #u_0_0 is still kept the same. It's as if it didn't exist.
Right now I'm trying to think of a solution for this problem, as I need to use the page plugin with a full width layout.
The reason your CSS worked when you did it on the fly in devtools and not when you put it in your stylesheet is that the iframe the plugin is being loaded in cannot be styled by CSS outside of it. The only way to style an iframe is from within the iframe itself. Since you are loading this as a third party plugin, you will need to look for a way to dynamically inject the styles into the iframe once it has fully loaded.
See this question for a bit more direction in what you are trying to do: Append a stylesheet to an iframe with jQuery
I saw some questions about this, but those questions don't gave a solution that could work for me.
I want to increase the Scrollbar width of a div. The div size is huge, so a horizontal scrollbar has appeared. Now I want to increase the width of that scrollbar for more flexibility.
So I search and found following link with code that works on Chrome browser.
JSFiddle
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
But this doesn't work on Firefox. I tried to replace the webkit with moz , didn't work either.
I also found that writting following code in userContent.css file of firefox can increase scrollbar width, but 1) I didn't find that userContent.css file in windows 7. 2) I can't go to users' home to tell them how to increase scrollbar width manually :P That's not a solution.
/* Increase width of VERTICAL SCROLLBAR */
scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 35px !important; -moz-appearance: none !important; }
/* Increase width of HORIZONTAL SCROLLBAR */
scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-height: 35px !important; -moz-appearance: none !important; }
Is there any way so that I can increase scrollbar width in both Chrome & Firefox?? (Forget IE) I can use html css javascript & jquery solutions, but no scrollbar plugin. I've to convert the native scrollbar from browsers.
Although chrome supports changing the scrollbar width using -webkit prefixes none of the other browsers do. Some allow the scrollbar to be styled so the colours are different but as far as I am aware you cannot change the width.
Instead, if it is absolutely essential you change the scrollbar, you will need to use a JavaScript solution.
There are many solutions out there - too many to document in an answer on SO - but here are a few links to get you started:
http://slodive.com/web-development/jquery-scroll/
http://designhuntr.com/custom-jquery-scrollers/
http://www.bloggingehow.com/2012/11/top-10-jquery-scrollbar-plugins-with.html
http://www.scratchinginfo.com/best-jquery-scrollbar-plugins/
check the below link. check the philipp comment mentioned in the site.
https://support.mozilla.org/en-US/questions/979461 also check the bugZilla
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Dont forget to check the comment #134
Custom CSS Scrollbar for Firefox
Although you cant customs the css for FF .. you can use this plugin : http://manos.malihu.gr/tuts/m-custom-scrollbar-plugin.zip