Here is the problem I am facing:
I have a component in react native called Header. Header has 3 properties - left suffix (for back button for example), right suffix (for additional actions, sometimes 1 button, sometimes 2 buttons, sometimes none) and title.
Layout rules are as follows:
Title should always be centered in a header no matter if Right or Left suffixes are present. If Right suffix is present but Left suffix is not, title should still be centered in the middle of the header.
Right and Left suffixes should always be visible if they are declared. Meaning if I have Right Suffix + Left Suffix + a very long title, title should shrink to make space for suffixes.
I have made snack to demonstrate my problem: https://snack.expo.io/#anjayka/header-challenge
As you can see most of the layout works fine - If I add right suffix, title stays in position, if I remove left suffix - its still in position. The problem comes after title is a very long text - it expands so much that it pushes out suffixes entirely.
Any help solving this puzzle is appreciated
Just wrap the tile in View with position: 'absolute' and center the tile Text in the middle, and give the header Text style a maxWidth prop
Related
I think I'm missing something obvious but I can't get a React Native ListView to render separators only between each row. It renders the separator after all rows even though the renderSeparator documentation says it should not render below the last row.
Below is a screenshot of two different list views I created with the same issue. You can see the code here: https://sketch.expo.io/rkQZg8hsx, though be careful if you use the Appetize simulator on Sketch because it scales the simulator so may not see the separator. It's better to test on a real device.
If provided, a renderable component to be rendered as the separator
below each row but not the last row if there is a section header
below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted.
You're not including section headers in the example code, which must explain why the separator is showing after the last row.
When I move my mouse to a row in tree view and stay here for a second, I want to see a floating window. (Like in developer mode.)
How Can I solve it? Any idea?
When you declare your field or fields that get rendered on a listview make sure you give to the __init__ method the help='My Floating Test' argument. That will cause a floating window to be shown when you hover on that field.
For example check:
addons/account/models/account.py
tag_ids = fields.Many2many('account.account.tag', 'account_account_account_tag', string='Tags', help="Optional tags you may want to assign for custom reporting")
The string on the help attribu will be shown on all the views that render this field upon hovering on it and pausing for 1 second.
If you want to modify the window that is shown, you can extend the
t-name="WidgetLabel.tooltip" template that is located in addons/web/static/src/xml/base_common.xml
I want to use a WKInterfaceButton for my watch app, that looks like the buttons in the watch settings:
with two main attributes:
It should contain a small image on the left
its title should be aligned to the left
I didn't found any possibility to align the title of a button to the left. I already tried to use a group instead (then it would work), but when I use a group I can't use the the shape of WKInterfaceButton.
Here's how I would do it...
Create a button
Make that button type a group
Within that button-group, place two groups inside it. The group on the left will contain the image. The group on the right will contain a label
So place an image in the left group, and a label in the right group.
Adjust the margins, length, heights of these groups until you get the desired look.
Give the button-group a length relative to container of "1" and a height of "size to fit content"
For the inner group that will contain the image, give it a length of relative to container of "0.2" (maybe)
For the inner group on the right that will contain the label, give it a length of relative to container of "0.8" (so that together the two groups make 1)
Give both groups a height of relative to container (1)
use WKInterfaceButton Content as Group and place image and label in it.
While i haven't tried this myself i think what you're looking for to match the watch settings is a table view. Define a table view in the interface controller of your story board and add your image and label to the row(s). There's an example of how to do this in the programming guide for apple kit.
I am using iText and am very new to it. There have been several situations where I think I could have figured out the problem with my code if I knew what I was doing - I use examples without knowing the workings behind the code, and even as I look at the source I can't figure out what the programmer was thinking.
What does setTextMatrix of contentByteArray in iText do? And how do I figure out the parameter values I need?
For example:
cb.setTextMatrix(1, 0);
The input parameters are x,y coordinates in points, unless CTM scaling was defined.
0,0 would be the bottom left of the template you are referencing.
The position is the 'baseline' of the text, rather than the top or the bottom.
Transcribed from this source:
https://sourceforge.net/p/itext/mailman/message/12855218/
first parameter sets left margin, second parameter sets bottom margin.
In my example I have a table where each row is a user for example. Columns could include their name, address, email address, etc. I now need to add a column for (hypothetical example) their cat's names. While most people will have no cats and some people will have 1- 2 cats there will be the occasional person with 20 cats that create one very long row in the table. This is giving me an issue in presentation and for filtering/searching for cat names. Is there a good solution to displaying this type of data?
Have the first 50 (or whatever) characters of the field displayed as normal then put the rest in a block with its visibility set to hidden through CSS. Include a link / button / icon that will allow the user to toggle the visibility so they can see the entire value.
Several options:
Set a maximum width for the cell and allow the data to wrap
Place the content inside a wrapper tag (such as a div) and set the div with a fixed width/height and style of overflow:hidden to ensure that a particularly long word doesn't force out the width of the cell.
Truncate the output text on the server side
For cases #2 and #3, set the Title attribute of the TD tag to contain the full non-truncated text. This will present itself as a tooltip when hovering over the cell.
I would mention other CSS-based solutions but they're very sparsely supported right now, so not worth mentioning.
You might want to try doing something like what SO does. Namely, once someone reaches a certain point in their Rep, it suffixes the number and appromixates it. Ex. 10k instead of 10,236.
That way the numbers don't get out of hand.