I am using vaadin in combination with navigator7 addon. In header and footer there are spacings between conponents That i would not have. I tried to remove the spacings using setSpacing(false) for header and footer
component but it is not working probably becouse of the addon.
So i tried to solve this using css. The sample below i a test output html that vaadin generates:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}
</style>
</head>
<body>
<div class="my-footer">
<div>
<div style="color: red; height: 20px; width: 482px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px; background-color:yellow;">
<div style="float: left; margin-left: 0px;">
<button class="footer-label" style="width: 400px;">Text</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
There is a button inside div div. I would like to make the width of root div to have exact same width as the button.
I ended with this css code but it does not work. The root div stays in its 482 pixels width.
div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}
Is it possible to do something like that in css and how to do it? Or how to solve this using problem using Vaadin?
Vaadin Code
public class MyAppLevelWindow extends HeaderFooterFixedAppLevelWindow {
@Override
protected
Component createHeader() {
...
}
@Override
protected
Component createFooter() {
HorizontalLayout myFooter = new HorizontalLayout();
akmedFooter.setSpacing(false);
akmedFooter.setStyleName("my-footer");
NativeButton sendProblemButton = new NativeButton("Button");
sendProblemButton.setStyleName("footer-label");
akmedFooter.addComponent(sendProblemButton);
.....
return akmedFooter;
}
.............
}
Answer
.my-footer div div{ width: auto !important; }
