I'm having a problem. My customer want one of their website to show in GG chrome instead of IE (they usually use IE before). One of recently problem is that the inputText in GG Chrome have no border, but they have border in IE. So my customer want to make border visible in GG Chrome. How can I do that?
you can manipulate style of af:inputText box by adding css code to contentStyle property under style tab in component properties.
<af:inputText label="Label 1" id="it1" contentStyle="border: 10px solid black;"/>
Related
I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
I'm using PrimeNG color picker overlay inside a dialog.
<p-colorPicker [(ngModel)]="activity.color" name="color" appendTo="body"></p-colorPicker>
The problem is that picker is not showing and expands the dialog body adding the scrollbars. I want the colorpicker to overlay over the dialog.
Setting appendTo="body" works for calendar widget, but not color picker. Based on docs I experimented with various options like e.g. specifying template variable in dialog <p-dialog #activityDialog ... and referencing it in appendTo of colorpicker, but this is not working.
Update:
<p-dialog [contentStyle]="{'overflow':'visible'}">
</p-dialog>
this does it all and is documented already: here
I got it to work by setting:
:host /deep/.ui-dialog .ui-dialog-content {
overflow: visible;
}
in the css of the component containing the dialog.
Though :host /deep/ is deprecated by Angular
I just started building my first App with Codename One and I'm having quite some trouble. :-)
I cant change the background color of a TextField, I changed everything in the Theme and named it "TextField". At the Color tab I changed the background color and set Transparency to 255. Since the Component is named TextField, shouldnt the style be applied automatically when I make a new TextField?
I also tried to set the UIID manually to "TextField", which didn't help either.
Am I missing something?
Kind regards,
Max
The way backgrounds work in Codename One is this:
Border is applied first
Then image
Then gradient
Then color
TextField and other components such as Button etc. often have a default border derived from the theme.
Switch to the Border tab, click derive then click the ... button and select empty.
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >
I defined a fieldset while setting blank title. however, in browser, the fieldset has a expand/collapse icon in right-top corner, while i want have it in left-top corner? what I am supposed to do?
thanks!
You can get it on the left corner like any normal fieldset with a title with some trick. You can get what you need by using unicode for "Narrow No-Break Space". The unicode is U+202F. So in your code, you will have to set your title as:
title: '\u202F',
keep in mind that you cannot completely box the fieldset with this trick. Here is a small gap in the fieldset border on the right side of the collapse button. You could also use other unicode characters like \u200B,\u200C etc. But they all provided me with the same result.
You can get a more better result by removing the CSS style right-margin: 3px applied to the legned of fieldset. I haven't tried to do that though.