Multiple elements with same width equal to widest element - html

I have two elements (a button and an anchor tag) both with a dynamical text inside that grow to the length of their content.
I cannot know which one of them will be the longest at compile time, nor can I know what the maximum/minimum width will be.
The shorter one should always adapt to the longest one.
<span id="buttonsColumn">
<button type="submit" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</span>
The wrapping span can be changed to anything desired.
Any ideas?

You could try something like this:
#buttonsColumn {
display: block;
float: left;
background-color: #F88;
}
#buttonsColumn button,
#buttonsColumn a {
display: block;
}
#buttonsColumn button {
width: 100%;
background-color: #8F8;
}
#buttonsColumn a {
width: 100%;
background-color: #88F;
}

As I see it, you could do it two ways:
Figure out the length on the ASP side and set a variable with the length of the larger, then use that in a size property on each.
Write a javascript function to figure out which of the two is larger and set the length of both to that.

Might I suggest you give up and use tables?
They are still part of the specification after all, and what you're doing could be construed as tabular data. All you'd need to add would be a style="width:50%" to each table data tag and a style="width:100%" tag to the button.
<table>
<tr>
<td style="width:50%">
<button type="submit" style="width:100%" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
</td>
<td style="width:50%">
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</td>
</tr>
</table>
You can probably get rid of those spans within the button and anchor tags, they don't seem to serve a purpose unless your CSS is doing something with the span children of the container.

Related

How to place forms horizontal inside a td tag

I like to place buttons that links to different urls (meaning I have to use one form per button so that the action can hold different urls).
The problem is that the buttons appears vertical inside the td. I like to see them horizontal. Any suggestions? float:left and display:inline-block in the td tag doesn't work.
<table><tr>
<td>
<form action = "page1.html">
<button type="submit" name="btn1">btn1<button>
</form>
<form action = "page2.html">
<button type="submit" name="btn2">btn2<button>
</form>
</td>
</tr>
</table>
I have now put style="display:inline-block" in each form tag and style="white-space:nowrap" in the td. It works.
Using float: left for the forms will work if there is enough space inside the table, so you have to make the table width wider than the combined width of the 2 form contents.
CSS:
table {
width: 100%;
}
form {
float: left;
}
Here is a working example:
https://jsfiddle.net/11x6art9/1/

How to get this search-results-div to show up on top of content, without interfering with nearby float elements?

I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>

Display buttons in the same line

I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?
I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.
you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.
Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}
here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in
Increase your column size if not auto and add float:left to "Exporter"
In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>
I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.
Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}

Keep floated elements in one line within table cell

I have table where inside one column is name and level (number) - I want name on the left side and level "sticked" to right side.
Width of columns is dynamic.
If there is enough space everything is fine, but on smaller screens it makes ugly "line breaking" - shown on image.
Does anyone have some idea how to keep everything in one line?
Structure and style (very simplified)
...
<td>
<span class ="nowrap">
<a style ="float:left;">Name</a>
<span style ="float: right;" class ="level">10</span>
</span>
</td>
...
You can set positive right margin to the anchor and negative left margin to the span:
.nowrap > a {
margin-right: 30px;
}
.nowrap > span {
margin-left: -30px;
}
Look how it works: http://jsfiddle.net/ZF8mh/
Add the style to your list on the particular column with display: inline-block;
like
<td style="display:inline-block;">
<span class="nowrap">
<a style="float:left;">Name</a>
<span style="float:right;" class="level">10</span>
</span>
</td>
Apply the style in <td> tag as I have done or in <a> tag.

How do I put <td> tag and <div> tags inline?

See the right side of the image.
In the table, under Tonage Bytes , I want this progress bar to be alongside(inline) to the data,ie along with 929.3.
For reference see this image. I want exactly the same layout.
Currently they both are in different lines. So how can I adjust them inline.
<tr>
<td>Arts and Entertainment</td>
<td>1</td>
<td>1.03</td>
<td>929.3
<div class="progress">
<div class="bar" style="width: 60%; height = 20px"></div>
</div>
</td>
</tr>
I assume, you just need to assign the following CSS:
.progress {
display: inline-block;
width: 100px;
}
display: inline-block, however, is not supported by some older browsers (see MDN, e.g.).
Example Fiddle
You can try to use <span> instead of <div>. By default, <span> is inline. Alternatively, you can set the css option display: inline; or display: inline-block; in your style attribute