I'm getting pretty rusty in html/css and I introduced a problem in my web application when I created a new control on the left side.
<div id="leftnav">
<ul><li class="saveAndExit"><a class="noflag" href="" onclick="">Save and Exit</a></li></ul>
<span id=""><ul><div><li><a id="" class="noflag" href="btn0','')" onclick="javascript:keepDirtyFlag();undefined">Introduction</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Details</a></li></div><div><li><a id="" class="noflag" href=")" onclick="javascript:keepDirtyFlag();undefined">Applicant Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="j">Applicant details – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Applicant contact person – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Trustees</a><a onclick="" class="noflag arrow"></a><ul style="display:none"><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Record 1</a></li><li><a id="" class="noflag" href="" onclick="">Record 2</a></li></ul></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Review</a></li></div></ul></span>
</div>
The problem is, that I have a fieldset with fields inside with the following template
<div class="field-container"><div class="field-label"><label for="_Name_txt" id="mCtrl0_Name_txt_fieldLabel" accesskey="M">Na<u>m</u>e<span class="field-asterisk"><acronym title="Required">*</acronym></span></label><em></em></div><div class="field-control"><div class="field-wrapper-passive"><input name="ormCtrl0$Name_txt" type="text" id="mCtrl0_Name_txt" dtext="" class="field-text-idle"></div><div class="field-error-passive"><span id="mCtrl0_ctl06" style="color:Red;display:none;">A name is required</span><span id="mCtrl0_ctl07" style="color:Red;display:none;">The Name must not exceed 200 characters</span></div></div><div class="field-clear"></div></div>
Which were displayed correctly since the I added the new leftnav control but now, the "field-clear" class
.field-clear {
clear: left;
line-height: 1px;
font-size: 1px;
height: 1px;
}
clears the navigation list on the left side and creates a huge gap between the first field and the other fields inside my form. How can I solve this?
EDIT : JSFIDDLE http://jsfiddle.net/vS8jt/2/embedded/result/
This was resolved by floating the main container and then adding a new div that clears it at the bottom of the page.
Related
<div class="form-group col-sm-5">
#Html.LabelFor(m => m.foo)
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
The <a> element (i.e. the glyphicon popover) appears beneath the label element, but I'd like to have it placed to the right side of the label instead. Is there a way to accomplish this by way of nesting the <a> inside of the #Html.LabelFor? It'd be cool to have something like:
<label for="foo"> I'm the label!
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</label>
If not, will I have to use positioning instead?
EDIT: I ended up taking Ramo's advice and rolling with something simple.
<div class="form-group col-sm-5">
<label>
<span> I'm a **hard-coded** LabelFor DataAnnotation! </span>
<a data-toggle="popover" data-content="I'm a popover!" href="#">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</label>
</div>
Still interested if there's an MVC way to get Glyphicons to cohere with #Html.LabelFor, but my question is more or less academic at this point.
EDIT #2: I found an even easier solution which is kind of obvious in hindsight. This approach uses positioning (i.e. display: inline) to ensure that the accompanying <a> and <span> elements display on the same line.
<div class="col-sm-5 form-group">
#Html.LabelFor(m => m.foo, new { style = "display: inline;" })
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
You could use a table and do something like this
<table>
<tr>
<td>#Html.LabelFor(m => m.foo)</td>
<td><a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
</table>
EDIT:
A quick google search brought me to this result which uses CSS to accomplish your goal Label and text box on the same line using css
EDIT 2:
Since you are weary of using tables you might be able to do something like this. I have not tested the code yet, but I do believe it should give you your desired behavior.
HTML:
<div>
<div class="Label">#Html.LabelFor(m => m.foo)</div>
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
CSS:
.Label{
display: inline-block;
}
I suggest you go ahead with positioning. Do not take unusual choices here use everything for what is supposed to be used because otherwise you will notice unusual behavior of your code in future.
Try this:
#{
var foo = Html.LabelFor(m => m.foo)
}
<a>#foo</a>
I have the below HTML. I want to fix the position of the "View All" anchor tag at a particular position. Instead the anchor tag moves as the value in the dropdown changes (i.e according to the length of the changed value in dropdown).
<div class="row " style="margin-left:75pt;">
<div class="dropdown" style="width:300px;display:inline;">
<label class="text-center" id ="categories" style="margin-top:10pt;font-size:14pt;"> Deals on</label>
<button data-toggle="dropdown" class=" btn dropdown-toggle dropdown-menu-hover-color text-center" style="padding:0px 0px;background-color:white;" href="#"><label style="font-size:14pt; color: #191970;" >{{currentCategory}}</label> <b class="caret"></b></button>
<ul class="dropdown-menu submenu-hover-color dropdown-menu-scroll" style="margin:0;">
<li>
{{page.category_name}}
</li>
</ul>
</div>
<div style="display:inline;" ng-show="deals"> View All</div>
<div style="display:inline;" ng-hide="deals"> <label class="text-center" style="margin-top:10pt;font-size:12pt;color: #909090;;">No deals found, please select a different category. </label></div>
</div>
Any pointers on how to achieve this.
Thanks in advance.
try using following html:
<div style="display:inline; position: fixed; top: 100px;" ng-show="deals"> View All</div>
Set the 'top' value as per your need. I think it should help you.
I have the following code.
I cannot understand why after the image (videoCmera_icon.png) it puts and underscore.
I find that this happens only when I have
style="display:inline;
Here is the code:
<div id='HomeVideo1' style="display:inline;">
<a href="#">
<img src="images/videoCamera_icon.png" border="0">
</a>
<a href="#" style="text-decoration: none">
<span class="text3">View Video</span>
</a>
</div>
Inline elements will respect whitespace between their child elements. So the whitespace between the <img> and the closing </a> tag shows up as a space (with an underline because it's part of a link).
Removing the whitespace between the <img> and its <a> tags helps:
<div id='HomeVideo1' style="display:inline;">
<img src="images/videoCamera_icon.png" border="0" />
<span class="text3">View Video</span>
</div>
http://jsfiddle.net/5abbx/
code below renders search form in below logo:
LOGO IMAGE
Logon or register
Search:
How to chage it so that Login/Search is rendered after logo in same row:
Logon or register
LOGO IMAGE
Search:
site.master contains:
<div id="header" style="margin: 0; background-color: white; width: 100%">
<a href="http://mysite.com">
<img alt='' style='width:30%' src='/Store/Logo' />
</a>
<div >
<p class="accBoxUnloggedOther">
Logon
or <a href="/register">
Register</a></p>
<br />
<form action="/Store/Search" style="margin:0">
<input class="searchfield" id="Search" />
<input class="button blue bigrounded" type="submit" value="Search... " />
</form>
</div>
....
Use style="float:right;" on the inner div. But you should try to avoid using inline CSS. It leads to a maintenance nightmare.
jsFiddle
You could also put the elements you want in the same line in a <div> tag and the image in another <div>
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>