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.
Related
How do I align helper text with other items in a Flexbox , flex-direction horizontal?
Its currently using Box with MUI text fields and selects. The first item below is shifted upwards due to helper text. Align-items center currently does not fix problem.
Following question does not apply, since its not moving other elements, just not aligned. Adding ErrorText to material-ui Textfield moves other elements
Update: When I do align-items: stretch, everything looks good, but now the buttons filter at the right is kind of sunk below. Is there a clean way of fixing this, without adding a margin top for the right button?
Try applying
align-items: start;
To the Box
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.
When I press a button, my app displays a calendar (within a Dialog) that slides from the bottom of the screen:
I want the Calendar to occupy the whole width of the screen, but it shows some white padding on both sides and also on the top and bottom (It is white because the "Dialog" UIID has a white created image as background)
I have tried changing all the UIID related to Dialog: "Dialog", "DialogBody", "DialogTitle", etc. I set all margins and paddings to cero.
How can I get rid of that padding?
Try change both the DialogUIID and the UIID of the dialog. Also make sure your calendars margin values are set to zero. It could be that your calendar is too small. Try placing it in a table layout with 1 row and 1 column then in layout constraints set the width and height to 100%
Open up the Component Inspector tool and traverse the hierarchy. You will be able to see all the components and their UIID's within the hierarchy and you should be able to understand which one of those components contributes to the padding/margin.
I have a tabpanel with with maxTabWidth property set to 200. The problem is, when there are tabs with text beyond those 200px, then they start looking ugly. The worst thing is that such text overlaps close tool (small button which closes the tab). Probably, there is some property that can solve this style issue.
That shouldn't happen with the default styles and CSS; the text area in the tab has overflow: hidden set, so it truncates the text.
I would first look at what your CSS is doing that is preventing this.
Please, see picture bolow:
I cannot get rid of white paddings/margins in combobox popup. I have two custom containers in designer called DropdownItem and DropdownItemSelected, Fisheye renderer type for ComboBox renderer. As you may see in combobox selected item is displayed just fine. However, in I cannot get combobox popup displayed without white paddings. I have actually used PopupContentPane to add blue border around popup, I also have border set to empty, all margins/paddings set to 0 for following UIIDs: PopupItem, PopupFocus, DropdownItem and DropdownItemSelected. PopupContentPane has also all paddings/margins set to 0. Also see my contants:
I went through source code and cannot find any other useful UIID I can style in order to remove these white paddings. Can someone help me with this?
Update:
Might be helpful - see below how popup looks like when PopupContentPane border sickness is set to 2px:
Update 2:
Almost there. After setting listItemGapInt constant to 0 I managed to remove gaps between list items. See screenshot below.
I still cannot find out how to remove 2 pixel gap on the right and don't know where it's coming from. Would appreciate any thoughts/ideas.
Update 3:
I eventually found where two pixels are coming from.
com.codename1.ui.ComboBox class, lines 289-290
289 int listW = Math.max(getWidth() , l.getPreferredW());
290 listW = Math.min(listW + getUIManager().getLookAndFeel().getVerticalScrollWidth(),
parentForm.getContentPane().getWidth());
In my particular case, listW=630px and in line 290 listW is recalculated as Math.min(630 + 2, 768), where 2px is width of vertical scroll.
As far as can say, scroll bar should be a part ComboBox popup.
I managed to remove unwanted gaps. As I mentioned in 'update 2', listItemGapInt should be set to 0 in order to remove horizontal gaps.
Vertical gap was related to scroll bar however it was not clear that it's a vertical scroll bar that creates that gap. After I set paddings to 0 for Scroll UIID, vertical gap has gone.
In regard to update 3, this is a bug but not because it should be in the container. The list is scrollable so this should be a part of the list however the call should be to l.getSideGap() and not to getVerticalScrollWidth().
This will allow you to hide that by setting the scroll bars to visible false etc. We'll fix that for the next update.