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.
Related
I have code like this:
<v-text-field label="Outlined" outlined />
After I focus this input text is going top left corner of input as expected but it's actually hovering the line:
What might be the reason?
I was trying to debug it and I find this very weird to me. Basically the label element has binded style left: 0 and position absolute ofcourse, then the outer dic which is .v-text-field-slot has position relative but the label is not actually starting at 0px from the left
It doesn't have any padding or something either:
So basically I have no clue why it doesn't stick to left side of the outer relative positioned div.
Actually thanks to Firefox I found out where the issue lays:
Because of the transform scale to 0.75 it's not at the very left of outer div. I'm now trying to find out the fix and I'm wondering why Vuetify didn't handle that.
I acutally found solution by modifing .v-label--active class:
.v-label--active {
transform: translateY(-28px) scale(1) !important;
font-size: 12px !important;
padding-right: 8px;
background-color: white;
}
but it's more like hack than real solution. Also if I will have this on some other background then white, it will look bad. So basically I'm still looking for solution but for now I'll move on with above css.
Edit: The real solution was that I was missing <v-app></v-app> wraping my entire app.
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;
}
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/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Why do most developers consider the W3C box model to be better than the box model used by Internet Explorer?
It's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box model counterintuitive. For example, if margins, padding, and border were factored into the width, I could assign width values to all my columns without worrying about the number of columns, and any changes I make to their padding and margins.
With W3C's box model I have to worry about the number of columns I have, and develop something akin to a mathematical formula to calculate the correct width values when modifying margins and padding. Changing their values would be difficult, especially for complex layouts. Consider this small frame-work I wrote:
#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width: 900px;
}
#content .column {
float: left;
margin:0 20px 20px 20px;
}
#content .first {
margin-left: 0;
}
#content .last {
margin-right: 0;
}
.width_1-4 {
width: 195px;
}
.width_1-3 {
width: 273px;
}
.width_1-2 {
width: 430px;
}
.width_3-4 {
width: 645px;
}
.width_1-1 {
width: 900px;
}
The values I assigned here will falter unless there are three columns, and thus margins at 0+20+20+20+20+0. It would be difficult to modify padding and margins; my entire widths would have to be recalculated. If column width incorporated padding and margins, all I would need to do is change the width and I have my layout. I'm less criticizing the box model and more hoping to understand why it's considered better as I'm finding it difficult to work with.
Am I doing this thing wrong? It just seems counterintuitive to use W3C's box model.
One word answer - -box-sizing
You choose how you want your box model to work.
Not everyone considers it to be better. To extract a quote from Quirksmode.
Personally I find W3C's box model counter-intuitive. To quote myself:
Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.
Web designers who create boxes for holding content care about the visible width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.
I agree, the border-box model makes more sense (at least, it does to me). There were disputes over the original W3C box model, leading to the definition of the box-sizing property in CSS3.
Personally, I prefer -to my occasional shame- IE's box-model. As noted by the OP it seems to make more sense to have a pre-defined width from which margin, padding and border-width are subtracted, than to have a width to which these are then added.
On the other hand, I can work with both models quite happily, all I really want is consistency between implementations, whichever implementation is chosen.
While I find that W3C gets it right most of the time, in this particular case, I have to say that IE's box model is superior.
One common issue that I often encounter is when I want to set the width to be a percentage and have a pixel padding as well. To get a div to stretch to 100% and add padding, I am forced to use two divs instead of one - Otherwise applying the 100% on a single div will actually turn out to be more than you expect after the padding is factored in. It makes it really difficult to work with fluid layouts.
It is not so much an issue of which is better or worse, but which follows the standard from an accepted organization and which not..
On the other hand of your problems would be someone who wants his text wrapped inside a 300px container, which has a distance of 10 pixels from the next one.. Now you would have to make the same calculations as your example in order to calculate the width.. it is a case of how you view the same problem..
If you always use padding, border and margin to a box, the IE-model may look better and more logical, but it's rarely the case.
Yes, the WC3 box model is a little bit more complicated, but it pays back in terms of possibilities and strict "to-the-pixel" control over your layout.
Once you make enough layouts with the box model you get accustomed to it quiet well, once you explore it's power and you'll never want to even consider the IE-bugs a better way of doing web layouts. Trust me, been there.