I have a button and on it I want to add two text labels whose font and size differ. I also want each text label to appear on its own line. For example, if my labels are ABCD and example, here's how I want them to appear on the button:
ABCD
example
Here is what I have tried. Is it possible to apply different styles to different parts of the value attribute?
<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">
You could use a button rather than an input and use two span tags inside. For example:
<button class="btn btn-primary" type="button">
<span style="font-size:14px;">ABCD</span>
<span style="font-size:10px;">example</span>
</button>
Live example at: http://jsfiddle.net/h6jq7ep2/
I've used inline styles just for simplicity, but obviously you could instead assign a class with the appropriate CSS to each span.
Try <button> element:
<button><span style="font-size:110%">ABCD</span> example</button>
It works about the same was as <input type="button">
you can not do this, you want to apply style on a part of the string, there is no simple way of doing this, you should use image instead. the is pure design purpose. just search online button image maker, you'll find a lot.
Related
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
Can't find the right words to explain so here's a code example:
<button class="btn btn-default">
<i class="glyphicon glyphicon-alert"></i>
<span>button</span>
</button>
<button class="btn btn-default">
<span>button</span>
<i class="glyphicon glyphicon-alert"></i>
</button>
Two buttons, one with a glyphicon at front, one with glyphicon at end
Now let's say we want to add more of a gap between the word and icon:
.btn {
> .glyphicon:first-child {
margin-right: 15px;
}
> .glyphicon:last-child {
margin-left: 15px;
}
}
Works nicely like so: http://codepen.io/anon/pen/wzxRPw
My question... How would this be done without the extra span around the words?
If I remove the span then the glyphicon is the only element, so it's treated as both the first and the last
Edit: Note: My intention in the question is to find out how/if this can be done without adding an extra class, and without the span tag.
I'm aware that maybe the ideal solution is to keep the spans or add a class, I just thought perhaps there was a way to do this in CSS that I had no knowledge of (I'm still learning)
I feel like you're trying to eliminate code that really doesn't need to be eliminated (that's just my opinion). No matter what you do, if you don't wrap the text in a span tag or something of that nature, there's only going to be 1 child element of the actual <button>. Meaning, you won't be able to target anything other than that element without explicitly setting a class or inline styles. The span tags are a great solution, but if you insist on getting rid of them you have a couple of other options (however, I think the span tag is the best):
Create a CSS class that defines margin offset and set that to the according button. So, you'd set a class like .margin-left to one and .margin-right to the other
You can write inline styles for each of the glyphicons.
Like I said above, I think you have the best solution of your options. I don't think there is anything else you can do.
The only reasonable solution without span is to add a class:
<button class="btn btn-default icon-on-left">
<i class="glyphicon glyphicon-alert"></i>
button
</button>
<button class="btn btn-default icon-on-right">
button
<i class="glyphicon glyphicon-alert"></i>
</button>
and style it appropriately. But that creates maintainability issue: while changing content of the button you need to change its class in sync.
I'm not clear what you exactly want to get as the result, still ill tell u some ideas you have to decide whether it suits ur need or not.
If you can you can add between glyphicon and the span
If you remove only span tag then you can set respective margins for span tag instead of glyphicon
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview
What are the rules of using a_tag, div_tag and button_tag as button in HTML?
I am a Ruby on Rails user. Rails default gives input_tag and button_tag as button. What are the advantages of using other tags beside button_tag itself? When should I use each one?
Thanks in advance.
Without introducing any attributes, there is one HTML button element:
<button></button>
There is also a generic form input element which can be set to render as a button:
<input />
Both of these elements accept three button-type attributes which let user agents determine their behaviour (as buttons):
<button type="button">Regular button</button>
<input type="button" value="Regular button" />
<button type="submit">Form submit button</button>
<input type="submit" value="Form submit button" />
<button type="reset">Form reset button</button>
<input type="reset" value="Form reset button" />
These two elements behave identically when these attributes are set. The main difference between the two elements is that the button element can contain HTML whereas an input element may only contain text passed in through its value attribute (see <button> vs. <input type="button" />. Which to use?):
<button type="button">
<span>This is perfectly valid</span>
</button>
<input type="button" value="No HTML permitted here" />
(As a side note, a button element accepts any phrasing content descendant which isn't interactive content (another button or a checkbox, for example).
However, from an accessibility perspective any HTML element which accepts a role attribute can be turned into a button simply by declaring role="button":
<a role="button"></a>
<div role="button"></div>
<span role="button"></span>
...
These are all perfectly valid, and complying user agents will treat all of these as buttons.
How you use them depends entirely on the context. If your button is within a form, you're going to want to use an input element; if your button is standalone on your page, you're going to want to use a button element; if your button is found within a list of hyperlinks, you may as well just use an a element with a role of "button", but you could just use button here as well if you wanted to. Bear in mind that the type attribute's submit, reset and button values are only valid on button and input elements and will have no effect when added to any other element with a "button" role.
Having a slight CSS issue with my buttons in this CodePen.
The first one seems to be spacing my buttons, and I'm not sure why. However if you click on the + button to add more tables, the weird spacing is gone, and it follows my input type button margin style.
How can I fix this?
Because whitespace matters, basically, as you deal with inline elements. The <input>s in the source code are separated by whitespace; the ones injected (by JS) aren't.
There are various solutions to this, most of them listed in this question (I'd suggest checking them all instead of just the accepted one). Those, in turn, can be grouped into...
1) 'tag clash', removing whitespace in between elements. It can be done like this...
<input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />
... or like this...
<input type="button" class="some_class" /><!--
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />
2) 'style collapse' - leaving whitespace in place, but making it invisible. In absense of the simple solution, usually this involves creating some container around those inline elements, and setting its font-size and line-height to 0.
The downside of this approach is that you'll have to restore these properties for the elements inside that container.
3) 'floating' - turning all the inline elements into blocks, applying 'float' style to them. This way the whitespace will go away visually too.
I have a better solution.
just add a 'font-size:0' to the parent tag '' and then add 'font-size:13px' to the input buttons (to class '.togPTbutton').
i just tried the above on your code and its working.