Hi,
I'm currently in the process of making a web app that consists of the above field and button the code is below. Although I removed the actual button code to protect my works privacy. Does anyone know by any chance how to make it so both these objects are on the same line.
Thanks
Brad
<td class="two td_left" nowrap="nowrap">${row.ACCO60?html} (Code for button here followed by the closing td tag)
#stett Here is the generated HTML code at runtime for that specific part of the table.
<
td class="one td_left" nowrap="nowrap">Ref</td>
<td class="two td_left" nowrap="nowrap">10004
<a height="" href="javascript:void(window.open(Don't need to see this part))" id="squarebutton" linkedtype="M" mrc="" width=""><span>Amend company details</span></a>
</td>
Without the actual html that is generated by the expressions ${row.ACCO60?html} and the button code, it's hard to directly advise on the styling necessary to achieve what you're going for, but my instinct is (in the CSS) to select for those elements, and set their display mode to inline or inline-block using the following CSS statement:
display: inline-block;
This tutorial provides a fuller explanation of inline-block elements.
Put your ${row.ACCO60?html} in a div, and set the styling for the containing div and the button to:
#divId {
display: inline;
width: x%;
}
#buttonId {
display: inline;
width: y%;
}
, where x + y <= 100. This will tell the browser to display the second element on the same line, if possible, and set their combined width to a size less than or equal to the size of their containing element (the td).
Related
Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you
"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.
You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.
There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/
Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.
Please go to the jsfiddle: here.
Click the last image with the "+" sign, this will open a popup with an ADD button, please click it.
The problem is, and I can't figure it out, why if I add multiple elements (clicking the ADD multiple times, like 4-5 times) the distance between the new elements is smaller than the distance between the predefined elements? I am using the same CSS for it, the same HTML structure.
The reason for that is that <li> tags have a natural spacing.
You have a few options:
Either stop using li tags and use something else.
<li> tag for each row, like it should be.
Change natural <li> behaviour
li {
display: table;
}
Edit:
Another option, as mentioned by Florin, is:
a {
float: left
}
Anyway, it's all about the li behaviour. There are many ways to solve it.
You use inline-block for the images.
The images are layout by using display: inline-block.
In your HTML code you have whitespace between the images. That whitespace is shown in the website.
The programmatically added images are inserted without whitespace between them, so they are nearer together.
Check here for strategies against the whitespace:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I discovered that if I add to the a tags:
a {
float:left;
}
it will remove the unwanted whitespace.
I have a table which includes a td with an onMouseOver function that changes the background color of the td. The text inside the td is a link. The problem I am having is that the link appears "highlighted" when the mouse hovers over the td, but can't be clicked on unless the mouse is hovering over the link itself. In other words, there is kind of a "buffer" zone around the link text but inside the boundaries of the td where the background color is changed but the cursor remains the standard pointer (and the link cannot be clicked). Is there a way to cause the entire td to be a link, or would I have to use two different images to get the desired effect?
Example code:
<table>
<tr>
<td onMouseOver="bgColChange();" style="background-color:#ffffff;">
Location 1
</td>
</tr>
</table>
You can do something like this:
<table>
<tr>
<td class="myTD0" onMouseOver="bgColChange();" style="background-color:red;cursor:pointer;" onClick="document.getElementById('myLink0').click();">
Location 1
</td>
</tr>
</table>
See I have added onClick on td with id of anchor tag
onclick="document.getElementById('myLink0').click();"
Demo Fiddle
I guess this is what you are looking for.
From what I understand, you want a TD element with a link inside of it and you want to:
change BG color when hovered
make entire TD element clickable for the link
The first thing to note is you're using inline JavaScript. That means you're placing raw JavaScript code inside your HTML. That is not a good practice or convention to follow. In the last several years the JavaScript community has stepped away from inline JavaScript.
Instead, the better approach is called "unobtrusive JavaScript" which is a fancy name that means you give your HTML elements class/ID names that you can reference in your JavaScript and CSS files.
This Wikipedia Article on Unobtrusive JavaScript is pretty good at showing what the differences are. The takeaway is that unobtrusive JavaScript is the preferred practice and should be used as much as possible.
I know there are unique situations where inline JS is still necessary, but you're particular problem doesn't need any JavaScript. You simply need to use some specific CSS. Often times the best solution is the simplest.
# HTMl file
# ----------------------------------------
<table class="custom">
<tr>
<td>
Location 1
</td>
</tr>
</table>
# CSS file
# # ----------------------------------------
.custom {
width: 100%;
}
/* Give TD element padding so you can see that link expands properly */
.custom td {
border: 1px solid black; /* For visual aid */
padding: 10px;
}
/* Change background color on hover of TD element */
.custom td:hover {
background: #ccc;
}
/* Change link color when hovering over TD element */
.custom td:hover a {
color: #fff;
}
/* Make link expand to entire TD element (its parent) */
.custom td a {
display: block;
text-decoration: none;
}
Here is a JS Fiddle example that works without using any JavaScript.
This solution is preferred because it does not use JavaScript and is much easier to understand as another developer.
You only need to add a custom class to your TABLE element so that you can attach CSS styles to it. I've added several comments in the JS Fiddle so be sure to check them out. You can also play with the JS Fiddle example to help you understand it further.
I am trying to understand the reason behind doing this.
<fieldset id="fieldset-1015" class="x-fieldset x-fieldset-with-title x-fieldset-with-header x-fieldset-default" style="border-width:0;">
<legend id="fieldset-1015-legend" class="x-fieldset-header x-fieldset-header-default">
<div id="fieldset-1015-body" class="x-fieldset-body ">
<span id="fieldset-1015-outerCt" style="display: table; width: 100%; table-layout: fixed;">
<div id="fieldset-1015-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
</div>
</span>
</div>
</fieldset>
I know this a very debatable question. But I want to understand why ExtJS chose to do it this way for their layouts.
I don't see divs inside span in other layout like layout=container
Block elements inside inline elements is discussed in these questions(and many more) -
can tags have any type of tags inside them?
Is putting a div inside an anchor ever correct?
Answer for your question is in comment in code (source: http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug-w-comments.js):
// All browsers that support display:table use this template.
// An outerCt with display:table shrink-wraps contents, and contains child
// margins. The table-cell innerCt is required in order to support percentage
// heights on child elements. Originally the outerCt started out as a div, but
// was changed to a span to work around an obscure firefox 3.6 bug where
// placing a Container inside of a fieldset's legend element causes the legend
// to blow up if the outerCt is a div.
My question has three parts
Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )
Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150x150 dimension (This part is also done as second row in the example)
Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.
Example is in http://jsfiddle.net/JBnbG/32/
I cant change structure otherwise it wont work caption part work properly
I would appreciate if some can help to fix the issue with keeping the HTML structure intact
I guess my question is, are you loading the example html dynamically from youtube, or just the images?
If the html is yours, it's a simple styling adjustment.
I forked it on jsfiddle , I think this is what you mean.
Not quite sure what happened to the styling, but I set the image
id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"
or, another way is:
left:-25px; position:relative;
Which btw, all these styles should be declared as a class in you stylesheet.
If you're loading the html dynamically, I commented out the javascript that achieves the same thing.
Depending on what you're working with, if using php, you might want to get a script that will auto crop to the appropriate size. Timthumb.php is the most notable one, although there's a security issue that will never be fully bulletproof, although pretty solid as is.
Cheers!
Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/
Changes to be done in CSS:
.VideoContainer > span {
display: block;
}
.VideoContainer > span > img {
display: inline-block;
margin-left: -60px;
margin-top: -25px;
}