I have a form with three struts2 tags after each other. When the page is rendered, the s:select tag is automaticly transformed to the html shown at the bottom.
Now the problem is that i'm trying to style the form to display these dropdowns in a horisontal line. But with this code i can not set id's or classes of any of the elements. They all get autogenerated ids and i can only set cssClass on the select itself, not on the ul or li's
I can however set an id on the form element itself. But i am a newbie at css so i couldnt get it to work. So the question is: How can i style the following html to display the li elements inline when i only have access to set the form id and class? Preferably the labels should be above the select box.
Oh. And I forgot to mention that there is already a css that is styling all these elements in a different matter. The divs have display attributes set, that will break the displays in the li's. So how can I tell the browser to "nevermind all that styling you normally do on the form, on this occasion just plain simply display these elements inline"
Or another solution, can i switch to just use a plain old tag? And if so how to populate it with items and setting displayvalue and id value?
<ul>
<li>
<div id="xxxx">
<label>Somelabel</label>
</div>
<div id="ssdf">
<select id="sfsd" name="xx" class="this i can control">
<option>1</option>
<option>2</option>
</select>
</div>
</li>
<li>Second dropdown etc</li>
</ul>
You can use the descendant selector W3C docs
#formid ul{
overflow:hidden; /* to autosize height based on contents*/
}
#formid li{
float: left; /* but you need to make sure that all li elements to not have a combined width larger than the ul containing them*/
}
Related
I'm having difficulty styling a <fieldset> that is a numbered list item in a form.
I've created a form and have made each question an item in an ordered list, like so:
<li>
<label>foo</label>
<input type='text'>
</li>
<li>
<label>baz</label>
<textarea></textarea>
</li>
Now I'm trying to style each list element so that each list number and the question (<label> element) appear together on a line, and the interactive widget appears on the line underneath. This is easy enough for questions that are made up of inline elements, but I'm running into trouble with check boxes and radio buttons that I have grouped together with a <fieldset>.
I've removed the default styling on the <fieldset> and <legend> elements to try and make these questions look like the other list items in the form. But now I'm getting this really odd behaviour where the list number is aligning with the bottom input option (as opposed to with the label).
Changing the list-style-position doesn't help, and fiddling around with the <input> or <label> styles doesn't seem to affect it. I tried changing the <ol> to display: flex and doing a few things with that but that didn't do anything either.
What has worked has been getting rid of the fieldset elements all together, but then there's no semantic relationship between the buttons and the questions, which I know is important for screenreaders. I'm sure I could also get rid of the numbering all together, but I don't want to. I looked it up before I started writing this form and there was nothing to say that nesting elements in <li> was an issue.
I found this blog as a guide to styling <fieldset> but it didn't help me fix my issue.
Here's a fiddle that demonstrates my issue (Q1 and Q3 are demonstrating the effect I'm going for; Question 2 has the weird styling issue).
https://jsfiddle.net/ocfk23un/45/
Basically, I'd like a solution to this issue or I'd like to know why this is happening before I abandon using the fieldset.
You should keep using the HTML that you have as it is semantically correct.
You just need to need to add vertical-align: top; to your fieldset styles:
fieldset {
display: inline;
padding: 0;
border: 0;
vertical-align: top;
}
I am pretty new to CSS. There seems to be a ton of properties and values and it is a bit overwhelming. I am currently trying to emulate a stylesheet I found online. I am currently stuck on this portion
.tabs nav li.tab-current {
...
...
...
}
I understand .tabs is class and .tabs nav is the nav within where the tabs class I used in the html page. Same goes for li. I'm not sure what the .tab-current means and how it is being used. I'm not sure where to look to find notes/documentation on this topic.
The structure looks something like this
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
I just added the ul tags in there since most li tags are found within them.
Anyway, the li.tag-current part of the selector just means that it's going to select the Hey and style it.
From the looks of it the tab-current class acts much like an active class you'd put on a list item or a menu item to show that it's the currently selected item.
li.tab-current means li element with class tab-current.
So basically your CSS rule will be applied to all li tags with class tab-current being inside nav elements which are inside elements with class tabs
My text input seems center aligned but my select inputs are top-aligned.
How can I fix this and have them both be the same?
Current HTML code:
<td><input text-align="top" name="configuration[targets_attributes][0][name]" id="configuration_targets_attributes_0_name" size="30" value="bob" type="text"></td>
<td><li class="select input required" id="configuration_targets_attributes_0_maximum_fte_input"><select id="configuration_targets_attributes_0_maximum_fte" name="configuration[targets_attributes][0][maximum_fte]"><option value="1.0" selected="selected">1.0</option>
<option value="0.9">0.9</option>
<option value="0.8">0.8</option>
...
</select>
</li></td>
I would start by being more consistent with your containers. You put the input directly inside the td, but you put the select inside an li. Try putting them both in the same containers. You probably don't want to use an li right there since it's not in a list. So I would probably get rid of the li in the second td.
Must be your CSS. It works fine without any styling: http://jsfiddle.net/32mxD/1/
Also, as other suggested, from consistency and best practice point of view, not a good idea to have LI within a TD and then have Select within the LI
As Callan said, get rid of the li within the td
JSFiddle : http://jsfiddle.net/s8KR3/
If you are still having problems with elements on the same row being on a different height, you should use
td {
vertical-align: middle;
}
in your css. Note that if it isn't aligned properly, it's probably due to another css rule you already added, but didn't post here.
You're using a text-align HTML attribute, which, to my knowledge, doesn't exist. Instead, since you have this in a table, you should be using the CSS property vertical-align: middle.
You also have <li> elements directly inside your <td> tags, which I believe is also invalid. <li> elements can only be children of either <ul> or <ol> tags.
Having said that, using a <table> is not really appropriate for this use. It can be done, but there may be a better way, possibly using floated divs. Tables are meant for tabular data, not for layout. Or perhaps get rid of the table and use a <ul> with floated <li>tags.
Here is an example using a <ul> with floated <li> tags: http://jsfiddle.net/LU3VU/
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
Each link in the menu on the left has padding-left: 15px; the reason for this is so I can add a background image (the blue arrow).
But now, when the text wraps (see "Paintings, prints, and watercolours"), it ignores the padding.
After searching around I can't find any similar cases at all, is that because I am going at this wrong?
If what I have at the moment is fine, how can I fix the wrapping issue?
Padding only applies to block-level elements. Either assign your menu's a elements a display:block; or display:inline-block; to get them to respond properly to padding.
You should place the padding on a div instead - http://jsfiddle.net/qHGrJ/1/
Paddings don't work that way for span style elements. Alternatively you could probably use display:block on the link.
Given the way you're using these anchors you can just set them to display:block.
A more ideal way to mark up this menu (especially since you're using HTML5) would be to use a menu tag containing a list of links.
<menu>
<ul>
<li>My Menu Item</li>
<li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>
This is more semantic and also gives you the li's as hooks to add a margin to.
Add display:block to your anchors. I would suggest against using inline-block as it isn't fully supported cross-browser (i believe IE7 and below).
Add display block on line 13 of view.css like so
#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}