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
}
Related
In my Vaadin code I want to add min-width feature to my sub-window.
I set width of my subwindow size %25 of my mainwindow, but I don't want it to be very small.I want it at least "125px". How can i set this with java code?
public class Awindow extends Window{
...
public Awindow(...)
setModal(true);
setCaption("Hello");
this.setHeight("100%");
this.setWidth("25%");// I don't want it to be %25 all the time,I want it to remain still after "150px".
VerticalLayout layout = new VerticalLayout (
memberTable,
new HorizontalTable(
createButton,
eraseButton)
);
layout.setSpacing(true);
...
this.setContent(layout);
The only possible solution i know is to make it with css.
You can add a css for the .v-window class eg:
.v-window {
min-width: 125px !important;
}
If you want fully programically
1) add your css style to page style with programmically
UI.getCurrent().getPage().getStyles().add(".min125px{min-width: 125px !important;}");
2) add this style (min125px) to your buttons
createButton.addStyleName("min125px");
eraseButton.addStyleName("min125px");
As long as https://github.com/vaadin/framework/issues/1360 is not implemented by Vaadin, you might want to check out the following add-on: https://vaadin.com/directory#!addon/restrain. This does essentially the same as proposed by the other answers, but has a nice server side api.
E.g.:
new Restrain(component).setMinWidth("125px");
I'm trying to write a topbar for my application that should contain mainly the app logo (a small image) and the app title (just text). Moreover, I'd like this topbar to automatically resize according to the window's height.
I'm new to QML, but I suppose that I should wrap these components inside a Row or a RowLayout component. This is my sample code:
import QtQuick 2.0
import QtQuick.Layouts 1.0
Rectangle
{
id: mainwindow
width: 1024
height: 600
Row
{
id: rowlayout
height: logoimage.height
spacing: 5
property int count: 3
anchors
{
left: parent.left
right: parent.right
top: parent.top
}
Image
{
id: logoimage
source: "qrc:/images/resources/images/icon.png"
height: mainwindow.height / 20
anchors.top: parent.top
anchors.left: parent.left
}
Text
{
id: logotext
text: qsTr("This is my logo text")
font.pixelSize: parent.height
font.family: "Sans Serif"
height: parent.height
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.left: logoimage.right
}
/*
Rectangle
{
id: otherrect
height: parent.height
color: "lightgreen"
anchors.top: parent.top
anchors.left: logotext.right
anchors.right: parent.right
}
*/
}
}
I tell to the Row component that its height should follow the logo's height, and to the Image (logo) component that its height should be 1/20th of the Rectangle (mainwindow) component.
Using a Row container, the code behaves as expected but I get an annoying warning (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) and I have to do a lot of anchoring. Conversely, if I use a RowLayout container, I can remove most of the anchors but the Image completely ignores its height attribute (but the text still resizes correctly). So the questions are:
is this a bug of the RowLayout component? I'm using Qt-5.1.0-Beta with Android support, so this could be an explanation
how can I use a Row component without using anchors in its children and thus avoid the warning?
I'm missing something important or I'm almost on the right track but I have to bear with this beta of Qt until a stable version is released?
You said that you get the expected behavior with Row, so you should probably use it. The warning that Row is giving is asking you to remove the vertical anchors (top and bottom) from its child elements.
The Row element provides horizontal (left and right) anchor-like behavior for its child elements, but it doesn't mind if you use top and bottom anchors (notice that top and bottom were not in the warning).
In other words remove "anchors.left" and/or "anchors.right" lines from "logoimage", "logotext", and "otherrect" (if you plan on uncommenting it at some point), but not the "anchors.top" lines, and that should stop the warning and keep the correct behavior.
An alternative is to just remove the Row element and use Item or FocusScope (if you plan on having input elements in your "top bar" area), which will not try to take over anchoring operations, and that may be a better fit for you if you really like anchors.
You need to give a width to your layout if you want it to strecht its children, either with width: parent.width, or better, with anchors { left: parent.left; right: parent.right } and no anchors on vertical lines inside childrens of the layout.
1) NO, it is no a bug of RowLayout
2) Consider that RowLayout is preferred to Row because is most expressive for components placing. The Row component is better that Rowlayout only for graphics or animation apps
3) The stable version is now available, but your errors are not bugs ;)
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'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});
Please note: This question relates to the Appcelerator Titanium platform, not the stock iOS SDK.
I'm making a tag cloud with a layout: horizontal view. I'm most of the way there, but I can't get the final Titanium.UI.Label on a line to wrap if it doesn't fit. Instead, it gets ellipsized (in a useless manner).
Is there a way I can prevent this on iOS? Seems to work fine on Android.
If you try to set the label width to auto, Titanium will calculate the label width in runtime.
It make sense to get a ellipsized label in horizontal view.
You may need to determine the dynamic label width in your tag cloud case. But just leave it to titanium, you just need to change the dynamic width to static width with this tricky code.
for (var i = 0; i < data.length; i++) {
var label = Ti.UI.createLabel({ text: data[i], width: 'auto', height: 20,left: 5, top: 5});
label.width = label.width + 5; //this determine width in runtime assign back to static width
view.add(label);
}
The iPhone's answer to this is minimumFontSize but that makes no sense in a tag cloud... Have you considered adding this to a horizontal scrollview and setting the contentWidth to auto?
Also does each of your label have it's width set to 'auto'? I imagine setting that would cause the word to overflow the layout and be pushed down to the next line.