When I place an icon into b-nav-item-dropdown the vertical alignment of navigation bar gets broken:
<b-navbar-nav class="ml-auto">
<b-nav-item :to="{ name: 'sign-in'}">Sign in</b-nav-item>
<b-nav-item-dropdown toggle-class="text-warning" right>
<template v-slot:button-content>
<b-icon-info font-scale="2"></b-icon-info>
</template>
<b-dropdown-item :to="{ name: 'help'}">Help</b-dropdown-item>
</b-nav-item-dropdown>
How can I align them? Is there BootstrapVue native way? The nav components miss align-v attribute.
Instead of using font-scale (which increases the font size of the icon), use the scale prop, which uses a CSS transform to increase the icon size without changing the font size (as mentioned by #Hiws on Discord channel).
<template v-slot:button-content>
<b-icon-info scale="2"></b-icon-info>
</template>
Related
enter image description here
For example—
in this image when i hover on the button (click) on the left side, the tooltip is going out of the red bordered container.
same thing happens for the right side button.
i want to change the tooltip position dynamically so that it stays inside the container for both the cases.
p.s - new to stackoverflow. If anything is wrong please pardon.
thanks in advance.
<Tooltip
title=“aaa”
arrow
placement=“bottom”
>
<button> click </button>
</Tooltip>
this is code for the MUI tooltip.i tried to look for props that can help me with this but failed.
You can do this by accessing the PopperProps in the Tooltip component.
The documentation for this is a little buried, but Tooltip has access to all MUI Popper component properties, which contain the popperOptions. Within the API properties definitions for the Popper component, MUI refers you to popper.js docs. These docs will then tell you how you can apply PopperProps to get different behaviors. Check out popper.js.org for further info.
const boundingElement = useRef();
[...]
<div
ref={boundingElement}
>
<Tooltip
title="Tooltip Tooltip Tooltip Tooltip Tooltip"
PopperProps={{
popperOptions: {
modifiers: [
{
name: "preventOverflow",
options: {
boundary: boundingElement.current
}
}
]
}
}}
>
<div>Tooltip Hover Div</div>
</Tooltip>
</div>
I would like to fit child <material-expansionpanel> that is into a AngularDart component invoked into <material-tab> to reach parent´s width.
I used [flex] directive, but did not work. How could I to do this work?
See the picture. The <material-expansionpanel> does not expand to right side.
Code:
<!-- parent -->
<material-tab-panel>
<material-tab [flex] label="Formação do Preço">
<precomi-formacaopreco></precomi-formacaopreco>
</material-tab>
<!-- child <precomi-formacaopreco> -->
<div>
<material-expansionpanel name="Atividade Principal" flex [showSaveCancel]="false">
<material-radio-group flex>
<material-radio [checked]="true">Comércio</material-radio>
<material-radio>Indústria</material-radio>
<material-radio>Serviços</material-radio>
</material-radio-group>
</material-expansionpanel>
...
</div
I do not think [flex] does anything in particular here. If you don't constraint width then expansion panel should take whole horizontal space. If that doesn't happen you can try filing an issue to angular_components with runnable reproduction instructions.
I think the issue might be that your <div> the <material-expansionpanel> does not expand to the width of page. Can you try setting the width of the <div> to 100%?
I have a question here, i need to add some button to the TextView in my tree table header row, the color of Button should be changed according to the line items rows(child nodes) data.
How could that possible? please anyone help me on this.
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
I have created formatter function where i can write some code to create a button, but i am unable to add button to the TextView, and the color of the button should be changed as traffic lights.
For example if childrows have "X" or "" then Yellow,
if childrows have "X" or "X" then Green
if childrows have "" or "" then Red
Can anyone help me on this?
You cannot add a Button or any other control to a TextView. It does not support child controls.
In a formatter you should not modify the view. Its meant to just format a value. It should be idempotent.
The Button control does not support arbitrary colors. It has a style property that lets you change the button to red (reject), green (accept) or gray (default). colors depend on the theme.
Yout can put the TextView together with a Button into a HorizontalLayout. You can then bind the visible property of the Button to your model (and use a formatter if needed).
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:l="sap.ui.layout">
...
<l:HorizontalLayout>
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
<Button visible="{path:'zstrv_fun>WhatEver', formatter:'.zbuttonVisible'}" style="{path:'zstrv_fun>Bla', formatter:'.zbuttonStyle'}"/>
</l:HorizontalLayout>
...
</mvc:View>
Dependig on your data structure inside your model it might be possible to bind to the whole row object and use that in the formatter. Otherwise it could be necessary to process the model data after load to calculate additional properties on the header rows.
I need to remove the defualt pagination provided by ZK in one of zul page and add a vertical scroll bar instead. How to achieve this?
Perhaps you are refering to a listbox or a grid component, in that case you probably have something like this:
<listbox id="listbox" mold="paging" pageSize="10">
or
<grid id="grid" mold="paging" pageSize="10">
In both cases, the mold property is making that your component do a pagination, and the pageSize property stablish how many item will be show in every page...
If the component does not have the mold property, zk will put a scrollbar by default (but it can give you an unexpected visual behavior)
If you want to replace the pagination with a scrollbar you can put a css property into your component, like this:
<listbox id="listbox" style="overflow:auto">
You can see an example here
I am writing an opensocial gadget. My structure is something like this:
<div style="height:200px;overflow:auto;">
<div id="dComment">Comments are loaded here.</div>
</div>
I update the content of the "dComment" every second, and its content gets some scrolling.
In my gadget I have specified <Require feature="dynamic-height"/>
When I use gadgets.windows.adjustHeight() it calculates the height of the content regardless that I have made some part of it hidden through adjusting a height for my outer div. As a result I see a huge white space below my content !!!
I know that I can specify height for adjustHeight function. But then it means that on every update I have to calculate the height of the gadget myself, and I don't want to do it (if possible).
Can someone explain to me why it happens and how can I solve it ?
Instead of visibility:hidden use display:none