I want the text inside my table to word-wrap. The constraint is that I can't change the HTML since it's generated by the server.
I created a JSFiddle
In case it's not working:
<div style="width: 25%">
<table class="af_selectManyCheckbox" id="pt1:r1:1:smc1" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="af_selectManyCheckbox_label" valign="top"/>
<td valign="top" class="AFContentCell" nowrap="">
<div class="af_selectManyCheckbox_content">
<div>
<span class="af_selectManyCheckbox_content-input">
<input class="af_selectManyCheckbox_native-input" type="checkbox" value="0"/>
</span>
<label class="af_selectManyCheckbox_item-text">It allows a component to partially refresh another component whose partialSubmit property is set to true.</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here you go.
WORKING DEMO
The CSS Code:
.col-md-3 label {
white-space: normal;
}
Hope this helps.
Related
This shows my image in a small circle:
<div class="row">
<div class="col s1">
<img src="images/img1.jpg" alt="" class="circle responsive-img">
</div>
</div>
Now, I want to add the same image, in a table cell (td) and show it in a circle of the same size.
Should I copy/paste the above code as is inside the td ? It seems too verbose. Is there a simpler way?
Note: I know that a solution could be to write some custom css, but the reason why I use a css framework is to not write css, especially for common things like this.
You can just add the classes directly to the table elements like:
<tr class="row">
<td class="col s2">
<img src="src" alt="" class="circle responsive-img" />
</td>
</tr>
Here is an example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col s1">
<img src="https://i.stack.imgur.com/4iGwt.jpg?s=328&g=1" alt="" class="circle responsive-img" />
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
There is no need to mix the grid system with the table. This will suffice:
<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">
The .circle class in materialize just adds this CSS:
.circle {
border-radius: 50%;
}
The responsive-img class add this CSS:
img.responsive-img {
max-width: 100%;
height: auto;
}
This is to stop images breaking out of containers, and is of no help to you here. What you need to do is use a square image and control the height of the image inline, as shown above.
Codepen.
You can use a button circle and set image with tag responsive-img, example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div>
<table>
<thead>
<tr>
<th>Image</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
</div>
I want these 2 div tags so they are on top of each other. I have defined both of them as inline blocks because I need to give them properties like float, padding, border. Even after defining both the div tags as inline-block both of them are partially on same line.
Help appreciated :)!
<div id="legend" style="border:1px solid black; max-width:75%; float:right; display:inline-block;">
<table style="padding: 2px;">
<tr>
<td><span style="color:red; font-weight: bold;">*</span></td>
<td>some text goes here.</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span></td>
<td>Some text goes here again</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span></td>
<td>yup..some other text goes here again.dfdsfdsfsf</td>
</tr>
</table>
</div>
<br/>
<br/>
<div id="backToSearch"style = "display:inline-block;">
<button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span></button>
</div>
Try:
<div id="legend" style="border:1px solid black; max-width:75%; float:right;">
<table style="padding: 2px;">
<tr>
<td><span style="color:red; font-weight: bold;">*</span>
</td>
<td>some text goes here.</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span>
</td>
<td>Some text goes here again</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span>
</td>
<td>yup..some other text goes here again.dfdsfdsfsf</td>
</tr>
</table>
</div>
<div style="clear:both"></div>
<div id="backToSearch">
<button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span>
</button>
</div>
https://jsfiddle.net/cj1s9q0g/
Changes:
Remove display:inline-block as div is block by default and block will be on top of each other.
Add a div with clear:both to clear the float:right
display:inline-block; sets them in the same line..
Set them as display:block;, and they should be on top of each other
EDIT: As #Khanh TO says; Divs are display:block; as default, so you don't need to write that.
Set them as
display:block;
clear:both;
I am doing a website about the property plan, my customer required that when their customer hover on the text, the image at the center will change, is there any method that can do by using only css?
<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
<tbody>
<tr>
<td style="color:#469785;">Type <b>E</b></td>
<td style="color:#9BB8A0;">Type <b>F</b></td>
<td style="color:#9DB77F;">Type <b>G</b></td>
<td style="color:#9FA278;">Type <b>G1</b></td>
<td style="color:#C9AE77;">Type <b>H</b></td>
</tr>
</tbody>
</table>
</div>
When the user hover at Type E, the imgcenter will change to image E, when the user hover at Type G, the imgcenter will change to image G, how can i do that?
Here is the solution that i found which can be use
http://fiddle.jshell.net/tbz9nL4g/
<style>
.hover_image {position:relative;}
.hover_image .img1{position:absolute; display:none; z-index:99;}
.hover_image:hover .img1{display:block;}
.hover_image .img2{position:absolute; display:block; z-index:99;}
.hover_image:hover .img2{display:none;}
</style>
<div>
<a href="#" class="hover_image"> link text
<span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
<span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</span>
</a>
</div>
However there is some problem regarding this coding, which when I add another text, this code unable to work
http://fiddle.jshell.net/tbz9nL4g/2/
Use the data attribute to store data-img in a tag and use that on hover
//js
$('a').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
$('.imgcenter').prop({'src':$(this).data('img')});
}else if(e.type==='mouseleave'){
$('.imgcenter').prop({'src':$('.imgcenter').data('img')});
}
})
img{width:300px;height:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter" />
<table class="plantable" border=1>
<tbody>
<tr>
<td style="color:#469785;"><a data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" href="">Type <b>E</b></a></td>
<td style="color:#9BB8A0;"><a data-img="http://www.rodalesorganiclife.com/sites/rodalesorganiclife.com/files/images/animal_bird_300.jpg" href="">Type <b>F</b></a></td>
<td style="color:#9DB77F;"><a data-img="https://sanaakosirickylee.files.wordpress.com/2012/05/chirping-birds.jpg" href="">Type <b>G</b></a></td>
<td style="color:#9FA278;"><a data-img="http://img1.cookinglight.timeinc.net/sites/default/files/image/2005/09/0509p113-bird-m.jpg" href="">Type <b>G1</b></a></td>
<td style="color:#C9AE77;"><a data-img="http://orig10.deviantart.net/6a53/f/2012/074/3/0/profile_picture_by_birds_love_us_all-d4sv1v2.jpg" href="">Type <b>H</b></a></td>
</tr>
</tbody>
</table>
</div>
Suppose I have a table like so:
<table>
<tr>
<th>Type</th>
<th colspan="3">Type Info</th>
</tr>
<tr class="typeA">
<td><input name="type[0]" /></td>
<td class="group1"><input name="A[0]" disabled /></td>
<td class="group2"><input name="B[0]" disabled /></td>
<td class="group2"><input name="C[0]" disabled /></td>
</tr>
<tr class="typeB">
<td><input name="type[1]" /></td>
<td class="group1"><input name="A[1]" /></td>
<td class="group2"><input name="B[1]" disabled /></td>
<td class="group2"><input name="C[1]" disabled /></td>
</tr>
<tr class="typeC">
<td><input name="type[2]" /></td>
<td class="group1"><input name="A[2]" disabled /></td>
<td class="group2"><input name="B[2]" /></td>
<td class="group2"><input name="C[2]" /></td>
</tr>
</table>
There are certain data combinations that are not valid, so we disable the inputs. In this case, I believe the data makes semantic sense as a table - I am not just using a table for layout purposes.
What I would like to do is hide the disabled cells, and have the cells with the non-disabled elements fill the space formerly taken by the now hidden cells.
I can accomplish the hiding with the following css:
.typeA .group1, .typeA .group2 {
display:none;
}
.typeB .group2 {
display:none;
}
.typeC .group1 {
display:none;
}
However, this gives me:
|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________|
|_____________|____________|_____________|
What I want is:
|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________,_____________,__________|
|_____________|____________,_____________|__________|
(| represent cell boundaries, , represents where a single cell crosses the layout cell boundaries.
What css can I use to get the desired td to expand to fill the horizontal space vacated by the hidden td elements?
There does not appear to be a way to do this using solely CSS. It seems that to accomplish what I want, the html structure has to be modified in one way or another.
I found two options:
Do a row by row modification of the table structure, removing hidden td elements and adding appropriate colspan attributes to the visible td elements
Place all of the "group1" and "group2" inputs in the same cell, with additional div structures that can be styled as table cells.
For the second option, e.g.
<table>
<tr>
<th>Type</th>
<th>Type Info</th>
</tr>
<tr class="typeA">
<td><input name="type[0]" /></td>
<td>
<div class="group1">
<input name="A[0]" />
</div>
<div class="group2">
<div>
<input name="B[0]" />
</div>
<div>
<input name="C[0]" class="staticSize" />
</div>
</div>
</td>
</tr>
<tr class="typeB">
<td><input name="type[1]" /></td>
<td>
<div class="group1">
<input name="A[1]" />
</div>
<div class="group2">
<div>
<input name="B[1]" />
</div>
<div>
<input name="C[1]" class="staticSize" />
</div>
</div>
</td>
</tr>
<tr class="typeC">
<td><input name="type[2]" /></td>
<td>
<div class="group1">
<input name="A[2]" />
</div>
<div class="group2">
<div>
<input name="B[2]" />
</div>
<div>
<input name="C[2]" class="staticSize" />
</div>
</div>
</td>
</tr>
</table>
For the second option css, something like the following:
table {
width:100%;
}
.typeA .group1, .typeA .group2 {
display:none;
}
.typeB .group2 {
display:none;
}
.typeC .group1 {
display:none;
}
.typeC div.group2 {
display:table;
border-collapse:collapse;
}
.typeC div.group2>div {
width:100%;
display:table-cell;
}
input:not(.staticSize) {
width:100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
Try
visibility: hidden;
That should keep it in the layout.
I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;