I have JSF table with left alignment for all rows. But I would like to apply right alignment on one row. I tried this:
<h:panelGroup styleClass="table-right">
<h:selectBooleanCheckbox value="#{bean.method}"> </h:selectBooleanCheckbox>
</h:panelGroup>
.table-right {
text-align: rigth;
}
But it's not working. What is the proper way to apply CSS class for one h:panelGroup and align it's content on the right side?
If you inspect the html, you'll see the h:panelGroup is rendered as a <span>.
The span-tag is an inline-element, meaning it will be as small as possible and you can't set a width on it. You can verify this, if you add i.e. border: 1px solid black; to the styleClass. It has no effect to either left- or right-align something in a container, that is just big enough.
I think you can solve it by making the panelGroup a block/inline-block element and putting a width on it:
display: inline-block;
width: 100%;
Related
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
I have a rich:autocomplete dropdown selector in my application. In the dropdown list that appears as the user begins entering text, the strings that have been loaded into the list of selections will happily display out to the entire width of the dropdown. However, once you make a selection only about 34 characters of the string will be displayed, with the result that the end user has to scroll left and right in the input box to see the entire string, see here (StackOverflow won't allow me to post inline images yet): http://imgur.com/Y9LLaBi
Here's the offending table cell in the frontend XHTML file. It uses the JSF and richfaces namespaces and there's a backing bean that creates the autocomplete suggestion list and executes other business logic, but I believe this is the only relevant code:
<td height="20" class="addborderright addborderbottom inputbox" colspan="4">
<!-- nb: richfaces autocomplete to ensure proper name entry -->
<h:message styleClass="errormsg" for="campusName" />
<rich:autocomplete id="campusName" length="50" mode="client" minChars="1"
layout="table" autofill="true" selectFirst="true"
onselectitem="javascript:executeAction(
'#studentComplaintCampusInformationBean.formName}',
'populateCampusAddressFieldsLink');"
value="#{studentComplaintCampusInformationBean.campus.operatingName}"
autocompleteList="#{studentComplaintCampusInformationBean.registeredCampusNameList}"
style="width:370px" fetchValue="#{fn}" var="fn" maxlength="100">
<rich:column>#{fn}</rich:column>
</rich:autocomplete>
</td>
To make the dropdown box left-justify text and be the same as the width of the input field the following CSS is at the top of the XHTML file:
<style>
.rf-au-fnt{
text-align: left; float: left;
}
.rf-au-lst-dcrtn .rf-au-lst-scrl {
width: 370px; !important
}
</style>
However, there doesn't appear to be a CSS property relating to the width of the displayed text in the input box, so it appears cut off to the end user, and only fills about half the available space in the input box! Could someone please help? Thanks!
rf-au-fnt is the class of the input, you're already overriding it so just add the width.
As a sidenote, rather than directly overriding the RichFaces classes you should set a class for the component and then write stylesheets like
.myAutocomplete .rf-au-fnt {text-align: left; float: left; width: 370px !important
}
This way you don't change something you wouldn't want to.
I have a div with some inner content that I need to have an ellipsis when it overflows. I've done this many times on other elements but for some reason this is not behaving as expected.
Also, I left white-space:nowrap; out on purpose because the content then does not break to the next line within the span, as a result I only see 2-3 words before the ellipsis starts. I would like the text to span the entire height of the parent container then have the ellipsis start for content that exists beyond those bounds.
Here is a working Demo: http://jsfiddle.net/sadmicrowave/DhkSA/
CSS:
.flow-element{
position:absolute;
font-size:12px;
text-align:center;
width:75px;
height:75px;
line-height:70px;
border:1px solid #ccc;
}
.flow-element .inner{
position:absolute;
width:80%;
height:80%;
border:1px solid blue;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
text-align:center;
}
.flow-element .long{
float:left;
height:50px;
width:100%;
line-height:12px;
border:1px solid red;
text-overflow:ellipsis;
overflow:hidden;
}
HTML:
<a class='flow-element' style='top:100px; left:50px;'>
<div class='inner'>
<span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
</div>
</a>
Can someone please help. I need to display as much text as possible within the red outlined span while having an ellipsis when text content overflows the container...
Thanks in advance
you can't apply text-overflow: ellipsis to inline elements (span), it can be used with block elements only (div)
and also use white-space:nowrap; when using text-overflow: ellipsis;
check this, i have converted your inner span to div, just for proof of concept
http://jsfiddle.net/3CgcH/5/
i don't know why you have used span, but as per your logic you can make changes as i suggested
Update:
someone will think that in the question if i put white-space: nowrap; to span element then the text-overflow: ellipsis: is working so may be i am wrong, but it is not the case because questioner has used float: left in the span tag that means the span tag will be converted to a box block and work like a normal block level element, which is also wrong thing to do because if you need the block element behavior then use a block level element
Reference:
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
http://dev.w3.org/csswg/css3-ui/#text-overflow
Add this:
white-space:nowrap;
to .flow-element .long
then the overflow-ellispsis works.
I think you will find the problem is caused by having text-align: center;
In my case it helped to set display: block;
Add white-space:nowrap; to your .inner div.
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.
I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.
Is there any way to achieve this layout only using CSS?
The markup would be something like this:
<article>
<section>...</section>
<section>...</section>
<section>...</section>
<section>...</section>
</article>
Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).
It's possible using CSS columns. Here is a good explanation.
CSS:
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
HTML:
<div>
Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!
...and so on and so forth ad nauseum.
</div>
Also, I found this site by searching "CSS Masonry" on Google. It was the second result.