I have two JSF elements (e.g., an input text, and an image). For some condition (e.g., if a user is logged in), I want the input text to be rendered first. For the opposite condition (e.g., the user is anonymous), I want the image to be rendered first. Is there a way to accomplish that (that can scale to more than just 2 elements)? The only idea I have, which looks hacky, is the following:
<h:inputText rendered=#{condition}/>
<h:graphicImage/>
<h:inputText rendered=#{!condition}/>
I would use CSS to solve this. Roughly it comes down to:
XHTML:
<div class="container input#{condition ? 'First' : 'Last'}">
<h:inputText/>
<h:graphicImage/>
</div>
CSS:
.container { overflow: auto; }
.container.inputFirst input { float: left; }
.container.inputLast input { float: right; }
Again, this is rough. It's just to give you an idea. Customize it to your needs. There are many ways in which you could style this.
If you want to use flex, try:
.container { display: flex; }
.container.inputLast { flex-direction: row-reverse; }
Related
I am trying to create a one page website that is similar this example :
http://themeforest.net/theme_previews/6622929-glissando-creative-minimal-onepage-psd-template?index=1&url_name=glissando-creative-minimal-onepage-psd-template
I thought I could use the transform css property but It's not giving me exactly what I want. Does anyone have any insight into this? I'm really new to coding!
Thanks!
html:
<div class="about">
<div class="aboutcontent">
</div>
</div>
scss:
.about {
width: 100%;
background: white;
transform: skewY(-5deg);
padding: 150px;
.aboutcontent {
transform: skewY(5deg);
}
}
I figured out the answer! My above code was actually correct. To make my website look like the example you should put a background image on the body and then you can position the skewY divs appropriately!
Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-attr" attributes="width" noscript>
<template>
<style>
#host {
:scope {
display: block;
width: {{width}}px;
height: 100px;
background-color: black;
}
}
</style>
<content></content>
</template>
</polymer-element>
<test-attr width="100">Hello</test-attr>
EDIT : edited to remove obvious typos
There are a couple of things that need changing in your example:
<content> needs to be within the outer </template>
You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.
With the changes: http://jsbin.com/ODEGika/3/edit
That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270
I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.
So I hope find my answer here, I want to change layout,
The default interface is look like this:
What I want is (I made this using firebug) :
How I can do that?? or in another word from where I can start to do that?
leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.
Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.
take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.
Cheers
I solved my issue, there was a little mistake from my side, and I did some modification;
In CSS file:
#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
display: inline; */ /*Removed*/
...
}
/*Added*/
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
In templates :
At appbar.ftl , or appbarOpen.ftl :
<div id="container"> <!-- This is the Line that I Added -->
<#if userLogin?has_content>
...
And in footer.ftl :
</div> <!-- This is the Line that I Added -->
<div id="footer">
...
Simply :)
i'm trying to make up a different look and feel on my sharepoint site. I try to make my main content's width down to 960px under my form tag in sharepoitn designer. when I refresh the page at the first it renders the main content down to 960px but when the page fishished loading the main content stretches itself to the whole screen's width.
I found out that it's because of the onload script running in body tag. but I caanot remove this script because this work has side effects on page functionality.
the function is _spBodyOnLoadWrapper().
does anyone know this function ? or does anyone know how to come up with this problem ?
UPDATE #1:
My css code is as follows.. I added this class to the main Form on master page:
.mainContent
{
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
direction:rtl;
}
UPDATE #2:
I use v4.master template.
I have taken the ribbon out of the form tag. it's directly after body tag. because I wanted the ribbon to be streched at the top. but when i add this line of code
<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
the mainContent blows up. something at the header streches in the whole width and some panels at bottom remains 960px.
you got me interested so I recreated your issue. By default, the javascript will try to inline the width based on its calculations.
However, what you need is to set the class s4-notsetwidth on a wrapping container.
Here is what i did to fix your issue
Add this to the head
<style type="text/css">
#s4-bodyContainer {
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 960px!important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
</style>
Then locate the s4-workspace (that's the immediate parent of #s4-bodyContainer and add class s4-nosetwidth. That should work for you.
Use these two references to achieve exactly what you want (not sure if you want ribbon aligned or not), Randy Drisgill post and Tom Wilson's post.
I've been playing a little bit with CSS3 flexible box model as described in this article: CSS 3 Flexible Box Model
I am trying to create a simple vbox with a nested hbox, something like this:
<div class="vbox">
<div>Header</div>
<div class="hbox">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
<div>Footer</div>
</div>
However the content of the hbox is being laid out vertically and not horizontally. What am I doing wrong and how to do it correctly? Thanks.
The problem is that the display: box; declaration in the .hbox rule gets overridden by the display: block; in the .vbox > * rule. You have two options:
1 Make the display: box override the more specific rules:
.hbox {
display: -webkit-box !important;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
display: -moz-box !important;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
display: box !important;
box-orient: horizontal;
box-align: stretch;
}
Approach 1 working example here, the main disadvantage of this approach is that you're messing with the default specificity rules of CSS which may cause confusion in other places.
2 Remove display: block from the more specific rules:
.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
Approach 2 working example here, the main disadvantage of this approach is that you'll need all direct children of an .hbox or .vbox to be block level elements.