I want to show html string as table like this ;
but when I use the html package in flutter , it couldn't display ,
this is what I see in flutter ;
here is the string that I want to display =>
"<table id='ParametersTable' style='width:100%'><thead><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><label class='col-form-label'>Employee</label></td><td colspan='8' style='padding: 2px 10px 2px 10px; width: 66.66666666666666%'>1003 - Abdulsamed Demirtop</td></tr></thead><tbody class='parambody'><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1030' name ='1030' value='1030' hidden /><label class='col-form-label'>Id</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>4</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1032' name ='1032' value='1032' hidden /><label class='col-form-label'>FromDate</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>25/Dec/2022 11:30 AM</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1033' name ='1033' value='1033' hidden /><label class='col-form-label'>EndDate</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>28/Dec/2022 11:30 PM</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1034' name ='1034' value='1034' hidden /><label class='col-form-label'>Country</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>Turkiye</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1035' name ='1035' value='1035' hidden /><label class='col-form-label'>City</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>Ankara</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1036' name ='1036' value='1036' hidden /><label class='col-form-label'>Type</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>Flight</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%'><input id='1037' name ='1037' value='1037' hidden /><label class='col-form-label'>Purpose</label></td><td colspan='7' style='padding: 2px 10px 2px 10px; width: 58.333333333333336%'>Meeting</td><td colspan='1' style='padding: 2px 0px 2px 0px; width: 8.333333333333332%'></td></tr></tbody><tfoot><tr><td colspan='4' style='padding: 2px 10px 2px 10px; width: 33.33333333333333%; white-space: nowrap'><label class='col-form-label'>Notes</label></td><td colspan='8' style='padding: 2px 10px 2px 10px; width: 66.66666666666666%'><input id='notes' name='notes' autocomplete='off' style='width: 100%' class='form-control' /></td></tr></tfoot></table>"
You can use flutter_html
for example:
Html(
data: 'Replace your content here',
style: <String, Style>{
//TODO put here your style
},
)
Related
I'm having trouble with a box shadow on hover and table <TD> background.
Here is a fiddle
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
How can I make tr box shadow on hover and save custom backgrounds on td?
Use background color with alpha channel.
background-color: rgba(226, 226, 226, 0.3)
You need to set a z-index for the td that allows the shadow to show on it and not under it
.table-z tr{
height: 50px;
text-align: center;
font-size: 16px;
position: relative;
}
.table-z td {
z-index: -1;
position: relative;
}
.table-z{
margin-top: 10px;
margin-left: 10px;
width: 100%;
}
.w6{
padding-left: 2%;
width: 6%;
background: yellow;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w7{
width: 7%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w10{
width: 10%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w17{
width: 17%;
background: yellow;
border-right: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w16{
width: 16%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w22{
width: 22%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
td.last{
text-align: right;
padding-right: 35px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
.table-z{
border-collapse: collapse
}
.table-z tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
.table-z tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
.le{
margin-left: 10px;
width: 240px;
}
table {
border-collapse: collapse;
border-radius: 5px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #e1e1e1; /* this draws the table border */
}
.table-z tr:hover {
box-shadow: 0px 0px 12px 5px red;
cursor: pointer;
}
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
simply change your tr to td for the hover
.table-z TD:hover {
-webkit-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
-moz-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
cursor: pointer;
}
I have to buttons "YES" and "NO" as shown in below images
For YES
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn cursor-pointer padding-left-1em padding-right-1em" value="YES">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258;
background: #15DB00;
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
For NO
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn padding-left-1em padding-right-1em" style="background-color: red; color: white;" value="NO">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258; // Overridden for no
background: #15DB00; // Overridden for no
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
Problem: Text NO is more bold then text YES. I have no idea why this happens ?
P.S: Padding and margin classes are just for padding and margins nothing else.
I am trying to send a automated report mail with following table, but the width of the columns is far to small for the description fields and I have no idea why this is not adjusting.
I have already tried
width: auto;
width: px;
width: &;
width: 1px;
white-space: nowrap;
Table:
<h1>E-48<h1>
<table stlye='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; border-collapse: collapse;
white-space: nowrap; table-layout:fixed;'><tr>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'></td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Spinner temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Front bearing temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade A temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rotor temperature 1</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rotor temperature 2</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Stator temperature 1</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Stator temperature 2</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle ambient temperatur</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rear bearing temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier 1 heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier 2 heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Excitation heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Ambient temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Tower temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Control cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Transformer temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 1 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 2 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade A temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 3 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade A temperature</td>
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
"Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided."
Your first table row is empty.
Add a width to your table. <table width="100%"...
My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/
I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>
Here's what it looks like in Firefox:
What is looks like in Chrome:
Here are the CSS rules I'm using:
<div class="checkbox-field">
<p>Mr.</p>
<input type="radio" name="prefix" value="mr" />
<p>Mrs.</p>
<input type="radio" name="prefix" value="mrs" />
</div>
.checkbox-field input {
float: left;
margin-right: 46px;
border: 1px solid #A97232;
padding: 3px;
width: 22px;
-webkit-box-shadow: 0 1px 3px -1px black;
-moz-box-shadow: 0 1px 3px -1px black;
box-shadow: 0 1px 3px -1px black;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
color: #636363;
behavior: url(/Public/stylesheets/PIE.htc);
margin-top: 5px;
}
JSFiddle example here:
http://jsfiddle.net/zFNRy/
Please normalize your styles: http://necolas.github.com/normalize.css/