In smartgwt, it is fairly easy to manipulate the border of the header or the content of a SectionStackSection, since they render seperate html elements.
However, is it also possible to set a border on the entire SectionStackSection as well? There is no surrounding div, and the section does nog have a setBorder() method.
Any ideas?
TIA
You can use setAttribute(String property,String value) method to acheive this.
SectionStackSection section1 = new SectionStackSection("Blue Pawn");
section1.setExpanded(true);
section1.addItem(new Img("pieces/48/pawn_blue.png", 48, 48));
section1.setAttribute("border", "1px solid red");
sectionStack.addSection(section1);
Related
This question is about understanding why it is implemented that way.
When looking at the HTML of e.g. HorizontalLayout, VerticalLayout, one can see they have a Shadow DOM inside which there is only a <slot>-Element containing the content.
As far as I understand, the purpose of Shadow DOMs is to limit the scope of the styling to the individual component, and <slot> offers the possibility to include components which have the global styling. So the Shadow DOM inside <vaadin-horizontal-layout> looks like it does nothing, as the local styles do not apply to the <slot>-content.
Assuming this is the most elegant solution, then what was the problem? What is the purpose of this construction? Is it using properties of the Shadow DOM that I am not aware of?
The shadow dom of the Vertical/Horizontal Layout contains the style of the layout (padding, margin, spacing, direction, ...).
This is the internal behavior of the component.
You can add the children in the slot of the component, so you can style them with global styling.
I am toggling the header visibility and when I hide it, I need it to be transparent and show the scrolling content.
I tried several ways but the header is not transparent. Please note it's hidden correctly but it left a white background instead. So I wanted to make it transparent:
$('.ui-header').hide().animate({opacity: 0.0});// Hide the header but its opacity doesn't get to 0
$(".ui-header").css("backgroundColor", "transparent");// No effect
How to make the header transparent so it will show the content underneath?
$(".ui-header").hide();
Should be sufficient. Hiding the element means not showing it, which is equivalent to setting the opacity of the element to zero.
When reading the documentation for the jQuery function .hide(), it clearly states that .hide() without any parameters is the equivalent to display: none; in CSS.
If you can't find the error with JS, I suggest giving display: none; to the ui-header class in CSS. If neither works we need more code to track down the error and give you a proper answer.
Edit: A JSFiddle demo available here.
I am creating label and one button in vaadinn
And when i put these componants on Css Layout the content are comming like
label
button
but i want this is in
-label -buttom
does any one know the solution what css should be applied for that?
best Regards
Arvind
There is two solutions for your problem. You can add StyleName to your CssLayout like this :
myCssLayout.setStyleName("my-layout");
and then add this to your css file:
.my-layout .v-label{
float:left;
}
Or, and this is the right way to resolve your problem, you can use HorizontalLayout instead of CssLayout. It will allow you to put your components in one line.
HorizontalLayout layout = new HorizontalLayout();
layout.addComponent(mybutton);
layout.addcomponent(mylabel);
for the components like you have label and button
label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
then you also have to make this css changes for that component
u-component-label{
display:inline-block;
}
I'm using jQuery UI Draggable to drag a <div> whose width is calculated as part of the layout (margin:auto;).
When dragging that element using helper:clone, the clone also gets the margin:auto; style, but is no longer constrained by the original's container.
Result: The cloned <div> may have a different width than the original.
Fiddle: http://jsfiddle.net/ericjohannsen/ajpVS/1/
How can I cause the clone to retain the original's width?
Jon's answer is really good, but it doesn't work properly when you have child elements in the draggable. When that's the case, the event.target can represent your draggable's children, and you'd want to modify the draggable's helper() method something like:
$(".objectDrag").draggable({
helper: function(e) {
var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
return original.clone().css({
width: original.width() // or outerWidth*
});
},
...
});
Without this, the helper would represent any child element clicked within the draggable (click the within the light blue region in the "Drag 1" box for example). Adding the additional logic above ensures that the draggable element is used for the helper. Hope that helps for anyone in a similar situation!
* Note: You'll want to use outerWidth if the original element has box-sizing: border-box applied (thanks to #jave.web for raising).
You just need to set the width and the margin on the cloned element based on the draggable object when it is dropped, using $(ui.draggable).clone().css({ ... });
Here's an updated fiddle for you, should be what you're looking for. It will also keep the width for the helper object as well. http://jsfiddle.net/ajpVS/2/
I think I know what the problem is.. where you have:
<div style="width:50px">
it also needs to be included in the objectDrag class:
<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
I hope thats what you meant!
EDIT:
Hi took another quick look
http://jsfiddle.net/He2KZ/1/
I used the width:inherit property to inherit the parents width no matter what size it is. Also I noticed removing the border fixed the problem. the dragable clone is 2px out and you have a border of 1px. This is kinda buggy from Jquery-ui IMO they should account for borders at least.
If you really want borders try using "outline" instead of "border". This does not add to the width of the div.
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.