so my problem is like this:
I have a div, and in the div I have an img and then a string next to the image, the height is at 25, the width is at 128, and its align to center.
its just a username and a little icon next to their name. it works fine up until the user has a really long name in which case it will put the string onto a new line, which is definitely not what I want.
I would like it to just over flow and hide the rest of the name if it is too long. is there anyway I can do this?
I had overflow hidden as well as max-height and max-width. I tried using a span as well as display:inline but it keeps pushing it to a new line. I need to keep the alignment centered.
any help?
cant seem to find any information. I tried putting it in a table as well but to no avail.
here's the code:
<a href="#" class="tab2">
<table align="center">
<tr>
<td valign="bottom" id="contactLink1">
<div align="center" class="funtion_user_imageloc_box">
<?php if($memimglevelROW['imageloc']!=''){
if ($memimglevelROW['imageloc']=="black1.png"){?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="30.5" height="16" align="center" class="funtion_user_img1" />
<?php } else {?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="18" height="18" align="center" class="funtion_user_img2" />
<?php }
}
echo $username;?>
</div>
</td>
</tr>
</table>
</a>
Welcome to the community!
Please try not to post a wall of text, as it makes reading your question difficult.
The preview of what you're typing is below the "Ask a Question" textbox.
Thanks for providing code!
You should try white-space: nowrap; as that will probably fix your problem.
Also, don't ever use tables for non-tabular data. It's not 1995 anymore, CSS can do anything a table can do.
Related
We are building a dynamic table with Thymeleaf.
Some cells, of null values, are holding "-" sign, while cells with values hold some data from the object:
<td th:text="${person.getAddress()} ? ${person.getAddress().getCity() : '-'"}
So the current state is this:
<table border=1>
<tr><td>John</td><td>London</td></tr>
<tr><td>Paul</td><td>-</td></tr>
</table>
Now, we like to add a tooltip, that when hovering the relevant table cell, more data can be seen (e.g. the person's full address).
We found this CSS example for tooltip and we figure out our final result should be something like that:
<td class="tooltip">London
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
But when trying to implement it in Thymeleaf we got stuck.
This is what we tried:
<div th:switch="${person.getAddress()}">
<div th:case="null"><td>-</td></div>
<div th:case="*">
<td> // now what? how to both inject value and the sub divs? </td>
</div>
</div>
Another option we thought of is to create by concatenation the full HTML within a td th:text=...
But both of the ways seems very cumbersome.
You can use the safe navigation operator in combination with the elvis operator instead of your null check.
No need for switch or any logic like this. Create a couple extra tags and move your logic deeper into the html.
Don't use .getAddress(), you can just use .address for properties with correctly named getters/setters.
For example:
<td>
<span th:text="${person.address?.city} ?: '-'" />
<div th:unless="${person.address == null}" class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
Without all the fancy stuff, you could also simply do something like this:
<td th:if="${person.address == null}">-</td>
<td th:if="${person.address != null}">
<span th:text="${person.address.city}" />
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
I am fairly new to using Watir for automation. Here's the html source which I am working around with:
<td align="left" class="list_vspace">
<div style="float:left;padding-right:10px;">
</div>
<div style="float:left;padding-top:8px; width:480px;">
<div class="List_title">
<div style="float:left;">
<img src="/images/icon_04.png" border="0" align="absmiddle" style="float:left;"> </div>
<div style="float:left;max-width:450px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><font color="#ACACAC">Mini pop-store</font>
</div>
</div>
<div style="clear:both; font-size: 11px;font-family: "arial";color:#acacac;">
15:36:13 | Fish Market</div>
</div>
</td>
My question is -
What's the script I need to write in order to locate the time and the text in the last div style (ie. 15:36:13 | Fish Market)?
I tried browser.div.style but it seems Watir doesn't recognize style for div. No where could I find an answer for this, google couldn't help as well, so I'm reaching out to you guys for help. Thanks in advance.
You can do
browser.element(class: 'list_vspace').divs.last.text
=> "15:36:13 | Fish Market"
To select an element by style, you need to use css. Notice that the spacing may be different on the input and output:
browser = Watir::Browser.new
browser.goto 'google.com'
element = browser.element(css: "div[style='height:233px;margin-top:89px']")
element.exists? # => true
e2.style # => "height: 233px; margin-top: 89px;"
So you could do something like this for the code above:
browser.element(css: "div[style^='clear:both; font-size: 11px']").text
I am using a bootstrap on hover pop up(using data-toggle and data-content) in ng-repeat as below .
<tr ng-repeat="row in docDetails">
<td class="uploadedDocs"> {{row.EnrollmentDocumentTypeName}}</td>
<td class="uploadedDocs">
<div class="col-sm-2" data-toggle="popover" data-content="Uploaded By:{{row.DocumentUploadedBy}} Uploaded Date :{{row.ChangedDateTime | date:'dd-MMM-yyyy HH:mm:ss'}}" data-trigger="hover">
{{row.FileName}}
</div>
</td>
Now after I added it inside a <td>, the pop up content is getting limited by td size, I want the pop up to be displayed fully, and not restricted inside table data.
any suggestions?
I could fix it using data-container="body"
Right now I am attempting to prevent a text button from underlining itself. This button is located in a table which is why I have a <td> tag. However when apply internal style to rid of the underlining, it remains underlined. How can I get rid of this, or am I incorrectly getting rid of this. I learned how to disable the underline from here: http://www.pageresource.com/html/link3.htm But like I said before, it failed.
<td style="text-decoration:none"><?php echo $rows['subject']; ?> <BR></td>
If you absolutely must have your styles inline, then in this case you need the text-decoration:none applied in the style attribute of the anchor, rather then the table cell:
<a style="text-decoration:none" href="view_topic.php?id=<?php...
Doing it this way though, you have to apply it to every element, rather than using a css class to apply it to all links at once.
The problem is that you've placed the text-decoration styling on the td instead of the a
You need to apply the text-decoration to the a element, not the table cell.
<td>
<a style="text-decoration:none" href="view_topic.php?id=<?php echo $rows['id']; ?>">
<?php echo $rows['subject']; ?>
</a><BR>
</td>
Here is a fiddle showing the difference between the two: http://jsfiddle.net/LsFK5/
just change your code to
<td><a style="text-decoration:none !important;" href="view_topic.php?id=<?php echo $rows['id']; ?>"><?php echo $rows['subject']; ?> </a><BR></td>
Move the style from the td tag to the anchor tag.
<td><?php echo $rows['subject']; ?> <BR></td>
You should add a class to your <a> element such as .a-no-underline and then in your CSS file, you can add a style rule such as:
.a-no-underline {
text-decoration: none !important;
}
Make sure that you apply this class to the <a> element and not the <td> element. Like so:
<td>
<a class="a-no-underline" href="view_topic.php?id=<?php echo $rows['id']; ?>">
<?php echo $rows['subject']; ?>
</a><br/>
</td>
I am using a CMS system that allows you to edit multiple content areas inside the main space (like all of them). What I am trying to do is for each editable content area I want to show a certain background color. The Main-Content = white and the right rail would be red when editing them.
Since everything is generated on the fly once the edit button is clicked, and everything between the two are are the same besides a input value, I am trying to say if the input value = main content show white if the value is right rail show red on the editor's body tag #tinymce.mceContentBody. I can only use CSS and I can not add to the HTML (so no adding IDs and classes).
Below is a cut out of some of the code generated. If you scroll through it, you will see the line <input id="label" type="hidden" value="Main-Content" name="label"></input>. That is the only thing that is different among the two editable areas. One is Main-Content and the other is Right-Right(not shown below). Can this be done? Can I drill down - The only thing I can think of is using that label value, but I am not sure how to code that and if it possible to say it is the parent of the editable area. I tried doing something like this - input[value="Main-Content"] #tinymce.mceContentBody {background-color:#FFF;} This failed and I am sure I am coding it incorrectly, but I think there might be something like this that will work.
NOTE this is the code and can not be changed at all -
<form id="wysiwyg_form" method="post" action="/servlet/OX/iesave">
<input id="site" type="hidden" value="test-email" name="site"></input>
<input id="path" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="path"></input>
<input id="newPath" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="newPath"></input>
<input id="label" type="hidden" value="Main-Content" name="label"></input>
<input id="dest" type="hidden" value="preview" name="dest"></input>
<textarea id="text" rows="1" cols="1" name="text" style="display: none;" aria-hidden="true"></textarea>
<span id="text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="text_voice">
<span id="text_voice" class="mceVoiceLabel" style="display:none;"></span>
<table id="text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100px; height: 100px;">
<tbody>
<tr class="mceFirst" role="presentation"></tr>
<tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="text_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 1000px; height: 703px; display: block;">
#document
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml"></head>
<body id="tinymce" class="mceContentBody oucampus-wysiwyg" contenteditable="true" onload="window.parent.tinyMCE.get('text').onLoad.dispatch();" dir="ltr">
<p>This is where the content gets displayed - I want this BG to be white and be red when the label above is right rail</p>
The way to accomplish this is to use the 'wysiwyg-class' attribute in the either the editor tag inside of your editable regions. That class will be added to the node of the TinyMCE editor and then one css can modify the margins, width, height position of the body based on the class
body.main_content { }
body.left_column { }
<!-- com.omniupdate.div ....
<!-- com.omniupdate.editor ... wysiwyg-class="left_column" ...