Please tell me how can I create a Richfaces page where I want to keep the collapsible panels fixed and below that I have another form. As the form is very large. So I want to put a scroller. Do I need to use frameset or is there any support for that in Richfaces
Nothing jsf-specific. That is usually done via CSS:
create a <div class="limitedHeightDiv">
define the css class in a css file:
.limitedHeightDiv {
height: 100px;
overflow: scroll;
}
(You can define these styles inline, using style=".." as well)
#Bozho
.limitedHeightDiv {
height: 100px;
overflow: auto;
}
Will work a way better, in the previous case you will have scroll bars even if you don't need them. I guess it is just a question of different design and flavors.
auto
Related
I'm stuck in a css position, how can I make all alignment button of each column in same row? I'm using wordpress plugin and tried used css to select class name, but class name are specify for all button, please somebody help me out..
Try this
CSS
.vc_gitem_row .vc_gitem-col {
padding: 10px;
min-height: 300px;
}
.vc_btn3-container.vc_btn3-left {
bottom: 0;
position: absolute;
text-align: left;
}
Note: You should scope this changes so they don't affect other sections of the site
Without seeing the code this is a bit difficult to answer, but I would take a look at setting min-height for the description above the buttons. Then it would at least push all the buttons to be aligned in a row. You would have to go even further setting some media queries to improve this styling when it comes to mobile.
Either you need to set height of Text container
max-height: 100px; //as your requirement
or set button wrapper style property
bottom:0px;
Set a min-height value for product text content just above the button in product card.
I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}
I have a dynamic created page with a panel which contains this:
<div class="x-panel-body x-panel-body-default x-panel-body-default" id="panel-1026-body" style="left: 0px; top: 0px; width: 1819px; height: 29px;">
I want to change the width of this panel, but the problem is that the width is not being overwritten.
What I have tried to do in my css is:
#panel-1026-body {
width: 400px;
}
This does not work, since the width still stays 1819px as auto-created by the panel. How ever, it seems that it is only the width: that it won't accept, if I fx. add a margin-left: 400px; or background-color: red; it works.
Does anyone know what might be the cause of the width not taking effect?
I have provided the info that I think is relevant, but please let me know if you need more info
Thank you
It is because when your set a value in your element like style="left: 0px; top: 0px; width: 1819px; height: 29px;", it will be prioritary on the CSS.
Rapid solution :
#panel-1026-body {
width: 400px !important;
}
But it's a very bad pratice to use !important
Cool solution
Try to remove all the style of your element and put it into a CSS class. After, put your CSS code, who will be prioritary on the code before.
inline-styles have greater specificity so with normally you can't override that. You need to use !important:
#panel-1026-body {
width: 400px !important;
}
And yes margin-left or background-color works as these are not defined in that inline-style.
Changing a complex component dimensions (panel, grid, tree, etc.) with CSS is generally not a good idea in Ext. The dimension you see in the DOM, in your case 1819px can also be set on some children of the panel depending on layout.
Thus, you would need to use css that addresses main container div plus all necessary children. Such solution is very vulnerable because the DOM structure can (and it does) change with Ext upgrades - sometimes even minor upgrades may introduce a change of DOM.
You should always set dimensions programmatically calling panel.setWidth(), panel.setHeight(), panel.setSize() or similar. Ext then takes care about itself and sets the width to all DOM elements it needs.
As all suggested in this topic, the solution was to add:
width: 400px !important;
This solved my problem. Gratitude to all that helped
I have a graph plugin that inserts canvas and a legend <table> to its container. In this plugin the table has no width defined and in my CSS there is a width for tables inside that container were my plugin gets inserted.
So, the new div is inheriting table{ width: 100%} from the CSS and rendering wrong.
I tried to use width: initial;, looks good on Chrome but IE doesn't like it check browser compatibility
I admit changing/forcing a inline CSS in the script/plugin since it has to work in any enviroment.
What is the best solution here?
Like you said, generally width: auto will have a similar effect. Having the rules:
.my-selector {
width: auto;
width: initial;
}
Should cause it to use initial if it's supported and auto otherwise.
Using width: auto; inline, inside the script solves the problem on Chrome, FIrefox and IE 11. Just not sure if there is a better way.
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459