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.
Related
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
I have 2 buttons. say for example a "Browse" button and a "Start Data Backup" Button. I have applied a common style to these buttons. find the buttons below.
As you can see, the content of the browse button aligned properly to the center. But the another one doesn't have any borders. it occupied the button completely. I know it is due to the length of the text and we can fix it by setting the width of the button, but unfortunately i cannot set my button width .because i need my button should give same look with different screen resolution.
What i need now is, the content should be aligned as like in browse button regardless of content length. How to achieve this?
If you have limitation on changing the width of Button for different screen resolutions, instead of changing the width of button try overwriting the font size of the content in button. Also make use of content wrapping to get extra text in new line.
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.
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.
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.