I have a SelectOneMenu component with 2-column select items, like this example: http://primefaces-rocks.appspot.com/ui/selectOneMenu.jsf
How can I remove those borders between the first and the second column?
I'm getting this:
But I would like to get something like this:
I tried with CSS property border-style on column, but it doesn't work. Any suggestion?
Based on a tip from #Tiny, I managed to remove borders with the following CSS code:
.ui-selectonemenu-table td, .ui-selectonemenu-table tr{
border-style: hidden !important;
}
Related
I have a tabulator 4.9 contained within one element of a flexbox. The flexbox element has flex-grow>0.
Some of my columns are hidden during the initial draw. The select element above the table hides columns and shows the selected column, and redraws the table.
When using layout:"fitColumns", the table has two issues when first rendered-
The table is wider than it's container, by roughly the width of the scrollbar. Changing the selectbox above the table causes the table to redraw and fixes this issue.
The table vibrates erratically. Both the container DIV and the table are shifting back and forth by 1 or 2 pixels. They appear to be stuck in a feedback loop.
I am using Chrome 87.0.4280.141 (Official Build) (64-bit)
Example here:
https://beta.tspcenter.com/tabulator.php
Tabulator code:
table = new Tabulator("#leaderboardTablesContainer", {
height: "311px",
layout:"fitColumns",
index:"Username",
data: results,
columns:headers,
initialSort:[{column:firstVisibleColumn, dir:"desc"}]
});
Select element code:
select.addEventListener('change',function(e) {
table.clearFilter();
table.hideColumn(table.currentColumnVisible);
table.showColumn(e.target.value);
table.setSort(e.target.value,"desc");
table.currentColumnVisible = e.target.value;
table.setFilter(e.target.value, "!=", "");
table.redraw();
});
I'm not sure why this works. But specifying a width on the flex-element fixed the problem.
flex: 2000 1 450px; width: 5px;
It seems to go against my understanding of flexbox. And indeed, the flexbox grows well past the 5px anyway. It seems kind of hacky but it stops the feedback loop problem and the table displays correctly.
i'm trying to find a solution for the following. When I drag a link between elements the label text inside the elements get selected for some reason.
Lets say I have an element A with the property A.attr("body/magnet", "active"); set and A.attr("label/text", "some text"); When I create a link from that element by clicking and dragging the label text gets selected on elements the link goes through.
This seems a little bit random though as sometimes all the labels in the graph gets selected when dragging the link.
Is there a way to make the label text not to be selectable?
We solved it by adding the following label style to the shapes.
let element = new joint.shapes.standard.Rectangle();
element.attr(
"label/style",
"-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"
);
From the answer above the links will still be selected, so you can put css on you #paper is or canvas like so
#paper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I have a check box group with multiple items that may contain a space. It is a horizontal check box. What is happening is the items are wrapping where there is a space in the item.
How could I get them to not wrap?
Also how do I control the width? I tried setting the width of the control and even placed it in a panel with the width set but nothing seems to work.
Try something like this in your stylesheet for the application:
.xspCheckBox { width: 500px; /* change to your preferred width */ }
.xspCheckBox td { white-space: nowrap; }
I have some CSS I am applying to a view header and view column.
Here is a sample
.viewHeaderName {
width:235px;
background-color:rgb(192,192,192);
color:rgb(0,0,0);
font-family:Trebuchet MS,sans-serif;
font-size:10t;
font-weight:bold;
text-align:left;
}
.viewColumnName {
font-family:Trebuchet MS,sans-serif;
font-size:9pt;
}
Basically I am trying to set the width of the column to what I want. I don't want the text in the header or in the column to wrap. This works perfectly for categorized views for all the columns.
But for simple sorted views, the header is being offset to the right from the text in the column several characters.
If I remove the width parameter in the CSS then everything lines up fine but I don't get the width I want.
you can use td/th nowrap attribute described here
http://www.w3schools.com/tags/att_td_nowrap.asp
or
use white-space element in css described here
http://www.w3schools.com/cssref/pr_text_white-space.asp
white-space:nowrap;
I have just changed my version of Flot from 0.6 to 0.7, however, when I do this, the legend in my Flot graph changes style. Previously, I had used the "LabelClass" attribute to change the style but on reading the source for 0.7 I see that "labelClass" is no longer an option and I appear to be forced to use the "table" CSS definition that is used throughout the site that I'm working on. Because of this I can't change the site's CSS "table" definition.
Is there another good method for changing the definition of a legend or am I stuck?
Apologies in advance is this is just a newbie question
Kind Regards
It has changed names is all, the new class is legendLabel for the labels and legendColorBox for the color box.
You can see this in jquery.flot.js.
EDIT in response, it seems that the question is how do you style the whole table. Assume your flot placeholder is something like this:
<div id="foo" style="width:600px;height:300px"></div>
Then you can define CSS like this:
#foo > div.legend > table {
border: 2px red solid;
}
See it here in action: http://jsfiddle.net/ryleyb/YkDpG/1/
Another way to style the legend is to use the jQuery .css() (http://api.jquery.com/css/) method after the chart has been plotted.
For example:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css("border", "1px solid #888888");
$("#chartFoo div.legend table").css("background", "#ffffee");
or:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee" });