I don't know the rendered width of DIV or any of the buttons. How do I change the markup such that the buttons are rendered with a uniform (or as close as can be) distance between each of them?
EDIT: Also, the buttons should consume the full width of the DIV.
<div>
<asp:Button ID="Button1" runat="server" Text="Action1" />
<!-- space between rendered buttons -->
<asp:Button ID="Button2" runat="server" Text="Action2" />
<!-- space between rendered buttons -->
<asp:Button ID="Button3" runat="server" Text="Action3" />
<!-- space between rendered buttons -->
<asp:Button ID="Button4" runat="server" Text="Action4" />
</div>
I am thinking this can't be done without a table, JavaScript or the use of at least some (relative) widths (if you can set percentages, it's easy.).
Or maybe putting each button into a div with display: table-cell, but I find that sick. Then rather be honest and use a table.
Feel free to prove me wrong, I'd be interested in alternative approaches myself.
Related
I have the following code to display text on a generic button: https://jsfiddle.net/6ogo4bqr/
<input id="Button1" type="button" value="Log In" class="btn1" />
<br />
<input id="Button2" type="button" value="Log In" class="btn2" />
<br />
<div id="Button3" class="btn3">Log In</div>
It works fine on Firefox but on an iPad the button text appears more towards the top of the button (though it's OK when it uses Helvetica or Arial):
How can I get the text to align vertically on iOS (BTW I couldn't get JSFiddle to use #font-face)?
Try and remove the top and bottom padding of the text and adding a line-height instead.
#selector{
/*set both top and bottom padding with same values */
padding-top: 20px;
padding-bottom: 20px;
}
I eventually found that the particular font file I used was corrupt. It all worked ok when I replaced the file.
<li><span>Test:</span>
<asp:Label style="float:right;padding-right:5px"
runat="server"
ID="lblTest">
</asp:Label></li>
I have a span and a label(I am aware its also rendered as span), somehow the static span's text is fine but the label's text falls down in the Li element....down to the bottom.
I have tried vertical align and text align, top:0, but no luck to have them in a straight line
Try this it works for me
<li>
<span>Test:</span>
<asp:Label style="padding-right:5px;display:inline;" runat="server" ID="lblTest"></asp:Label>
</li>
<li>
<span>Test:</span>
<asp:Label style="display:inline-block;" runat="server" ID="lblTest">hi</asp:Label>
</li>
Change your style to this:
style="display:inline-block;"
It displays the block as below
Working Fiddle
I am trying to have an icon display right after the textbox, left edge of image abutting right edge of textbox. I cant get it to happen. The image is always low and offset to the right. Im certain bootstrap is having something to do with this but Ive tried turning off almost all the css in dev tools but it still wont display right after the texbox.
Here is the code, I even wrapped it in a span hoping to force it in one line. The bootstrap classes start the textbox where I want it, I just simply want the icon directly next to the textbox.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
<div class="col-md-10">
<span class="imageinline">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control" Width="300" MaxLength="20" ClientIDMode="Static" /><asp:Image ID="ccImage" runat="server" ClientIDMode="Static" ImageUrl="~/Images/CC Icons/amex_small.png"/></span>
</div>
</div>
Here is the css
span.imageinline img {
display: inline !important;
margin-left: 2px;
}
In order for the controls to display horizontally in bootstrap, the form-inline class from bootstrap must be used, without any additional css of your own, as shown below
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbCCNum" CssClass="col-md-2 control-label">Credit Card No.</asp:Label>
**<div class="form-inline">**
<div class="col-md-10">
<asp:TextBox runat="server" ID="tbCCNum" CssClass="form-control"
Width="300" MaxLength="20" ClientIDMode="Static" TabIndex="8"/>
<asp:Image ID="ccImage" runat="server" ClientIDMode="Static"
ImageUrl="~/Images/CC Icons/amex_small.png"/>
</div>
</div>
</div>
Ok so here's my problem, i have 3 buttons that work on both pc and mobile phones, but 1 major difference, on mobile devices the button shrinks by 50% and magically gets round corners. (ignore the fact that the top image has a check and the bottom has a plus sign, they do the same exact thing)
<button type="button" onClick="parent.location='../index.php'" title="Back to Main Menu">
<img src="../../css/images/back_25.png" />
</button>
<button type="reset" title="Reset">
<img src="../../css/images/restart_25.png" />
</button>
<button type="submit" title="Done">
<img src="../../css/images/plus_25.png" />
</button>
<input type="hidden" value="submit" name="submit" />
is there a quick fix to this problem? Once again both sets of buttons work properly, just look different.
As requested: i've also tried this code.
<button type="reset" style="width:49px; height:33px;">
<img src="../../css/images/restart_25.png" width="25" height="25" />
</button>
it's the same thing. i've also tried to set to style="width:50px; height:50px, and the button becomes a full circle.
Well, i really don't see anyone going to have an answer to my problem, so i just started messing with the height and width on the buttons a little more and got kinda of lucky to land on a middle ground on both browsers.
<button type="reset" title='Reset' style='height:33px; width:50px'>
<img src="../../css/images/restart_25.png" />
</button>
This seemed to be the sweet spot for my specific situation. because the pc broswer side was not effected and the iphone/safari side is acceptable to see the icons.
I've been wondering if there is any technique to use HTML/CSS like Flex/MXML. I mean, in MXML the HBox, VBox and Spacer are globally used, and their behavior is predictable. But in HTML/CSS we use a lot of float and it always have some 'hidden surprises'.
With Flex/MXML I would do:
<hbox width="100%">
<button label="Button A" />
<spacer width="100%" />
<button label="Button B" />
<button label="Button C" />
</hbox>
If you don't know flex I explain this code: the HBox places every element inside it side by side, and the Spacer is an invisible element; the spacer with 100% does not have the same width as the parent (HBox) but it fills the remaining space; this means that A will be aligned to the left, and the two other to the right.
Now in HTML/CSS I would make buttons B and C float to the right. I also would have to reverse the order of the buttons to the final result be the same. Besides, I probably would put some blank tag with "clear:both" to ensure that nothing below will be messed up.
So, is there any technique to obtain the same functionality in HTML/CSS? That would be fantastic if we could make .HBox .VBox .Spacer CSS classes and without javascript.
thanks in advance.
I do something similar to this using the following kind of markup
<div class="formline"><!-- kind of like your hbox -->
<div class="buttongroup" id="group1">
<button label="Button A"> <!-- of course, that's usually input type="submit" or something. -->
</div>
<div class="buttongroup" id="group2">
<button label="Button B">
<button label="Button C">
</div>
</div>
Then use CSS to style it.
I'd float group1 to the left, float group2 to the right. The enclosing formline contains the floating within it. The buttons appear in the correct order, I don't have to reverse them.
This is all logical/structural markup and can be styled different ways; it's not there just for presentation.
I use sensible names depending on what I'm doing, not things like "group1", "group2".
You could give your top level div a class named hbox and target its sub items. Example: http://jsfiddle.net/soparrissays/WJ2Lk/4/
html:
<div class="hbox">
<input type="button" value="Button A" class="left-button" />
<input type="button" value="Button C" />
<input type="button" value="Button B" />
<div class="clear"></div>
</div>
style:
.hbox {
margin-top:45px;
}
.hbox input {
float: right;
}
.hbox .left-button{
float:left;
}
.clear{
clear:both;
}
Is this what you are looking for?