css3,liferay,vaadin,portlet , How manage styles in Vaadin portlet in Liferay

How manage styles in Vaadin portlet in Liferay


Tag: css3,liferay,vaadin,portlet

I have a Portlet, where is used Valo theme. Most graphical components are displayed properly, but TextField not. It should have rounded border radius and height should be about 35px. It has normally about 15px and the field is angular. When I narrow width of browser window to about 200px suddenly TextField has proper height. I can explicitly change the height to use method ...setHeight in source code, but how can manage it using styles? I copied tests-valo theme into VAADIN/themes, but still I don't know how to change appearance of text field. It looks like that there is no response. Even very simple change of color has effect on the other components, but not on TextField. I.e.

((ComboBox) testComb).addStyleName("color2");

Has effect.

((TextField) testField).addStyleName("color2");

Has no effect.

The retyping in examples is obsolete and it is used for clarity.


I found solution, wich is not perfect, but still enough for my purposes:

1.Do copy Valo Theme from vadin-themes-7.0.5..jar as explained on http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html 2. Edit styles.css in valo root theme. 3. Add !important clause into .valo .v-textfield {..} class definition as written on http://www.liferay.com/community/forums/-/message_boards/message/15001322 for border-radius and height. It changes precedence of appearance.


    .valo .v-textfield {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin: 0;
    font: inherit;

    font-weight: 400;
    line-height: normal;
    height: 37px !important;
    border-radius: 4px !important;
    padding: 4px 9px;
    border: 1px solid #c5c5c5;
    background: white;
    color: #474747;
    -webkit-box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-transition: box-shadow 180ms, border 180ms;
    -moz-transition: box-shadow 180ms, border 180ms;
    transition: box-shadow 180ms, border 180ms;
    width: 185px;

That's all. The appearance is as desired.


Responsive css always applying landscape

I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design). Anyone have an idea of what I'm doing wrong ? Thank you ! Guillaume **** edited new version: now working....

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

Click on link next link should be display on same page

I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

CSS Container Wrap shaped Polygons

How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

How to position div which contains font-awesome icons to centre of another div?

I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

customize the handler of input range

When we use input range <input type="range", there is a handler which is moveable as how we handle it. Now I need a help how to customize this handle, in this case I want to change the default handler with my own handler(image of button). Thanks for the help <input...

Pure Css transition slide down panel not working

Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

How to make my nav bar responsive

I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

:nth-of-type selector overrides all other CSS selectors

I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority. I have the following CSS: table { border: 1px solid black; } tr:nth-child(odd) { background-color: red; } tr td:nth-of-type(even) { background-color: blue; } td...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Cons of a liferay cms while website development using Community Edition

I am new to LIFERAY CMS. i need cons of a liferay cms i.e., difficulties faced while developing and using liferay cms. can you please list cons of liferay cms.

CSS3 Columns children with margin issue w// Chrome

http://dev.metertech.co.uk/technologies/patents-and-licensing On the page above you can see that the second column is pushed down a little from the top. On a page resize the issue corrects itself. All other pages, even those with the same number of <p> tags for the .content render the columns correctly. I have no...

Animate removal of list items with css

I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

list checkboxes displayed horizontal

I have the following markup:- <div class="fil hori now"> <span class="label-new"> <ul class="ngc"> <li> <input class="any" id="any" name="any" type="checkbox"> <label id="any" for="any">Any</label> </li> <li class="new-select"> <input id="item1" name="item1" type="checkbox"> <label id="item1" for="item1">item1</label> </li> <li class="new-select"> <input id="item2" name="item2" type="checkbox"> <label id="item2"...

How do you make a div only extend in one direction when the outer container size increases?

I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

Setting up the page grid using push and pull

I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

how to align column to the right?

I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

Smooth mouse-out animation

I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

CSS :hover that shows more than one image

I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

CSS Background horizontal centering

I have an image as background with the following CSS setup #background { background-image: url('../img/bgimage.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; opacity: 0.8; filter:alpha(opacity=80); top:0; } My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page....

