If you look at the default example of react-datepicker on their website reactdatepicker.com, you'll see that as you click through different months there is always a day of that month colored blue, which happens to correspond to the day of the month of the selected date. Is this a bug, or some weird feature nobody wants? How do I get rid of it? I looked over the docs and haven't found anything.
Update
After realized this issue is related to some "keyboard-selected" function then I did a quick search and found out we can fix this problem by disable the keyboard navigation. (If you don't need the keyboard navigation feature)
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
disabledKeyboardNavigation
/>
Not sure why it is happening after 2.14.1 version but here is a quick fix. Applying the following style to your css file to override the style.
.react-datepicker__day--keyboard-selected {
border-radius: 0;
background-color: #FFF;
color: #000;
}
Add !important if not working.
Related
What controls the number of items displayed in a drop down list for md-autocomplete.
I have space for more than the 5 that are being displayed.
Do you mean increase the height of the autocomplete results container? If that's the case, this is not yet posible with angular-material out of the box. See this closed issue.
As it's posted in an issue comment, as a workaround you can use a little css hack. Something like this:
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
height: 350px;
max-height: 350px !important;
}
You can see it working on this plunker. Hope it helps
use md-dropdown-items="7"
Sourced from the issue linked above.
I have an html page with a button and I want to get rid of its padding. The obvious
padding: 0px !important;
didn't work. Writing
-webkit-appearance: none;
padding: 0px;
did, but it got rid of all the other iOS-like formatting.
Everything works fine on desktop. This happens on iOS. I haven't tested Android.
Is there any way to change just the padding without everything else? Is there any way to save a copy of the style so that I can restore it? I'm happy with javascript-based solutions (including d3, for any difference that makes).
My current solution (which I am not happy with) is approximately the following javascript/d3:
button.style('padding','0px');
if (button.style('padding-left')!='0px') {
button.style('-webkit-appearance', 'none')
.style('padding', '0px')
.style('background', 'linear-gradient(white,#999)')
.style('border-radius', '10px');
}
Which makes the button look kind of like an iOS button, but not really, and does nothing on desktop chrome or firefox, though I'm not sure there isn't a browser this will break.
I have a panel with a scrollable content. It works fine in every browser & device except for iPad (no matter what browser I use on the iPad).
I have a panel-container and a panel-slide
.panel-container {
position: relative;
width:100%;
height:100%;
z-index:1;
}
.panel-slide {
width:90%;
height: 90%;
display:block;
position: absolute;
z-index: 2;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
}
The panel-slide contains a lot of content, so I get the scroll bar. However I can't scroll on iPad.
I have googled the problem and have tried the -webkit-overflow-scrolling: touch, but I can't seem to get to the bottom of it.
What is there to do?
I don't know if this will be helpful, but I had a similar issue, and this is how I resolved it.
My issue:
My page has a popup element that gets populated by AJAX with a list of clickable links. When this element is pre-populated with the rest of the page (some pages required the list to be visible from initial page load), it worked fine. But, when I opened the element and populated the list, as mentioned above, using AJAX, the list would not scroll on iOS.
The problem, as far as I could tell:
In the interim between clicking the button to open the list and when the server responded with the populated list, I had the element show some simple text saying "Loading...". I found that when this was removed, and the element was already populated from the page load, it would work fine. It seemed that as long as there were already contents in the list with a height greater than the containing element, it would be scroll-able when the list populated.
My resolution:
What I did was to take the simple text in the interim from "Loading..." and to wrap it in a div that would prompt scrolling, like such: "<div style='height:1000px;'>Loading...</div>", and that seemed to work for me.
Again, I hope that this can help someone, or if not then perhaps someone with a little more skill than myself may be able to tell us why this might have worked.
There are no scrollbars in any of the iPhone OS. Use 2 fingers to scroll. They use gestures and not mouse scrolls so you are unable to achieve this without hacks.
It maybe worth looking at http://iscrolljs.com/
I recently launched a landing page for a new website. But on iOS, the inputs fields are ignoring the padding of the container and the subscribe button looks completely different. How can I fix this?
View the landing page: signup.sketchtricks.com
Screenshot on iOS: cl.ly/image/0y0P0m0J3a3X
Thank you for your help, I really appreciate it!
Add...
-webkit-appearance: none;
border-radius: 0;
...to the affected selectors in your css.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!