I have some jQuery UI buttons that look like this:
How can I add vertical spacing between the rows? Modifying the CSS properties margin-top and padding-top didn't work.
Here is the HTML that exemplifies a single button:
<div>
<input type="checkbox" class="tool_toggle" id="tool_#" checked /><label for="tool_#">... tool name...</label>
... more inputs ...
</div>
This HTML input tag is simply repeated 11 times. The buttons wrap around as they should in the div container.
You can do it by setting line-height to the element that contains the buttons.
You need to specify that the buttons are display:inline-block before you can add margin-top or padding-top. This is because inline elements can not have top or bottom margins or padding.
You didnt post enough code to tell for certain so this is a guess. Post your CSS or make a http://jsfiddle.net/ if you want a proper answer
Related
I have a question about Vaadin components. I've successfully added them to static web pages using their declarative APIs (HTML APIs). (See https://web-call.cc/ .) The HTML API for element (https://vaadin.com/components/vaadin-ordered-layout/html-examples) shows usage like this:
<vaadin-horizontal-layout>
<div>Item 1</div>
<div>Item 2</div>
</vaadin-horizontal-layout>
but I have to add the style display: flex; to make the layout horizontal. Why must I do that? (I got the idea from viewing the layout with Dev Tools in Chrome, which showed the horizontal layout with that style.) When I added that style rule for both the horizontal layout and the vertical layout, the vertical layout went horizontal, too! The documentation doesn't show that style being applied to the layouts; only to the items contained in those layouts. Am I missing something?
The reason the layouts were misbehaving is that I forgot these imports:
import '#vaadin/vaadin-ordered-layout/vaadin-vertical-layout.js'
import '#vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js'```
In TFS web interface, is it possible to force a Work Item Form layout to fill 100% height? For example:
Would it be possible in the WIT definition to make it so the tab fills the full height of the form when the form is expanded? There's an option for width to be 100%, but not sure if possible for height.
You need to use "Minimumsize" like following:
<Control FieldName="System.Description" Type="HtmlFieldControl" LabelPosition="Top" Dock="Fill" MinimumSize="(0,465)" />
And you could also use TFS Power Tools to edit the work item
definitions as you can preview the changes with it.
More details and screenshot please refer Eddie's answer here, the value of height as below should be 465.
Besides, there is a Maximize button in the right top corner
After click it, the tab will expand and fills both 100 height and width.
By default form elements (input) in jQuery Mobile span over the full width of the screen.
How can I make them fit to the size of their content ?
You can use data-inline="true" on buttons and selects to make them span to the width of their content.
I'm using rails and I have and then <%= select ...>. But there are three rows of this and the dropboxes start right after the label ends and the labels are all of different lengths so the dropboxes are not aligned. I'm not really sure what part of my code I need to change to set how they are aligned. CSS? I have some ideas (creating a table, making a class etc.) but they're not working so I was hoping someone could let me know what direction to go in.
Put a class onto your label tags, then in the css for that class you need to:
add a fixed width that is larger than the largest label
make sure the label has "display: inline-block" or "display: block"
because it needs to behave like a block-style (rather than a
span-style) object to force widths on most displays.
I've got jQuery UI draggable div (near 10000 px width) and I want to make such constraints so the left side of draggable div won't go ahead of left side of screen and right side of div won't go off right side. I tried to show it on the picture.
It seems that rectangular constraints won't fit this case and I'm lost in that
To be more clear, here is example: http://full-demo.megaplan.ru/vacation/diagram/
There you can't go futher jan 2013 and before july 2007
You could add a container between my_DIV and the draggable and set that container's width to $('html').width() to make it as wide as the screen; then position the container so that it's position matches the screen. The result would be a <div> that matches the inner rectangle on your diagram. Once that's in place you could use the normal containment option to keep the draggable on-screen.
For example:
<div class="draggable">
<div id="container">
<p class="ui-widget-header">Draggable</p>
</div>
</div>
Then size and position #container and use this:
$("#draggable").draggable({ containment: "#container" });
Demo: http://jsfiddle.net/ambiguous/SG9KS/