boostrap & Normalize.css: spacing problems

Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects. Index <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- GOOGLE FONTS -->...

css disappears on the click of a button

I got a countdown timer that starts working on click of a button. i tried to apply css to it, but when i click on the start button the css disappears. can anyone tell how i can retain my css the whole time here is my code @fiddle $('#startClock').click(function() {...

CSS: How to flow text around both left and right images

I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

Float left and float right not working + sub-menu positioned under first UL item?

Been learning CSS and HTML quite a lot lately, and although I already know about stuff like float, positioning, margins, padding, etc, for some reason splitting up these 2 things are not working... And also my submenu is a bit wrong, refer to the image below: As you can see...

How to properly position divs for overlay hover effect with text underneath

I have two rows of 4-boxed divs. The goal is to have a header within each box, and then hovering over the box will present more detailed p text with a faded background. I'm close, I just can't figure out how to actually layer the span overlay on top of...

Swap nav and div vertically uing CSS only

So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

Delayed CSS3 modal window fade in

I have a modal window that I'm trying to have appear after about 7 seconds, with a close button so users can close it if they want to. I got it to close when you click the close button with this code: .tip { z-index: 99999; -webkit-transition: opacity 400ms ease-in;...

Div Text's Color Changes when Printed

I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

Dynamic font-size according to device

Small question, for which I can't find any answer. Is there a way to do this? I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to...

How can I change the zIndex attribute of aui-datepicker in Liferay Portlet 6.2

I have discoveder one problem with date field in portlet in LF 6.2. The problem is that after clicking on the input field, the datepicker is displaying, but with zIndex=0, that means it is under the portlet. If I change on firebug that parameter to 1, everything is OK. I...

Round edges on shorter side in CSS [duplicate]

This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

Is there an opposite CSS pseudo-class to :hover?

Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in...

How to avoid wrap in IE7 when I have two ul in a navigation?

In ie8 or firefox browser,My code runs well,the two ul are in the same line.But when I ie7,the two ul are in the diffrent line,How to make then in the same line in ie7? <DIV id='navigation'> <ul><li><span> leftspan </span></li></ul> <ul style='float:right;'> <li><span> leftspan </span></li> <li><a href="http://www.google.com" target="_blank">google</a></li> <li><a href="http://www.apple.com" target="_blank">apple</a></li>...

drop down menu toggle does not work

So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...

CSS Nav Menu Fade Out OFF Hover

Still learning as I go with CSS styling, and I want to implement a fade-in/fade-out navigation menu. Reading up, I was able to code a fade in on hover successfully to the effect that I want. Now I'm being challenged logically and can't seem to come up with how to...

CSS Image Background - Same Scale Across Different Devices

I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types. Things I...

Form submit portlet with Spring MVC

I'm trying to achieve a Liferay portlet of submit form using spring MVC. The model: package com.model; public class Person { String firstName; String middleName; public String getFirstName() { return this.firstName; } public String getMiddleName() { return this.middleName; } public void setFirstName(String firstName) { this.firstName=firstName; } public void setMiddleName(String middleName)...

Two div side by side in one container css

I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container. .conteiner { position: relative; } .image{ display:...

Using CSS :after to shade a button:hover

I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker...

Fit an image inside a div that also has a title?

Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

CSS drop down navigation

I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

how to use .load(function() { on a large function

I have 5 pretty large CSS3 / jQuery chain animations within a web page, these occur at 5 subpages, when the user navigates to each individual (5) subpages.. I would like to use / have the effect of jQuery's $( img ).load(function() { // Run code }); Except I only...

Add CSS3 transitions to jQuery Animate script

Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: https://jsfiddle.net/38e126f4/ I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

Content section overlap footer

I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

css3 animation text repeatly

I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location. https://jsfiddle.net/v3jds98d/ span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0; -webkit-animation: textanimation 3s ; -moz-animation: textanimation 3s ; -ms-animation: textanimation 3s ; animation: textanimation 3s ; } .animation_text1...

Colour overlay on hover

I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Pure CSS animation visibility with delay

I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not. I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility...

Setting overflow: scroll on a table with display: flex

I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it...