I have implemented the above selectOneMenu in Bootsfaces and the below selectOneMenu in primefaces.
I need the implementation in primefaces but styling as in bootsfaces.
How can I change the styling of the second selectonemenu as the above selectOneMenu?
I need to remove the grey borders.
Can anyone please suggest me.
EDIT -
After adding the suggested css.. primefaces selectonemenu is displayed as above on selecting the selectonemenu.
I need to align the highlighted box around the down arrow symbol in the selectonemenu and change the highlighted box color to grey.
Please suggest further modifications. Thankyou in advance.
I have following display of the p:selectOneMenu with the custom CSS classes (form-control & radius-none) on my specific screen:
XHTML:
<p:selectOneMenu styleClass="form-control radius-none" ...
...
...
CSS:
.ui-selectonemenu.form-control {
color: #555 !important;
display: block !important;
margin-bottom: 0 !important;
padding: 5px 10px !important;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
.radius-none {
border-radius: 0 !important;
}
.ui-selectonemenu.form-control .ui-selectonemenu-trigger {
top: 0;
right: 0;
width: 16px;
height: 100%;
padding: 0 5px;
cursor: pointer;
position: absolute;
margin: 0 !important;
border: none !important;
margin-top: 5px !important;
background: transparent !important;
}
Update: The other CSS related to .ui-selectonemenu-label and .ui-inputfield is also part of the rendered HTML, which is generic in my case:
.ui-selectonemenu .ui-selectonemenu-label {
width: 100%;
border: none;
display: block;
cursor: pointer;
text-align: left;
overflow: hidden;
margin-bottom: 0px;
white-space: nowrap;
font-weight: normal;
}
.ui-selectonemenu .ui-selectonemenu-label.ui-inputfield.ui-corner-all {
text-overflow: ellipsis;
}
.ui-inputfield {
margin: 0;
padding: 5px;
background: #ffffff;
font-weight: normal;
outline: medium none;
box-shadow: inset 0 0 0 #8f8f8f!important;
-webkit-box-shadow: inset 0 0 0 #8f8f8f!important;
}
NOTE: If you want to change the style of all p:selectOneMenu elements in general, then remove the custom classes.
Some time ago, I've written an article about the problem. It includes a link to a demo project solving many (hopefully most) incompatibilities to PrimeFaces: https://www.beyondjava.net/blog/how-to-use-bootsfaces-and-primefaces-in-the-same-project/
Related
I'm trying to achieve an input field with an underline. As it is visually more appealing to me, I'm trying to make underline as close as possible to the font. I did achieve the closeness, but now, input field cuts tail parts of the letters with tails. Is there a possible workaround for this? Can I cancel input's this behaviour with something like "overflow: visible"? Or may I draw a fake line over the input field, instead of using border-bottom? Thanks in advance.
In short, I'm trying to make text get through the bottom line.
Here is a screenshoot about the problem.
Here is my current class:
.kk_input {
border: 0;
border-bottom: 1px solid #000;
outline: none;
font-size: 20px;
height: 20px;
margin-top: 5px;
}
Without seeing the rest of your markup, this should give you an idea enough to go off of.
.kk_input {
border: 0;
outline: none;
font-size: 20px;
}
div {
position: relative;
}
div:after {
position: absolute;
content: "";
bottom: 4px;
left: 0;
height: 1px;
width: 100%;
background-color: black;
}
<div>
<input class="kk_input" type="text">
</div>
You can use more than one box-shadow to create this effect.
.so49204829_input{
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}
<input type="text" class="so49204829_input">
& here's another approach using a second element. Unfortunately, you can't add an :after pseudo-element to input elements (at the time of posting).
.so49204829_input {
line-height: 20px;
font-size: 20px;
padding: 8px 4px;
width: 200px;
display:block;
}
.so49204829_input_accent {
margin-top: -14px;
height: 1px;
width: 208px;
background-color: #000;
pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}
<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}