The Materialize CSS Autocomplete opens in the upward position when at the lower end of the screen and it has a larger list to display, the problem is that the text input area with the blinking cursor gets covered and the user doesn't get the idea that he can type.
1) How can you force it to always go downwards? or, 2) How can you tell it to open above the input area without covering it when it decides to open in the upwards position? Ether of these solutions would be OK.
The closest solution I found is here (for the dropdown menu) and here, however these solutions look to me like jQuery which I am not familiar with (yet) and would need a plain JavaScript solution.
I use MaterializeCSS version 1.0.0 through the CDN.
Pictures: Autocomplete Closed and Autocomplete Open
hi the autocomplete is going upward because there is not space below but use can try this code
<style>
#autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8
{
position: initial;
}
</style>
or you can add jquery to add height of the parent div when the auto complete has been click
$("#idofautocomplte").on("click", function () {
$("#parentDivId").css("height", "400px");
});
try use this style:
.autocomplete-content{
top: 46px !important;
max-height: 300px !important;
}
this keep autocomplete always downward
To me it is working very well
Related
I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt
I'm using mat-select in an angular project. When it comes to large screens, the options are shown properly but it is the opposite on mobile or low res screens.
Actually, the options are shown but the text is missing.
I've tried setting the max width of the mat-option with no success.
When i select an option, it is selected and shown properly, but there is no way to know what option is selected.
With images,
Expected behavior:
Current behavior:
Currently, the text with the answers is offscreen to the left. If you make the strings in the dropdown very long, you'll start to see them.
You need to change the following css properties:
.cdk-overlay-pane {
min-width: 200px !important; //or whatever width you want goes here
.mat-select-panel {
min-width: auto !important;
}
}
The !important tags are to override the native material styles.
I am working with oracle apex 5.0. The breadcrumb region currently has an event tied to it which sets the class of the region from 'class="t-Body-title"' to class="t-Body-title has-shadow t-Body-title-shrink". This also lowers the top margin for the content body to 86 instead of 142. This event takes place when you scroll about halfway down the page and reverses itself once you scroll back up to the top. I am not sure how I can debug this change event in order to figure out where the event is being called. Does anyone know how I can capture this event or even set the breadcrumbs bar to be shrunk from the start? Any suggestions or ideas are helpful, Thanks.
You can try this putting this line of code in the 'Execute on Page Load' attribute of your page:
$(".t-Body-title").attr("class","t-Body-title has-shadow t-Body-title-shrink");
To shrink the breadcrumb bar from the start, you can add the following css to your page
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item:last-child {
font-size: 1.5rem !important;
line-height: 3.3rem !important;}
.t-BreadcrumbRegion-body,.t-BreadcrumbRegion-buttons {
padding-top:12px !important;
padding-bottom:12px !important;}
On my website's homepage there's a big picture which take 100% of the width and 60% of the height (it's a div with a css background-picture not an tag).
Over this picture, there's is a black transparent div (mainFormContainer) with some form input.
Two of those inputs are address field which are bind to Google Place autocomplete.
Here is the HTML code
<div id="titleContainer" class="splash-container" style="position: relative;" >
<div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
<div id="mainFormContainer" class="splash-bottom">
<form></form>
</div>
</div>
Basically what I did is that when an address is filled by clicking on an autocomplete suggestion (event place_changed in javascript) I initialize & display the google map with a marker on the location.
It works fine and looks great but the problem is that the mainFormContainer is over the Google logo of the google Maps (bottom left corner) and over the map's data (bottom right corner).
Since the div is transparent background-color: rgba(0, 0, 0, 0.6); the bottom data is not hidden and I used this solution (Responding to links under an overlay div) to make the below link clickable.
However, because my div is not transparent, this data is less visible and I'm not sure if it'll be a problem.
I would like to know if there is a solution to add some padding to the google logo & the bottom right data of the map ?
I've seen that you can do it on ios (https://developers.google.com/maps/documentation/ios/map#map_padding) but I didn't found anything equivalent for the javascript API
The only solution I could find was to add some invisible div as map controls to add padding but it doesn't work on the bottom data.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(createDummyDiv('100%', '20%'));
But since it add a div in the google maps, I tried the following code :
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
var clone = $('#mainFormContainer').clone(true);
clone.css('width', '100%');
clone.css('height', $('#mainFormContainer').height());
console.log(clone[0]);
return clone[0];
}
This trick gave me numerous new problem :
The Google Place autocomplete doesn't work (Autocomplete suggestion doesn't show at all)
The design for the font are herited from the maps and not my CSS
I have a field input with a datepicker that doesn't work as expected. The datepicker appear but when I click on a date, it doesn't fill the input.
So I gave up on this solution.
These elements have a common property, they are placed via CSS at: bottom: 0px;
You may use this to create a selector:
#mapContainer div[style*="bottom: 0px"]
to apply the padding you may use a transparent border at the bottom:
#mapContainer div[style*="bottom: 0px"]{
border-bottom:50px solid rgba(0,0,0,0);
}
Demo: http://jsfiddle.net/doktormolle/m2rumozm/
But I'm not sure if it's a good approach(the API may change), you better try your final attempt(use the form as map-control). The issues #1 + #3 probably may be fixed when you add the original #mainFormContainer instead of a clone(at least an autocomplete works without problems as a control, I've added an autocomplete to the fiddle to demonstrate it). Issue #2 should be solvable via CSS.
I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.