I'm a new poster in stackoverflow. The community seems really nice so I'll go ahead and post my question.
I'm trying to style a asp.net MVC2 form so that instead of having all the fields on a strait line, I would like to have it like so:
Label: Text field
Label: Text field
I know you could do that with a table but I would like to use CSS to accomplish that. I know a little bit about css but not enough to figure out what to do. The only thing I came close to was to but my fields as a unorder list then styling the li item.
Thank you for your help!
Give the labels a class & add float:left to it.
There are plenty of CSS forms tutorials around if you get stuck.
There are likely dozens of ways to do it. If you're just trying to get a line break between your field / value pairs, wrap each line's worth of code in a <div> tag. Divs are block elements, meaning that by default there's a line break before and after them. Labels by default are inline, so you don't need to do anything special to get them to line up next to the text fields.
<div>
<label>Label:</label><input type=text />
</div>
<div>
<label>Label:</label><input type=text />
</div>
Related
Started learning Twitter Bootstrap a couple days ago and in form-design they use form-group but from some examples I have seen for example each label and its text box is inside one form-group and from some other examples I have seen they put multiple labels and their text boxes in one form-group.
So my question is what makes them know and decide which way to wrap in form-group?
Wrap labels and controls in .form-group for optimum spacing. - Bootstrap Documentation
It just adds a bottom margin to help space out your controls. I find that in most cases you would want to use them. The only time I can think of that you might consider not using them is if the form you're styling requires a lot of custom positioning or spacing.
I have created a very simple chart with NVD3.js as can be seen on this fiddle.
The problem lies with the title (text in the middle) which consists of a number and a symbol (%).
I need both those parts to be styled separate but this seems to be a real pain.
I have discovered I can only style an SVG through inline style tags so I already applied :
<div id="svgDiv"><svg id="test2" fill='#58B957' letter-spacing='-3px'></svg></div>
to get the color and spacing right. Now I still need the %-symbol to be a lot smaller than the number. Which I can't apply to the full svg, because this would make everything smaller.
I have tried all manners of adding classes, id's, wrapping them in tspan's etc; yet I can't figure it out.
Please tell me there's a straightforward solution for this?
I dont think there is a direct way in nvd3 but you can do this trick to empty the text and fill with tspan.
var text1 = d3.select(".nv-pie-title").text("");//get the title clear it
text1.append("tspan").attr("class", "number").text("85")//make first tspan
text1.append("tspan").attr("class", "percent").text("%")//make second tspan
working code here
I am having a weird problem with CSS.
I am trying to achieve the following.
I can have people search for a name or a part of a quote in a database and I would like to display this into a box (in this case a form ,which is easy for styling).
Problem is, the total box should have a gradient green color, but not the entire fetched data is retrieved with a green layout.
I have debugged and it seems to work just great:
I have both echo and alerted my output and it is just a normal form with table rows in it..
Here's the result outcome:
pastebin.com/AZAv6bpX (broken)
Here's my css:
pastebin.com/NATwyki6 (broken)
Here's what it looks like:
Notice the table rows still continue-ing after the gradient has stopped.
I have adjusted the table entry margins, for the div (results) they are placed in. So I am 100% sure the outcome is as I want it.
So basically I got:
code from pastebin here
And this weird layout.
Can anybody please help me out?
Either take your float:left off of your table or set overflow:auto on your form.
jsfiddle link
Because your form contents are set to float, they are taken out of the flow, and so your container will not wrap around them.
The simple fix for your css would be to add in the following;
form br { clear:both }
and then make sure that you fix the final </br> in your form to be <br /> instead.
I've got my div tags set to insert line breaks "Before opening, within, and after closing" but I'm not getting the line break after the content.
I'm getting this:
<div>
content</div>
But I want this:
<div>
content
</div>
Again, I have the correct selection made in the options. It even shows the correct way in the preview box. If I change the selection to no line breaks, it formats correctly.
Is this an issue for anyone else?
Note, this is in aspx/c pages.
The reason it doesn't separate the closing div element is because adding a space there would potentially change the whitespace semantics of the rendering. Have a look at the last comment made by scott gutherie : http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx
I'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.
So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.
Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)
Use JS:
<input type="text" readonly="readonly" onfocus="this.blur();" />
Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?
What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.
EDIT: Made swallowed tag visible. Now it makes sense.
this.blur() will make it impossible to select, I think.
<input type="text" readonly>
should help.
Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).