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; }
Related
I wanted to set the height[say 32px] of mat-expansion-panel-header which I was able to. However, while expanding the panel, the height goes to material's default height [I guess 64px] and then sets it to my custom height[32px]. This resulted in a flickering-effect. You may check the behavior at https://angular-v138d6.stackblitz.io
Pl advise if there is a way to override the mat-expansion-panel-header height while the panel is 'being expanded'
If you read the documentation of Angular Expansion Panel Header there are two properties collapsedHeight & expandedHeight. You can use these to set the height.
<mat-expansion-panel-header collapsedHeight="56px" expandedHeight="56px">
<mat-panel-title>Personal data</mat-panel-title>
</mat-expansion-panel-header>
use
.mat-expansion-panel-header.mat-expanded {
height: 4rem
}
If required you can also use
/ngdeep/.mat-expansion-panel-header.mat-expanded {
height: 4rem
}
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;
}
According to the react-virtualized docs, "The AutoSizer component decorates a React element and automatically manages width and height properties so that decorated element fills the available space".
The suggestion is usually to add height: 100%; or flex: 1; to all parent elements in the DOM to render the table's full height.
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
Say our table has many rows of varying height and exceeds 100vh when rendered. Autosizer will return a height in pixels that equals 100vh, as a maximum, meaning the last rows in our table will be cutoff as AutoSizer will not stretch its parents height to render all rows.
My current workaround is to use <CellMeasurer /> and CellMeasurerCache() to manually determine table height from this.cache; // (component instance of CellMeasurerCache) using private properties, for example in my table component:
componentDidUpdate = () => {
const { tableHeight } = this.state;
const tableRowHeights = Object.values(this.cache._rowHeightCache);
const newRowsHeight = tableRowHeights.reduce(
(height, nextRowHeight) => height + nextRowHeight,
0
);
if (tableHeight !== newRowsHeight) {
this.setState({ tableHeight: newRowsHeight });
}
}
Is there no way to accomplish this with react-virtualized components and APIs,without accessing private properties from the CellMeasurerCache() instance?
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
I don't think this (overflow behavior) make sense in the case of react-virtualized. In most cases- unless you're using WindowScroller for a Facebook/Twitter like layout- react-virtualized components should manage their own scrolling.
So in that case, if 100vh height is available, you would want RV to fill exactly that amount and- if there's more content than will fit into that area- (which is likely, if you're using RV in the first place)- it will setup the scrolling styles within itself.
On the other hand, if you tell a react-virtualized component that its height is numRows * rowHeight then it's going to render everything, and completely defeat the purpose of windowing. :)
I have a layout where I need to control the line height between wrapped non block level elements:
<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>
What I want to achieve is something like:
I don't want to rely on absolute positioning as there will be elements beneath which need to clear this and simply setting a low line-height on he paragraph results in an object which breaks out of its box, see the Fiddle below:
http://jsfiddle.net/mdHKy/2/
Any ideas?
You can first give the p a height then set its line-height to half that amount (being 2 lines).
p.payments {
line-height: 1em;
height:2em;
}
Then set the line-height of small to 1em and give that a vertical-align:
p.payments small {
line-height:1em;
vertical-align:top;
}
Then set the vertical-align of your .light:
p.payments small.light {
vertical-align:baseline;
}
JSFiddle example.
I am trying to figure out how "heights" are worked out when instancing a widget.
I am not going very far...
At the moment, I have a simple HTML page that goes like this:
</head>
<body class="claro"><div id="appContainer"></div></body>
</html>
The CSS is like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#appContainer {
height: 100%;
}
When my app starts, this happens (this is a simplification):
// Create the "application" object, and places them in the right spot.
appContainer = new BorderContainer( {} , 'appContainer');
Left as it is, the app has the right size and everything.
** Q1: why do I need to specify the height for html, body and #appContainer?
Then, I have:
// Create the new BookingDojo application
bookingDojo = new BookingDojo( { id: 'bookingDojo', region: 'center' } );
appContainer.addChild( bookingDojo );
and finally:
appContainer.startup();
BookingDojo has this CSS:
#bookingDojo {
height: 100%;
}
.bookingDojo {
height: 100%;
}
And uses this template:
templateString: '' +
'<div>' +
' <div class="bookingDojo" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: \'headline\'">' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: \'center\', tabPosition: \'left-h\'">' +
' <div data-dojo-type="hotplate.bd.Settings" data-dojo-props="title: \'Settings\'">Settings</div>' +
' <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title: \'attempt\', tabPosition: \'top\'" data-dojo-attach-point="settingsTab">' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'One\'">ONE</div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'Two\'">TWO</div>' +
' </div>' +
' <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Two\'">Section Two</div>' +
' <div data-dojo-type="hotplate.bd.Dashboard" data-dojo-props="title: \'Dashboard\'">Section One</div>' +
' </div>'+
' </div>' +
'</div>',
Note that
class="bookingDojo"
within the widget:
** Q2: If I take out wither #bookingDojo or .bookingDojo from the CSS, the app isn't rendered properly.
I mean, I also have a problem where I cannot get the Dashboard to render properly, because it comes out with height 0, but that's a different (probably related) story for which I have added a different post.
** Q3: Can somebody please explain to me the whole "heights of widgets" issue? I am aware that widgets need startup(), and I am aware that if you create an inner-widget and it's invisible, it will need a resize(). But that's obviously not all I need to know, since I find myself struggling over and over to get a widget to appear (and I go trying CSS, doLayout, resize, etc.) so... well, I must be missing something!
Thanks a million,
Merc.
For Q1, the documentation says :
The outer size must be specified on the BorderContainer node. Width must be specified for the sides and height for the top and bottom, respectively. No dimensions should be specified on the center; it will fill the remaining space.
In your CSS, you are setting the appContainer to take the full screen, because a height of 100% means 100% of the parent element... and your structure is
<html><body><div id="appContainer">...etc
Therefore, you have to set both body and html to 100% if you want your appContainer to take 100% of the screen height...
By default, block elements are already 100% wide, so no need to set the width there...
For Q2, I suggest you have a look at your html in firebug. You will notice a div with id="bookingDojo", which will be the outmost div of your template. The first inner div has a class="bookingDojo". Again, these 2 divs are nested, and for that reason, they both need to be set to a height of 100% if you want them to fill-in the full height of their parent container div (which is your BorderContainer, which you already set to be 100% high). I made a little example here http://jsfiddle.net/psoares/7JQWC/
You will see something like your bookingDojo where I set #bookingDojo to 100% height, but didn't specify a height for the .bookingDojo class. Try to set it and you will see the red border expand...
For Q3, well, I think the whole issue here is understanding how nested boxes get their sizes, so for that you can refer to Q1 and Q2...
I hope this helps...