I would like to draw a border (outline) around a VerticalLayout. I don't want all my VerticalLayout components to have borders, just one of them. It's a Vaadin 7 project in Eclipse.
As far as I know the only way to do this is with CSS:
VerticalLayout vl = new VerticalLayout();
vl.addStyleName("layout-with-border");
And then modify your theme (.scss file) to include:
.layout-with-border {
border: 1px solid black;
}
If you want to do it dynamically without changing the theme file (.scss file):
VerticalLayout vl = new VerticalLayout();
final Styles styles = Page.getCurrent().getStyles();
String css = ".layout-with-border {\n" +
" border: 1px solid black;\n" +
"}";
styles.add(css);
v1.addStyleName("layout-with-border");
typically if there is a getStyle() then you can do something like
vl.getStyle().set("border","1px solid black");
Related
I am dynamically adding grid rows in html . In grid there is one numeric column creating in following way
var td4 = document.createElement('input');
td4.type = "number";
td4.value = "0";
td4.id = "count_" + i + "_t";
td4.onchange = function call(){CallNumberCheck(this);};
td4.min="1";
td4.max="99";
td4.setAttribute("style", "font-size:15px;min-height:90px;width:100%;padding-left:25%;padding-top:28%;");
But Column border is not in black color and having light black. I tried by keeping
border:1px solid black; but it is showing thick black color .
Pls see added image where count column border is not black same as other columns.
You need to add this CSS : input { border: 1px solid #000; }
Here is the working code:
https://codepen.io/NehhaSharma/pen/MWWOrpQ
I'm using flutter_html package on my app to parse HTML from API. The html code is:
<p>Text text text text <span style="background: #FF0000; color: #FFFFFF; padding: 2px 5px; border-radius: 3px">XX</span> text text</p>
And it should print like https://i.imgur.com/0056kcT.png
But it prints this way https://i.imgur.com/FXO5dKD.png
The max I get to this is patching flutter_html packe like this:
if(node.attributes.isNotEmpty){
if(node.attributes['background'] != null){
childStyle = childStyle.merge(TextStyle(
//backgroundColor: Color(int.parse(node.attributes['background']))));
background: Paint()
..color = Color(int.parse(node.attributes['background']))
..style = PaintingStyle.fill
..strokeCap = StrokeCap.round
..strokeWidth = 2.0
));
}
if(node.attributes['color'] != null){
childStyle = childStyle.merge(TextStyle(
color: Color(int.parse(node.attributes['color']))));
}
if(node.attributes['padding'] != null){
childStyle = childStyle.merge(TextStyle(
wordSpacing: double.parse(node.attributes['padding'])));
}
}
But how can I add rounded border and padding?
Thanks
flutter_html currently doesn't support css, both inline and in the style tag. Version 1.0.0 has planned support for both of those use cases. It should be released towards the end of November 2019.
Source: I am the owner/prgrammer of the flutter_html package.
EDIT: I would like to implement it with Jekyll, which (as far as I know) does not have PHP, jQuery, and so on...
I have a simple problem with CSS; it must have a simple solution but I just don't find it.
Suppose one has multiple divs with some classes:
<div class="cat">
<div class="dog">
<div class="bird">
<div class="snake">
...
and in a .css we want to style these 'pet' divs; the style is very similar from class to class (for instance we have some photos cat.jpg, dog.jpg... and want to show them). Can this be achieved by a somewhat symbolic method? Something like
div.pet{
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
...
(but there is no class="pet" nor pet.jpg)
I would use sass:
div {
$list: "cat", "dog", "frog";
// generate classes for list elements
#each $element in $list {
&.#{$element} {
background-image: url('images/#{$element}.jpg');
}
}
}
That's not something you can do with CSS. CSS can only style objects and can't make other changes/additions/deletions of DOM objects.
But it is definitely something you can do with jQuery! If you know that you always have a class name class="cat" that is the same as the file name cat.jpg, you can do something like this:
$("div").each(function(){
var petClass = this.attr('class');
var petImg = petClass + ".jpg";
this.append("<img src='"+petImg+"' ... >");
});
Im not sure what your asking But as far as I understand you want to have some global setting for div elements and change the background image:
https://jsfiddle.net/shtjab2k/
Css
#pets > div
{
width:100px;
height:40px;
border:2px solid black;
float:left;
}
.cat
{
background-image: url("https://i.vimeocdn.com/portrait/58832_300x300.jpg");
}
.bird
{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/2000px-Solid_blue.svg.png");
}
html
<div id="pets">
<div class="cat "></div>
<div class="dog "></div>
<div class="bird "></div>
<div class="snake "></div>
</div>
The simplest, pure-css way to do this is this:
.dog, .cat, .bird, .snake {
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
}
It doesn't matter that the background we provide doesn't exist, we'll replace it in the css for individual pet types:
.dog {
background-image: url("/pictures/dog.jpg");
}
It seems like you're looking for a way to do this in a single ruleset, which, unfortunately, is not possible. For that, you'd have to look into using Javascript or a CSS superset (see other answers on this post).
Otherwise, you can just write a couple more lines of css and set the background image for each pet type. =P
It isn't possible to add different images sources to the image tags with pure CSS. You may need to use JS, JQuery, PHP , etc.
You may do this using JavaScript/JQuery as follows :
Store all the image names in an array and then run a loop on-load(of page) to get images by using those array element(values).
Using jQuery, you may set img source like this:
$("img:nth-child(i)").attr('src', <new path from array[i th element]>);
The nth-child(i) means ith image.
Using Js, you may do this:
var images = [
'path/to/image1.png',
'path/to/image2.png',
'path/to/image3.png',
'path/to/image4.png',
'path/to/image5.png'
];
function loadImages(imgArr, targetId){
for(var i=0; i< imgArr.length; i++) {
console.log(imgArr[i]);
var img = new Image();
img.src = imgArr[i];
document.getElementById('output').appendChild(img);
}
}
loadImages(images);
You can also invode the loadImage() function from yout button:
<button onclick="loadImages(images)">Start</button>
Refer : JavaScript load Images in an Array
I'm trying to have in my full calendar two kinds of events. I will differenciate them.
The color is not a good idea, because I need differte colors in thw two kinds of events. Il have thought about border color. But the propriety border color has a very little border. I want to set the border width bigger.
How can I do that?
I've tried in my main css:
.fc-event-inner {
border-color: red;
border-style: solid;
border-width: 15px;
}
But it does anything.
Thanks
Best regards
PS: I'm using fullcalendar with this symfony budle: https://github.com/adesigns/calendar-bundle
I use eventRender to handle them:
eventRender={info =>{
info.el.style.borderWidth = '4px'
info.el.style.borderRadius = '0px'
}}
Just typing .fc-event didn't change border of events of Fullcalendar. So, I tried following code and it changed events border perfectly.
.portlet.calendar .fc-event {
border: 15px solid red;
}
I managed to change the width of the border by modifying the class fc-event:
.fc-event {
border-width: 15px;
}
See here
Since fullcalendar v5 there is no more eventReader callback.
Now you have to use the event render hooks eg. eventDidMount:
eventDidMount: function(info) {
info.el.style.borderRadius = '0px';
info.el.style.borderWidth = '4px';
},
In HTML, I am adding rows dynamically in a table
I need to give different colors for alternative rows using CSS
How can I acheive this?
To achieve this effect (known as zebra striping) in all browsers using just CSS you'll need to add a class to each row (e.g. odd and even) and give them different colours.
If you want to achieve this with just CSS and are not concerned with supporting older browsers (IE6-8) you should use the CSS3 nth-child pseudo element. This can achieve the required effect without the extra class mark-up, e.g.
tr:nth-child(odd) {
background-color: #FF0;
}
tr:nth-child(even) {
background-color: #F0F;
}
However if you want full browser support and don't mind using javascript there are a number of scripts available, both jQuery plugins and plain old javascript. Maybe try this for starters?
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
Just create 2 css classes, and assign them to the tags alternately.
Try this using JQuery:
$('tr:even').css('background-color', 'grey');
See it in action here
What are you using to create the table, if it is rails you can use?:
= cycle('odd', 'even')
or you can do it in PHP like this:
$i = 0;
=($i++%2==1) ? 'odd' : 'even'
You can also try without CSS, its simple.
Code:
**var rowCount = document.getElementById("tableID").rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.style.backgroundColor = "yellow";
cell1.innerHTML = "hey";
var cell2 = row.insertCell(1);
cell2.style.backgroundColor = "green";
cell2.innerHTML = "hello";**
Here its creating dynamically row for the table and filling different color to coloumns.
hope this help..!!
Thanks
just create the css classes for rows(odd and even) but dont forget that the font color for text should be readeable regarding the background color
.row_odd{
background: #ffffff;
color: #000;
}
.row_even{
background: #faf8f5;
color: #000;
}
Then in the xhtml you have to set the class for each row. For example, using php while you are iterating on rows you can set the value of the variable $class.
<tr class="<?=$class?>" onmouseover="">
<td class="center col_check">...</td>
<td class="links">...</td>
<td class="center">...</td>
</tr>
In addition, you can make other css classes for each column depends of what you want!!