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.
Related
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 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.
I'm using jQuery Mobile (jQM) and Knockout.js (ko) to develop an application. In this application, I need to generate a variable number of buttons that are defined by a constantly updating web service.
So, in my markup, I have:
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
buttonLabels is a list of short strings returned from the web service. It's defined as:
self.buttonLabels = ko.observableArray();
This all works fine when the buttons are not "jQM styled". However, when I style them using:
$("#answerPage-buttons").trigger("create");
problems arise during the update.
The issue seems to be that jQM wraps the buttons in a div (with a sibling span) to make them all nice and mobile looking. However, when the ko applies the updates via the bindings, it only removes the tags, leaving the surrounding stuff, and adds new button tags - which are then also styled by the jQM trigger call.
So, I end up with an ever-growing list of buttons - with only the last set being operational (as the previous ones are gutted by the removal of their button element, but all the styling remains).
I've managed to address this, I think, by placing the following call immediately after the observable is updated:
$("#answerPage-buttons div.ui-btn").remove();
However, my feeling is that there's probably a better approach. Is there?
I found a solution.
If I surround the buttons with a div, it seems to work - e.g.
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<div>
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
</div>
I'm guessing this is because the markup added by jQM remains "inside" the markup replicated by ko. Without the div, jQM wraps the button tag, which was the immediate child of the tag that contains the ko foreach binding.
Above is a Form. There are different methods to get the following form above, with the input and text seperated on different lines.
One is to use < br / > and another use fieldset, p-tag, etc.
But I am wondering what the proper way is to seperate the form different things in different lines?
The easiest way is simply:
label, input {
display: block;
}
Edited to add the content of a comment made below, from myself to the OP, since it seems pertinent to the answer:
The 'best' is a very subjective measure. The 'best' is simply the easiest way to achieve your end-result, ideally without mangling the semantics of the HTML. Using div elements in forms gives no meaning to the contained elements, or their relationship to each other.
Using a fieldset gives some idea of the relationship, but typically (possibly should, but I'm unsure) is used to group elements together, rather than simply style them. I'd argue my method is 'best' simply because it relies on no additional (meaningful or meaningless) HTML elements being added to the page.
There are no fast rules. HTML5 seems to favor using the p element, see its example on it. By old HTML specifications, p means a paragraph, but HTML5 defines a paragrapg as virtually any block of inline content.
In practice, it is best to select the markup according to the desired default rendering. If you prefer no vertical spacing, use br or div (in the latter, you would wrap each line in a div element, making it easier to style it if desired). If you prefer spacing (empty lines), use p. Using a table is one possibility but unnecessarily complicated in a simple case like this.
Using <br/> tags to control layout is not recommended. This tag should only use to break a line in a paragraph. Using it for layout purposes is lazy and bad practice.
The best way to create forms in general like the above is to use a <ul> list.
<form>
<ul>
<li>
<label for="firstname">Name</label>
<input name="firstname" type="text" />
</li>
<li>
<label for="surname">Surname</label>
<input name="surname" type="text" />
</li>
</ul>
</form>
This is considered by many the "proper" way of doing it.
Then you can style your list in whichever way you like, so depending on the css the label can be above or next to the input field (this is where the <br/> tag would spoil that).
The basic style you need to apply is:
form ul {
list-style-type:none;
}
This gets rid of the bullet points in the list. Then you can e.g. set the elements inside to block or make them float.
I would use <div> tags and position them manually with CSS. You can also use the clear:both within CSS. I have used <br /> before as well. You do not want to be using <p> tags though because it will confuse the Google Bot which crawls your website to place you on Google Search, from a SEO point of view <p> is bad unless you actually have content within the tags.
Tables may also look a good option but here is a good article on why you should not use tables for layout http://phrogz.net/css/WhyTablesAreBadForLayout.html
Ain't nothing wrong with using br's, though the cleanest way is to just make those items display:block.
http://jsfiddle.net/chad/MdbKE/
Quite semantic way to markup label/field pairs is to use DL list (for example, this is used by default in Zend_Form). For submit button, DIV can be used:
<dl>
<dt><label for="frm-login-username">Username</label></dt>
<dd><input type="text" name="username" id="frm-login-username" /></dd>
<dt><label for="frm-login-password">Username</label></dt>
<dd><input type="password" name="password" id="frm-login-password" /></dd>
</dl>
<div><input type="submit" value="Login" /></div>
Here's another CSS changes only question. [
Demonstrated here
So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?
<label> Enter Zipcode: </label>
<span class='bg'>
<span class='leftcap'>
<span class='rightcap'>
<input type="text" class="textfield" name="zipCode" />
</span>
</span>
</span>
edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.
edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/
I changed outer2 to display:inline-block, that fixes it.
The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)
Fix: add letter-spacing:-4px + line-height: 1px.
See http://jsfiddle.net/L8TyD/6/
EDIT: i removed the fixed width, and added hack to make it work in ie7