Consider a container, which contains an icon as well as a label next to the icon. The container has a flex-Layout, which means its width is adjusted to the width of its content. I am only displaying the label if a boolean variable "showLabel" is set in my ts-component. This is simply done by adding *ngIf="showLabel" to the label inside my HTML file:
<div class="container">
<i class="material-icons">{{ iconName }}<i>
<label *ngIf="showLabel">{{ label }}</label>
</div>
I can toggle the "showLabel" variable upon clicking a button. In this case, the width of the container shrinks, since the label disappears. I would like to animate this process, while at the same time not specifying any hard coded width. Is there a way to achieve this?
Related
I have a form with a radio button group where on of the radio button's labels includes another (number) input.
It looks as follows at the moment, i. e. the radio button is not aligned with the rest of the label. I can't yet get my head around css-spacing, paddings, margins etc and am stuck figuring out which element should get what kind of class to center this. I would greatly appreciate any help.
Sandbox: https://codesandbox.io/s/keen-christian-s7u3c?file=/src/components/HelloWorld.vue
Code:
<b-form-group label="Radio Buttons with Inline Input">
<b-form-radio-group stacked v-model="radioValue">
<div>
<b-form-radio name="radio1" value="ONE"
>this is
<b-form-spinbutton
:disabled="radioValue === 'TWO'"
v-model="numberValue"
size="sm"
inline
></b-form-spinbutton>
not aligned
</b-form-radio>
</div>
<b-form-radio name="radio2" value="TWO"
>this is aligned</b-form-radio
>
</b-form-radio-group>
</b-form-group>
The b-form-spinbutton's height is expanding the height of its parent b-form-radio, which causes the text to be misaligned with the radio icon.
A quick workaround is to shrink the height of the spin button:
<b-form-spinbutton style="height:1.5em">
<template>
<div class="slds-size_1-of-3">
<lightning-carousel>
<lightning-carousel-image
src={companyLogoUrl}
header="Company logo"
description="Company logo uploaded to a static resource"
alternative-text="Company logo">
</lightning-carousel-image>
<lightning-carousel-image
src={product1Url}
header="Fantastic product 1"
description="Fantastic product image in a zip file"
alternative-text="Fantastic product 1">
</lightning-carousel-image>
<lightning-carousel-image
src={product2Url}
header="Fantastic product 2"
description="Fantastic product image in a zip file"
alternative-text="Fantastic product 2">
</lightning-carousel-image>
</lightning-carousel>
</div>
</template>
I created a carousel component and only width needs to increase.If i try to increase width using custom css or slds means the height also increasing and the component looking so big Any idea how to increase only width of the component.I tried slds-size_1-of-2 but it's height is also increasing
The lightning-carousel will occupy all the width that the container lets him occupy. Your container is using slds-size_1-of-3, which means the container itself, will occupy a third of the parent container space. For instance, if you place it in a section on app builder, it will occupy a third of the width.
On top of that, the lightning-carousel images maintain the aspect ratio of the image height/width proportions. You won't be able to just change the image width.
My suggestion is that you remove the slds-size_1-of-3 class, and if you want to modify the aspect ratio of your images edit them with an image edition program.
I use the primeng p-dropdown in my code and I noticed that if it doesn't reach a height X (for example 4 clicks in add), the values of the box disappear
if appendTo = "body" is added, the box remains fixed, which hinders the user's view, below I set up a cod on the stackblitz to simulate the conflict
https://stackblitz.com/edit/angular-hkxswt
your css has overflow-y: auto;. remove it and dropdown won't be hidden by this container
I have an Angular Material page with a few input containers.
Some of these containers are aligned side by side with a space distribution of 33 % and 66 %. I want only one label above these input fields.
<div layout="row">
<md-input-container flex="33">
<label>My Label</label>
<input type="text" ng-readonly="true" ng-model="text1"/>
</md-input-container>
<md-input-container flex="66">
<label></label>
<input type="text" ng-readonly="true" ng-model="text2"/>
</md-input-container>
</div>
I placed my label above the first input container and over the second container an empty label.
And this is exactly where my problem is located, because on smaller screens the label gets truncated. This is completely comprehensible, but in my case I don't want this behavior of Angular Material. How do I achiev this? Here is a demonstration of my problem. On a smaller screen the label gets cut of.
tl;dr
I want two input containers with only one label. The label should be visible all the time, also on small screens, but it gets truncated.
Thanks for any help.
It was too simple!
All I had to do was preventing the overflow: hidden; attribute, which is set by default from angular material.
The default truncation looked like this:
After changing the style sheet to overflow: visible !important; the result is exactly what i wanted:
I made an update on the plunker example given above. Here is the new version.
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.