First question is: do I really need to use tables to align/organize labels/fields on my xPage?
It's like old style development (using hidden tables) that helps group components on the form/page.
Anyway I just switched from Notes 8 to Notes 9 and apply Bootstrap 3 theme. Now all tables have top border I cannot remove. It's something weird. Even my own class doesn't remove the border.
table, th, td {
border-collapse: collapse;
}
Moreover if I try to set border size/color it works only for left,righ and bottom. If I set border size 2px then it sets the color for top border as well
table, th, td {
border: 1px solid black;
}
So how do I remove tables borders on my page. See picture below
Add the following lines to your CSS:
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td,
.table>tbody>tr>td, .table>tfoot>tr>td {
border-top: 0px;
}
You don't need a table to align label and field. Use style "display:inline-block" and set an appropriate width:
<xp:label
value="Label1"
id="label1"
for="inputText1"
style="width:20%;display:inline-block;">
</xp:label>
<xp:inputText
id="inputText1"
value="#{sessionScope.input1}"
style="width:75%;display:inline-block;">
</xp:inputText>
Use separate classes for label and fields with those styles to set the same align to all label/fields in your application.
If you move to a Bootstrap theme you would not need the tables for alignment plus you would be creating a responsive design that could adapt to mobile devices.
Related
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%;
I want to add placeBar label to the right..
PlaseBar title appears as a text on left, all buttons/items appears on right. But there is no option to add just a text/label as an item. If I cannot add a lebel then how can I style the button to hide borders?
To answer your question on the button styling: add border: none to your buttons in the place bar by adding this to your custom css file:
.lotusPlaceBar .lotusBtn {
border: none;
}
This will target buttons in the place bar only.
You can also add your own class to a specific button and then target that class only.
The most simple solution is probably to just add inline CSS to your button:
<xp:button value="need a label here" id="button3" style="border:none"></xp:button>
Add a basicLeafNode to your placeBarActions
<xe:this.placeBarActions>
<xe:basicLeafNode
label="need a label here"
enabled="false"
styleClass="labelPlaceBar">
</xe:basicLeafNode>
and give it a class "labelPlaceBar".
Set enabled to "false". This way it won't change mouse cursor hovering over the label.
Use class "labelPlaceBar" in css to hide label's border and background for normal mode and for hovering:
.labelPlaceBar a, .labelPlaceBar a:hover {
border: none;
background: transparent;
}
Then it will show the label just as a label.
Could any one help me with this, vaadin table cell borders are not aligned properly with header border, but I don't have this issue in other browser.
I have followed the rules given by vaadin to style the table, even though I have this issue.
Any help would be great!
I am sorry I have not elaborated it properly.
Below are the instructions given by vaadin for table theme.
Table theme building instructions
Vaadin scroll table is very complex widget with dozens of features. These
features set some limitations for theme builder. To keep things working, it
is safest to try to just override values used in default theme and comfort to
these instructions.
Borders in table header and in table body need to be same width
specify vertical borders on .v-table-header-wrap and .v-table-body
*
Table cells in body:
padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
in default theme there are no borders, but they should work. Just set border-right or border-bottom
no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
background is allowed for both elements
*
Table headers:
table cells in header contain .v-table-resizer and
.v-table-caption-container div elements, which are both floated to right
to align header caption to body content resizer width + .v-table-caption-container
padding right should be equal to content cells padding-right and border-right.
Possible cell border in header must be themed into column resizer.
*
*/
I have followed the same instructions and below is my SCSS...
<pre>
.v-table-header-wrap{
border-top:1px solid #c6c6c6;
border-left:1px solid #e2e2e2;
background:none #e2e2e2;
height:33px;
.v-table-header{
height:33px;
position:relative;
.v-table-resizer{
height:33px;
border-left:1px solid #d0d0d0;
border-right:1px solid #eee;
width:auto;
position:relative;
z-index:1;
}
}
}
.v-table-caption-container{
background:0 none;
#include box-sizing(border-box);
padding:0.813em 0.9em;
line-height:normal;
overflow:hidden;
position:relative;
top:1px;
}
.v-table-table tr{
td{
padding:4px;
border-color:$ClDwnClr $ClLtClr rgba(0, 0, 0, 0) $ClRtClr;
vertical-align:middle;
border-style:solid;
border-width:1px;
.v-table-cell-wrapper{
color:$Color;
position:relative;
top:0;
overflow:hidden;
text-overflow:ellipsis;
}
}
}
</pre>
The real issue is table cell borders are not aligned properly with table header cell borders in SAFARI browser but this is fine with other browsers.
What is the preferred / cleanest method to draw a 1px border between two Susy grid items, in the center of the gutter?
Susy creates a gutter by adding a margin-right to a grid item, so I can't simply add a border-right (like, for instance, you can do with Zen Grids, which creates gutters by applying half a gutter-width of padding on both sides).
I guess it can be done using the with-grid-settings() mixin to define an alternative grid without gutters, but that feels like a messy solution.
There isn't a great solution at the moment, but I hope to have one in the next major release. What you can do, is create your own math using the Susy functions (really the most powerful part of Susy). Something like this:
.left-column {
#include box-sizing(border-box);
float: left;
width: columns(2) + gutter()/2;
padding-right: gutter()/2;
margin-right: gutter()/2;
border-right: 1px solid;
}
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.