In the Primefaces Showcase, a SelectOneMenu is placed within a table cell. Here's the layout of the containing cell:
But, if I replicate the Showcase HTML structure and include its default.css, the layout I get looks like this:
Somehow they differ by ~3px!
This is annoying because I'm creating a form with input elements. Whenever I use SelectOneMenus, the grid row is slightly too large:
Any idea of how to remove this bottom "margin"? The developer tools in Chrome/FF/IE aren't revealing the root cause...
Add display:block to your css for the SelectOneMenu:
.ui-selectonemenu {
display: block;
}
Related
I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this?
We are using Angular 8.
EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin).
Below i added the html code we used.
Try this one, I'm also facing this issue on p-dropdown via Angular10;
When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.
The solution
style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file
.force-left {
left: 0 !important;
}
.component.ts
<p-multiselect
...
panelStyleClass="force-left"
...
></p-dropdown>
We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.
I am trying to design email template. In a table, clicking on a row, more info shows up. Here is the fiddle: https://jsfiddle.net/0oyubtaL/
However, the problem is that mobile app of outlook doesnt support and the rows dont expand. I have converted to use inline CSS from using internal CSS - it didnt work. here is the fiddle: https://jsfiddle.net/y2dr7ags/
My question,
Is there a way to make the :checked feature of checkbox as inline CSS in the above fiddle and make the expand table row feature work ?
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked+table {
display: table;
width: calc(100% - 20px);
}
Is there a way to achieve the same effect of collapsible table row using some simple HTML, CSS trick that would work in email templates ?
Is there a way to make the whole row of a table an accordion ?
Many thanks.
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
In the showcase example for http://fractalsoft.net/primeext-showcase-mojarra/sections/layout/tabbedLayout.jsf
tabs are centered right, I can't figure out how to do it.
I've tried searching and applying ui-tabs styling and I can change size easily but not the tab alignment.
For example this did not work: jQuery UI tabs aligned and sharing bar with a title
This seems to be the relevant css http://code.google.com/p/primefaces-extensions/source/browse/primefaces-extensions/trunk/src/main/resources/META-INF/resources/primefaces-extensions/layout/layout.css?r=1201
and pe-layout-tabbuttons is indeed present when I firebug the code but I can't figure out what to change.
I basically want this:
_________________|tab1|tab2|tab3|
instead of:
|tab1|tab2|tab3|_________________
cheers
It seems that this CSS does the magic:
.pe-layout-tabbuttons {
left: auto !important;
}
To see how to use CSS in JSF see here.
I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}