Your code is working fine. However if you have containter element like div or panel then ensure that you have provided enough width to the container control as well.
the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
your code is working fine but , here is need to one element which contains all the other element like as container so you can take a div and give inline style to fix a width or just copy paste your code in that div its working fine.
Contributor
2591 Points
2668 Posts
float left & float right within a <label> ignored
Nov 25, 2016 05:12 PM|wavemaster|LINK
I have a currency symbol and money value within a label
<label><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0:###}", @billingRate)</span></label>Hoping to get:
$ 10
$ 100
$ 1000
Instead I get:
$1
$100
$1000
Why is the float ignored?
All-Star
50831 Points
9895 Posts
Re: float left & float right within a <label> ignored
Nov 25, 2016 08:40 PM|A2H|LINK
Your code is working fine. However if you have containter element like div or panel then ensure that you have provided enough width to the container control as well.
Aje
My Blog | Dotnet Funda
Contributor
2591 Points
2668 Posts
Re: float left & float right within a <label> ignored
Nov 26, 2016 03:18 AM|wavemaster|LINK
The container is a bootstrap col 3, there should be plenty of space.
@foreach (var sname in shotsannual1) { <div class="row"> <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1"> @if (oldservices.Contains(@sname.id)) { <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" checked="checked" style="margin-right: 6px;margin-top: 15px;" /> } else { <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" style="margin-right: 6px;margin-top: 15px;" /> } </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <label for="@sname.id" style="margin-top: 15px; color:darkgray;"><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0,20:#,##0}", sname.billingRate)</span></label> </div> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"> <label for="@sname.id" style="margin-top: 15px; margin-right: 6px; color:darkgray;">@sname.Service.ServiceName (@sname.Service.shortForm)</label> </div> </div> }All-Star
15186 Points
3888 Posts
Re: float left & float right within a <label> ignored
Nov 26, 2016 06:06 AM|raju dasa|LINK
Hi,
You may find multiple solutions here: http://stackoverflow.com/questions/17938303/how-to-float-a-span-in-a-div
you may need to apply block rule and add clear fix at end.
rajudasa.blogspot.com || rajudasa-tech
All-Star
57874 Points
15512 Posts
Re: float left & float right within a <label> ignored
Nov 27, 2016 12:09 AM|bruce (sqlwork.com)|LINK
the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.
Contributor
2591 Points
2668 Posts
Re: float left & float right within a <label> ignored
Nov 27, 2016 01:19 AM|wavemaster|LINK
@bruce
What is the approach then to get
a check box
$ left align / value right align
an area for text?
Star
9831 Points
3120 Posts
Re: float left & float right within a <label> ignored
Dec 06, 2016 09:23 AM|Brando ZWZ|LINK
Hi wavemaster,
As bruce says, you could set the lable css style's display property to 'block', then the folat property will be worked well.
More details, you could refer to follow codes and image:
<div class="row"> <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1"> <input type="checkbox" id="aaa" name="shots" value="aaa" checked="checked" style="margin-right: 6px; margin-top: 15px;" /> <input type="checkbox" id="bbb" name="shots" value="bbb" style="margin-right: 6px; margin-top: 15px;" /> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <label for="aaaa" style="margin-top: 15px; display:block; color: darkgray;"><span style="float: left;">$</span> <span style="float: right;">100</span></label> </div> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"> <label for="bbbb" style="margin-top: 15px; display:block; margin-right: 6px; color: darkgray;">aaaaaaaaaaaaaaaaaa</label> </div> </div>Result:
Best Regards,
Brando
Contributor
2591 Points
2668 Posts
Re: float left & float right within a <label> ignored
Dec 08, 2016 02:57 AM|wavemaster|LINK
Thanks all!
Looking sweet.
None
0 Points
1 Post
Re: float left & float right within a <label> ignored
Dec 08, 2016 06:53 AM|punitpatel12|LINK
your code is working fine but , here is need to one element which contains all the other element like as container so you can take a div and give inline style to fix a width or just copy paste your code in that div its working fine.
https://jsfiddle.net/bft50r7d/2/
<div style="width:50px;">
<label >
<span style="float:left;">$</span>
<span style="float:right;">10</span>
</label>
</div>
iFour Technolab Pvt. Ltd.
http://www.ifourtechnolab.com