I want to set up a component with a coloured background rectangle and a text, that is ready to be resized in width and also automatically resizes its height based on the length of the text.
For now I can only resize the height of the component manually, but would prefer if the component can do this automatically, like HTML does.
I added a constraints top, left&right to the text layer. And constraints top&bottom and left/right to the background layer.
Have a look at the component, the current and expected instance.
Does anyone have a helping hand on this?
Press F then click/drag to create your colored background rectangle.
Press T to create your text layer inside the frame and add constraints to it as follows: top & bottom and left & right.
Select Auto Height in the right-side panel under Text.
See detail.
Readjust the width of the text layer to your preferred size and center it inside the frame.
Select the frame layer (parent) which should contain the text layer inside of it (child).
Press Shift A to transform the selected frame into Auto Layout. Notice the icon changed.
Now, to resize, select the text layer and drag ‘n’ drop.
See result.
Related
I'm trying to figure out which piece of CSS is making the text shrink by a very tiny but noticeable amount in the cells when you select one of them
Here's a code sandbox. Just click on one of the cells to focus it and you'll see what I mean:-
https://codesandbox.io/s/material-ui-table-virtualized-t2xkt
NOTE: when you select a cell, it replaces the plain div with a customised Material UI TextField
Which CSS property do I need to adjust to ensure that the text size and position stays uniform when the cell is focused or not focused?
You were right it was the padding. Solved it by remove a pixel from the padding-top in the div within the table cell when not focused
I am trying to use the default templates available with CKEDITOR.So I choose the one where an image and text can be placed side by side i.e. the image is occupying a certain part of the editor and the text the remaining part(but on the same horizontal level.I hope you get my point).But when I paste an image into the image area(provided in the template) , the text automatically shifts itself towards the bottom of the image(i.e. now image and text are not on the same level anymore). This happens no matter whether the size of the area provided for the image is bigger or smaller than the image.
Can any one say why this is happening and how to solve it.
You can change the Image Alignment To get the text in the same horizontal level
Image Properties -> Image Info -> Alignment -> Left | Right
iOS can use layer.cornerRadius to make a round UIButton.
Does WKInterfaceButton have this property?
If not, how can I make a round WKInterfaceButton in WatchKit.
If you put an image inside a group, you can then set the radius of the group. This crops the image into a circle. In the picture below, I have:
Group (radius 56)
Group (radius 52)
Image (a square image)
While this example is with an image, you can use the same technique for a button. Previously the dog was clickable as a button so this is doable.
WKInterfaceButton does not have a corner radius property. You can make a circular button by setting a circular image as the button's background image. You can generate the image in code doing something like this: Draw a simple circle uiimage
You don't need an image to make WKInterfaceButton rounded. Instead:
Go to Attributes inspector for the button, and select content type: Group
Inside the button find the group and set its corner radius to whatever you need.
Scroll down the inspector and set both fixed Width and Height to the value equal to the radius doubled. Here you go
You can put whatever you want inside the button, for example a text label. This way you also can make oval buttons.
The small size creates an image too large to fit in the box. Is there a way by which the image can be wrapped completely?
I am doing
<div class="catimgback">
<img src="#arguments.item.getImageURL(size='arguments.size',width=arguments.width,height=arguments.height)#" alt="#htmlEditFormat(arguments.item.getValue('title'))#" class="catimg" />
</div>
Where arguments.width = 163px; arguments.height=163px; and arguments.size = small
If i make catimgback's style=height:100% then all goes well. Also, I played with keeping the size to be custom and giving custom width and height but could not get the images to work. all the small size images gets cut off.
I think you may be confused as to how getImageURL() works. The only time you need to pass in the height or width arguments, is if you pass in size='custom' or omit the size attribute altogether.
Also, when you use size='custom', the image gets cropped automatically based on the dimensions of the image that's been uploaded. So, in your case, you want a square image ... but what if the image that's been uploaded is not exactly square, maybe it's a rectangle. So, in that case, Mura starts at the very center of the image, then scales out from there to the outer most boundaries. If the image were a vertical rectangle, you can imagine then that the top and bottom parts of the rectangle won't make the cut. Conversely, if the image were a horizontal rectangle, then the left and right edges of the image won't make it into the cut.
What you really want in this case is a pre-defined image size called catimg with a height and width attribute of 163px. To create this:
Go to Site Config > Edit Site from the Admin area
Click the Images tab
Towards the bottom, click Add Custom Image Size
Enter a Name (for example, catimg)
Enter the Height
Enter the Width
Click Save (You now have a custom image size that can be used for any content items)
Go to the Site Manager, and add/edit a content item
If editing an existing content item that already has an image, click the crop marks to get to the Image Details screen. Otherwise, select an image to upload, and Publish.
From the Image Details screen, scroll down to the custom image size you've created, and you can now Re-Crop your image to select your desired image region.
Now, anytime you call getImageURL(size='catimg'), Mura will use this specific image to display.
Cheers!
Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:
<h3>could not start.</h3>
<hr>
<p>These preferences must all be set before I can start</p>
I have no custom CSS. What appears on the screen is this:
You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.
I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.
I can't be the first person who's tried to put more than a single line into a DialogBox...
What's the trick to making the borders "repeat" and fill in the holes?
Wrap the HTML in HTMLPanel befor passing it to the DialogBox
DialogBox dialog = new DialogBox();
HTMLPanel panel = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
dialog.add(panel);
dialog.center();
Thanks to #Moh for placing me on the right path.
The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.
DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));
Adding buttons is left as an exercise for the reader...
GWT Dialoge box already have pre defined CSS.
you have to override or have to set your own style names using set Methods.
like..
dialogBox.setStyleName("yourcss");
Default css names starts with,
.gwt-DialogBox{}