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
Related
I tried a lot of solutions that I have found here and in Google, but no one of them works.
The table is dynamically generated by jQuery and Javascript.
Question:
How can I remove the padding, border between the cells in this html table ?
This is the HTML code:-
<div class="board">
<table id="tableGame">
</table>
</div>
This is the Css Code
.board{
float:left;
display: inline-block;
}
table{
border-collapse: collapse;
}
table tr, td{
border: 0px;
}
Javascript Code below
function mapGenerate(){
var map=createMap(); // this function returns a 2d array filled of random 1 and 0
/* example
map = [[1,1,1,1,0],
[1,0,0,0,0],
[1,0,1,1,1],
[1,0,0,0,1],
[1,1,1,0,1]]
*/
//loop the 2d array map and change the number with the appropriate img
for(var i = 0; i < map.length; i++) {
var innerArrayLength = map[i].length;
for(var j = 0; j<innerArrayLength; j++){
//loop the nested arrays so i can change the 1 and the 0 with the appropriate img
if(map[i][j] === 0){
map[i][j]="<img class=\"walkble\" src=\"mapTiles/floorResized.png\">"; //you can walk this part of the map
}else{
map[i][j]="<img class=\"nonWalkble\"// you cannot walk This part of the map src=\"mapTiles/volcanoresize.png\">";
}
;
}
$("#tableGame").append("<tr><td>"+ map[i] + "</td></tr>") // Here i print the elements of the array
}
}
mapGenerate();
Link to jsfiddle under here.
The problem is not about the 3rd white line ( it only appears in js fiddle, if I open it in my browser they looking as a normal table).
The problem is only to delete that disturbing padding between the cells.
jsfiddle
In codepen you will see it better, without lines error.
codepen
looks like the problem is on line 80 of your javascript.
$("#tableGame").append("<tr><td>"+ map[i] + "<td></tr>")
you're concat-ing an array (map[i]) into a string. javascript by default "stringify" it by joining it with commas.
The code above is like:
$("#tableGame").append("<tr><td>"+ map[i].join() + "<td></tr>")
since the default joining string is comma, that's equivalent to
$("#tableGame").append("<tr><td>"+ map[i].join(',') + "<td></tr>")
To get rid of the commas you simply joining it with an empty string
$("#tableGame").append("<tr><td>"+ map[i].join('') + "<td></tr>")
In HTML, there are attributes border, cellpadding, and cellspacing on the <table> element. Set them to 0. <table border="0" cellpadding="0" cellspacing="0">.
Border is for the border width.
Cellpadding is for the padding in the table cells.
Cellspacing is for the space between the table cells.
css:
table { border-collapse: collapse; }
table td { padding:0; }
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';
},
I'm not sure this is possible, but i was wondering if it is possible to set a background color for text only, & not the span/div/P tags that contain the text.
EG
This text here...
each character of "this" will be a black background with white text, the 'space' will have the blue background the word "text" will be a black background with white text etc....
Something like what deaf people see on some TV shows - captions...
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
From what i have gathered / googled, I can set a background for an entire 'container' but not just for "text" in the container.
example: How do I set background color of text only in CSS?
The above sets the whole h1 tag as a green background.
PS - i'm only using 'green' as an example - but i've got other colours in mind, or even pictures as the background. but i want the text content to be visible..
PS, if the above can be done, is it also possible to 'opaque' the text-background ? so the actual / main background is partially visible, but keep the text "solid".
Ive used opaque, but it makes the foreground text opaque (not kept as solid).
This is the solution I found using JavaScript. It is definitely not only CSS, but it's as far as I could get it with minimal code:
Note: check the updated JSFiddles below! http://jsfiddle.net/fq4ez69t/1/
It finds all spaces in your "p" tags (i.e. change this to whatever you need) and substitutes them with a span with class .space so that you can style it in your CSS.
Here's the JS:
var str = document.getElementsByTagName("p")[0].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
document.getElementsByTagName("p")[0].innerHTML = newstring;
Update #1
Just thought of this. Maybe change the getElementsByTagName("p")[0].innerHTML; to something like document.getElementsByClassName('shaded')[i]; and use this class on whatever text you want to look like that. This is done using a for loop like so:
http://jsfiddle.net/fq4ez69t/2/
Just add the class shaded to the text element you want to look like the image above and voila!
var shadedtextblocks = document.getElementsByClassName("shaded");
for(var i = 0; i < shadedtextblocks.length; i++)
{
var str = shadedtextblocks[i].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
shadedtextblocks[i].innerHTML = newstring;
}
Update #2 - Works with background images now.
http://jsfiddle.net/37s7ex2j/
Here's an updated version that works for p and h1 tags and uses jQuery. It won't print backgrounds on top of your background image. It looks much better, but the script is a bit slower. Here's the result:
$('.shadedtext').each(function(){
//FOR P ELEMENTS
var text = $.trim($('p').text()),
word = text.split(' '),
str = "";
$.each( word, function( key, value ) {
if(key != 0) { str += " "; }
str += "<span class='shade'>" + value + "</span>";
});
$('p').html(str);
});
Choosing text in a container
In short: No you can not set the background of only the text in a div, or spesialy choose each color for each word.
What you can do is set the text of each container ofc:
<div class="class"></div>
.class {
//background, can also use rgba(0,0,0,0.5) <- semi transparent black.
background-color: white;
}
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
Keeping your text inside inline-block elements will keep the selection to some what text only.
Example:
p {
background-color: rgba(5, 5, 5, 0.5);
color: white;
}
p.inline {
display: inline-block;
}
Inline
<p>Lorem ipsum dolar si amet</p>
Inline-block
<br>
<p class="inline">Lorem ipsum dolar si amet</p>
If you want something like subtitles on TV, you can add a text-shadow on your text:
.myTextClassSelector{
text-shadow: green 1px 1px, green -1px 1px, green -1px -1px, green 1px -1px;
}
<div>
<p class="myTextClassSelector">This text here</p>
And this other text here.
</div>
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");
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!!