This is not working as expected:
<!-- {{>io_cmd_button}} -->
{{#if (button.type === 'output')}}
{{#button.pins}}
<div style="width: 40%; margin: 10px; border: 1px solid yellowgreen; padding: 20px">
<p> RPi led: <input id='rpi-command-{{button.type}}' type="checkbox" value="{{.}}" />
</div>
{{/button.pins}}
{{else}}
<h3> this is input pin, only status will be shown </h3>
{{/if}}
<!-- {{/io_cmd_button}} -->
By negating the condition and swap the bodies of if/else blocks, the same logic remains, the code becomes as follows and works as expected:
<!-- {{>io_cmd_button}} -->
{{#if (button.type !== 'output')}}
<h3> this is input pin, only status will be shown </h3>
{{else}}
{{#button.pins}}
<div style="width: 40%; margin: 10px; border: 1px solid yellowgreen; padding: 20px">
<p> RPi led: <input id='rpi-command-{{button.type}}' type="checkbox" value="{{.}}" />
</div>
{{/button.pins}}
{{/if}}
<!-- {{/io_cmd_button}} -->
Why? What is different?
As answered here, I was missing the closing tag of p. Fixing html solved the issue. We are now looking forward to have better error messages of Ractive.
Related
HTML:
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label>
<input type="text" class="form-control" id="validationCustom03" value="Describe service you need" required>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
CSS
#validationCustom03{
height: 100px;
}
input[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
Hello guys, I am trying to stylize the value of form - text input, but the only one thing I can reach is red color. My purpose is to remove break line before and after the text, to make is from the very first line in the input, please check out the picture. Thank you for your time and wisdom !
I think you should use a <textarea> form attribute instead of an <input> element. Here's an example:
#validationCustom03{
height: 100px;
}
textarea[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label><br>
<textarea rows="4" cols="50" name="comment" class="form-control" id="validationCustom03" form="usrform" value="Describe service you need" required>
Enter text here...</textarea>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
you don't have a break-line here. it is just because the height of the input field is much bigger than the size of the font.
I know there's a ton of similar questions about this on here, but none seem to address the issue for me.
css code:
/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}
div.DeferredPaymentPopup input.RefreshImage {
background-image: url(../Images/Refresh-icon.png);
background-position: left top;
display: inline-block;
float: left;
width: 15px;
height: 18px;
}
Code on page -
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
There's a number of nested divs on the page, and a couple of them have their own IDs - I included one of them for illustration.
No issues in IE or Edge.
All looks well on inspect in Chrome:
Thoughts?
You can use src attribute of input[type=image]
<input type="image" src="../Images/Refresh-icon.png" />
Clarification for the questions from comments:
For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.
However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.
But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].
I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].
As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.
This is a small experiment that shows how it works
<p><strong>input type="image"</strong></p>
<p>Without src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<br />
<br />
<p><strong>img</strong></p>
<p>Without src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With empty src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src />
<p>With invalid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
Edit
Is this what you intend to achieve? Instead of input type="image" , I used text
div.DeferredPaymentPopup {}
div.DeferredPaymentPopup input.RefreshImage {
background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
display: inline-block;
float: left;
width: 100px;
height: 18px;
}
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
</div>
</div>
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}
/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}
h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6">Home</b></td></tr>
<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
Menu<br>
<br></br>
Delivery<br>
<br></br>
Testimonials<br>
<br></br>
Contact information<br>
</td>
<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>
<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>
<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>
<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>
Hey, so after I've finally got something going I've gone to place a google map (not fully implemented yet), just trying to get the right placement for it. It seems tho I can't get the google map to move to the bottom of the page where I'd like it? Or even how do I get the image to move? It seems to have gone above the border at the top, this is really poor positioning and I have to move it to the bottom. Any help to whats going wrong here would be greatly appreciated!
use the following:
<tr><td><div id="map-canvas"></div></td></tr>
at the end of your page, instead of:
<div id="map-canvas"></div>
it will place your map at the bottom of the page, it was at the top because you didn't assign a <tr> and <td> to it
good luck coding! ^^
edit: http://jsfiddle.net/h261cgc9/ Here's a fiddle to see the change i've made in action
But as I've mentioned in my comment, it's much better to create a website without the use of tables, only use tables when you actually want to put something in one, putting a whole body in the table is a bad idea, see: http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/
In the fiddle I removed the which contained the styles, as there is no need for it, you could just put the styles at the top of the page in between the <head> and <body>
I have narrowed down the culprit to either a SPAN or a DIV in lines 27-33 but cant quite get it... if i remove the span that makes the font below the press muted, it fixes the spacing issue at the top of the page but makes that text way to large
u.neighborrow.com/items/indexb
<div id="slide_one" class="bg"><!--slide #1-->
<div class="slide-content">
<div class="nhome">
<div style="margin-top:22px;color:#000;font-size:30px;margin-left:200px;width:408px">
The cheaper, greener, easier, better way to have stuff.
<span style="font-size: 13px; position: relative; top: -2px"> <br /></span>
<?php echo $form->create('Item', array('controller' => 'items', 'action' => 'recent/2')); ?>
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
<div style="font-size: 13px; position: relative; top: -2px; line-height: 1.4em;"> <strong>Search Tips:</strong> Need a camera or a book for a trip? Want to try an iPAD before you buy it? Need a tool for a project or a tent for an event? <br />
Borrow these things from your neighbors, The <i>owner</i>-ship has SAILED!</div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px">Still not sure what to borrow? <br />
Browse the borrowables or <br />
Lend something safely and securely<br />
</span>
<div>
<div style="padding:5px;text-align:center"><img src="/images/press_wide.jpg"></div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px"> The media adores us, our users love us,our friends <i>like us</i>,
<center><iframe src="http://www.facebook.com/plugins/like.php?href=www.neighborrow.com&layout=standard&show_faces=false&width=350&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height: 30px; text-align: center;margin-top:0px;"></iframe></center>
(oh yeah, and mother earth has a crush on us:)</div></span>
<hr color="#CCC" />
</div>
</div>
</div>
</div>
</div>
and i know i need to get rid of the inline styles:)
got some crazy margins:
<div class="main-content" style="margin-top:200px">
It's in div class="main content" style="margin-top: 200px"> It seems to be inline on line 325