I have a textarea named(not the attribute of textarea;but its name ) Summery . But the name appears at bottom ,and I want it to display in the mid or top . HOw can I achieve this ?
<div class="edit_i">Pitch Summery :<textarea>{$k->pitch_summery}</textarea></div>
Are you referring to the "Pitch Summery" text?
make sure that the div has vertical-align:top; css property
.edit_i textarea{
vertical-align:top;
}
http://jsfiddle.net/TrdbC/1/
Just a quick example.
<style>
.label {
display: block;
}
</style>
<label for='textarea' class='label'>Pitch Summery</label>
<textarea value="{$k->pitch_summery}" id='textarea'></textarea>
Related
The calendar dropdown in DatePicker is taking the font size of the document rather than the div inside which the DatePicker resides. How do we fix this?
We don't want to apply the font size manually on the Calendar, because our solution is customizable and we want to allow other widgets with dropdowns as well and so we cannot forsee all dropdowns that might be shown.
#datepickerParent
{
font-size:100px;
}
body
{
font-size:15px;
}
<div id="datepickerParent">
<input type="text" id="datepicker" />
</div>
<input type="text" id="dateInput" />
$(function () {
$("#datepicker").datepicker();
$("#dateInput").datepicker();
})
the calendar always takes 15px as its font-size.
Here is the jsfiddle
Apply style to the ui-datepicker class or ui-widget class
.ui-datepicker{
font-size:10px;
}
Fiddle Demo
I think you can use the following code:
.ui-state-default
{
font-size:10px !important;
}
I have the following html inside my asp.net mvc web application:-
<form class="customSearch"method="GET" action="#Url.Action("Search", "Home")">
<input class="searchInput push-up-button" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text"/><input type="submit" value="Search" class="btn"/>
</form>
The result will be as follow,
where the search button and the text field have different height. So how I can force both elements to be on the same horizontal alignment ?
Thanks
First at all reset all values for both input :
input {
margin:0;
padding:0;
border:0;
}
Then set an equal height , line-height , vertical-align and box-sizing:
input {
height:30px;
line-height:30px;
vertical-align:middle;
box-sizing:border-box;
}
After that you can personalize each one with lateral padding and color for background and text.
The demo http://jsfiddle.net/3TeHT/6/
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
I have a div called image. It has a CSS-property visibility:hidden;. I have another button called button.
What I need is when I hover the button, the image changes to visibility:visible;.
Can I do it with CSS or do I have to use JavaScript?
yes you can do this
as like this
HTML
<label for="button">Click here</label>
<input type="checkbox" id="button">
<div class="one">Show my div</div>
Css
label{
background:green;
padding:10px;
}
.one{
width:100px;
display:none;
height:100px;
background:red;
margin-top:20px;
}
input[type="checkbox"]{
visibility:hidden;
}
input[type="checkbox"]:checked ~ .one{
display:block;
}
Live demo
Updated answer
if you want to just hover than check to this *Demo*
Note that this is a javascript / jQuery solution:
$(button).hover(function() {
$('div#image').attr('visibility', 'visible');
}, function() {
$('div#image').attr('visibility', 'hidden');
});
You can only do this if the div is a child of the button - which isn't possible.
It's possible if you make it a child of something else (i.e. not a button, do it differently).
However, what browser? All the main ones? Because if you are willing to use only the most modern it's possible by using sibling selectors.
But for mainstream usage you can only do it if the div is a child of the hover element. Note: You can hover anything, it doesn't have to be a button or a link <a>. So that's what I would do - make a div element that looks like a button, and has a child that you want to change.
You need javascript for that. You can use css if your div is parent for the button, but in your case this is not possible
JS
function changeVisibility(objID) {
var el = document.getElementById(objID);
if(el.style.visibility == 'hidden') {
el.style.visibility = 'visible';
return true;
}
el.style.visibility = 'hidden';
}
HTML
<div id="box">Something to show</div>
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />
Here is a little css problem
The code:
printf( '<div id="replyto">Reply to</div>
<a class="replytolink" href="%1$s">%2$s %3$s</a>',
$parent_link, $parent->comment_author, $parent->comment_date );
The css:
#replyto {
float: left;
}
.replytolink {
float: left;
}
is output
Reply to"Comment author Date"
How can I output it
Reply to "Comment author Date"
with correct spacing between text and link?
From a semantic point of view, using a floating div followed by an anchor isn't the best choice possible of tags in this case.
Personally, I would replace that div with a span, then you wouldn't need to float them, and so word spacing would work as usual..
Try this:
.replytolink {
padding-left:5px;
float: left;
}
Example: http://jsfiddle.net/RTFb7/
Add a padding-right to #replyto:
#replyto {
float: left;
padding-right:5px;
}
Add a space?
printf( '<div id="replyto">Reply to </div><a class="replytolink" href="%1$s">%2$s %3$s</a>', $parent_link, $parent->comment_author, $parent->comment_date );
Or add padding-right: 2em on #replyto.
Solution by Lucius:
printf( '<span>reply to %2$s %3$s</span>', $parent_link, $parent->comment_author, $parent->comment_date );
Neat. No CSS is required. Give the <span> tag an ID if needed. The extra blank space after "reply to " is now output.