I know it is possible for labels to automatically break lines when in a panel.
Is there a way to have labels break lines when the text would be over a layouts width?
UPDATE
OK i tried it with "800px" width now instead of "100%" and now the labels are having line breaks. Whats the reason for this behaviour? And how can I workaround this then for a percentual sizing of layouts as this is important for my page?
It currently looks like in the image below, the text is just cut off.
Extracted Code showing the setup:
VerticalLayout labelLayout= new VerticalLayout();
labelLayout.setWidth("100%");
labelLayout.addComponent(usernameLabel);
labelLayout.addComponent(postLabel);
labelLayout.addComponent(ratioLabel);
labelLayout.addComponent(lowestRatedPost);
labelLayout.addComponent(highestRatedPost);
detailsLayer.addComponent(labelLayout);
wrappercontent.addComponent(detailsLayer);
wrapper.addComponent(wrappercontent);
I had exactly this problem, and managed to solve it using this CSS. Vaadin Labels have the CSS attribure white-space: nowrap which is what is stoping your text wrapping as you expect it to.
.v-label
{
white-space: normal;
}
Related
I have the Owl Carousel set up and it works great, but I have text over the image that doesn't resize in response to the viewport change. The images resizes, but the text remains the same.
How can I make the text (within p and div tags) to be responsive with the images?
I have the same problem...I found a free theme where text is responsive with this plugin but still I don't understand what is the code to fix it...hope this can help someone
here the link of the theme:
http://w3layouts.com/demos/umbrella/web/#
look at "testimonials" section
Regards
add this bottom: 30% !important; inside the CSS at the only screen and (max-width: 767px) section, for the owl caption label.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I'm using Primefaces V3.3.1 and want to reduce spaces inside p:tabView.
In this case, I have 2 nested p:tabView and p:dataTable. And real estate of screen is very expensive for us so I would like to reduce spaces shown red and blue. So,
question 1:How can I reduce spaces inside p:tabView (painted red)?
question 2:How can I reduce spaces around p:dataTable (painted blue)?
Thanks in advance.
First you should study something about css... What you call "space inside" is the padding css property, and what you call "space around" is the margin.
Anyway, to reduce the padding of tabs, add the following style to your css file:
.ui-tabs .ui-tabs-panel {
padding: 5px 5px;
}
This will reduce the panning of all your tab views. if you want this style to be applied to only some tabViews, then you should use the styleClass attribute of the tabView, and then replace the css rule with .youTabClass .ui-tabs .ui-tabs-panel
And as for the datatable.. the datatable itself does not have margin. but it seems that in your blurry screenshot there's a panel surrounding the table. the p:panel also has padding. To reduce padding of panel:
.ui-panel .ui-panel-content {
padding: 5px 5px;
}
And also this applies to all your panels, so you should use atyleClass to make this style specific to a panel.
Having some trouble with the CSS alignment of text generated with #font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.
If you inspect the text on this sample page, you can see what I mean.
Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?
Thanks!
For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.
However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.
You are using <h2> tag there.
for the h tags use the CSS style's margin and padding to remove those extra spaces.
<style>
h2 {
margin:0;
padding:0;
}
</style>