I am having three to four elements inside 'th' of a table.
The header label
The sort icon
label of filter but in my case, it is hidden though present in dom
Input text filter or a date range selector wrapped in div.
This 'th' is auto-generated by component library primefaces, I have no control over it. The issue is when there are lots of columns the sort icon for some columns moves to a new line and the input and date range do not align.
--------------------------------------------------------------
label1 long| label2 ^ | label3 ^ | label4 is longg |
^ | _________ | --------------- |^ |
_________ | | | select date | | -------------- |
| | | | select date| |
---------------------------------------------------------------
The HTML output for above is something like
<th id="entityForm:results_table:j_idt280" class="ui-state-default ui-sortable-column ui-filter-column ui-state-active" role="columnheader" aria-label="Task Number: activate to sort column ascending" scope="col" tabindex="0" aria-sort="descending">
<span class="ui-column-title">Task Number</span>
<span class="ui-sortable-column-icon ui-icon ui-icon ui-icon-carat-2-n-s ui-icon-triangle-1-s"></span>
<label id="entityForm:results_table:j_idt280:filter_label" for="entityForm:results_table:j_idt280:filter" class="ui-helper-hidden">Filter by Task Number</label>
<input id="entityForm:results_table:j_idt280:filter" name="entityForm:results_table:j_idt280:filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="entityForm:results_table:j_idt280:filter_label" role="textbox" aria-disabled="false" aria-readonly="false">
</th>
What I have done is
Given 'th' a position of relative
the first span of header label margin and 80% width.
The sort icon a position of absolute and offsets from right
The input box and date range selector I have tried to give a fixed same height and absolute position with the offset from the bottom.
With this, they align up and sort icon does not move to the new line.
I am not a UI developer, just need some ideas is this the best way to achieve this, or maybe I have overdone this.
I have to support IE 10 and above.
My Css is
th.ui-sortable-column.ui-filter-column {
position: relative;
}
th.ui-sortable-column.ui-filter-column > span.ui-column-title {
width: 80%;
display: block;
margin-bottom: 30px;
}
th.ui-sortable-column.ui-filter-column > span.ui-sortable-column-icon {
position: absolute;
top: 10px;
right: 4px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-filter {
position: absolute;
bottom: 0px;
height:25px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button.comiseo-daterangepicker-triggerbutton {
height:25px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button {
bottom: 2px;
position: absolute;
left: 0px;
margin-left: 5px;
margin-right: 5px;
}
Please advice.
Related
I am having a hard time with css. I have a content that content class a image and a text. I would like to align the text to the right side of the screen but I do not want to limit the image to the width of the content. I would like to allow the image go outside.
I tried to play with positions and "fixed" allow me to move the image outside of the content by the content height changes de-coupling the image.
<div class="content2">
<img id="cloudimg" src=".\Cloud.jpg">
<p>Cloud Computing</p>
</div>
and in my css
.parallax-wrapper-cloud {
width: 460px;
height:180vh;
position: absolute;
right:0;
padding-top:20vh;
box-sizing: border-box;
transform-style: preserve-3d;
}
.parallax-wrapper-cloud::before {
content:"";
width: 100vh;
height: 100vh;
top:0;
right:0;
background-color: #ffddfbff;
!background-image: url("./bkg4.jpg");
!background-repeat: no-repeat;
!background-position: left;
position: absolute;
z-index: 2;
transform:translateZ(-1px) scale(2);
}
.content2 {
margin: 0 auto;
color: #black;
padding: 50px;
width: 100;
background: #ee0d0d;
}
this is what I see (right side the image is truncated):
----------------------
| |
| --------------- |
| | half | |
| | image | |
| | | |
| --------------- |
| Cloud Computing |
| |
----------------------
this is what I would like to see (image full displayed and partially outside):
----------------------
| |
--------------- |
| full | |
| image | |
| | |
--------------- |
| Cloud Computing |
| |
----------------------
as described above
.content2 {
margin: 0 auto;
color: #black;
padding: 50px;
width: 300px;
background: #ee0d0d;
text-align: center;
}
#cloudimg {
height: 100%;
width: 100%;
left: 40%;
transform: translate(-40%);
}
<div class="content2">
<img id="cloudimg" src="https://i1.wp.com/amergin.net.au/wp-content/uploads/2017/03/image-placeholder.jpg?ssl=1">
<p>Cloud Computing</p>
</div>
If you are just trying to move the image a bit to the left without messing up the general flow of your site, you might want to use transform: translateX(-100px);. The -100px should be replaced by the amount of pixels (or cm/in/pt/pc/em/...) you want the image to be moved.
What this does is that it takes the object and just moves it, without affecting the document flow. That means that the other object will position themselfs as if the object wasn't moved at all, because this transformation happens after everything is positioned.
If you want to read more, I recommend reading this article on w3school or to look at the translate specification here on the MDN web docs.
Note that you can also use a percentage like transform: translateX(-50%);, but the percentage is relative to the object itself, so -50% will move an 1000px wide object 500px to the left.
In your case, I would recommend something like
#cloudimg {
transform: translateX(-20%);
}
I have an input field, and inside it on the right side there is a string that displays information to the user.
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
Using position relative and absolute, I places the span inside the input field.
However, if the user types a long query, the text will be under the span text.
Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?
You can add some padding-right to the input box.
.my_div_class {
position: relative;
width: 200px;
}
.my_input_class {
width: 100%;
padding-right: 100px;
box-sizing: border-box;
}
.my_span_class {
position: absolute;
right: 0;
top: 0;
}
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
.my_input_class {
padding-right: 1em; // Replace `1em` with the desired amount of padding
}
i'm trying to wrap my paragraph's text around the image's div, i've tried everithing but can't figured out why is not working, my head is literally floating left and right by now...
here is the css:
/* CSS Document Sidebar */
#sidebar {
background-color: #FFF;
width: 330px;
height: auto;
float: left;
}
#news {
width: 300px;
height: 200px;
margin: 15px;
position: relative;
border: solid 1px;
}
.newsImage {
width: 120px;
height: 120px;
position: absolute;
float: left;
bottom: 0px;
margin: 5px;
padding: 10px;
border: solid 1px;
}
.newsImage img {
width: 100%;
height: 100%;
}
#news p.title {
font-size: 14px;
color: #333;
margin: 5px;
}
#news p.content {
font-size: 12px;
word-wrap:break-word;
margin: 5px;
color: #333;
}
/* CSS Document Sidebar - END */
here the divs
echo '<div id="news">';
echo '<p class="title">'.$row_Display['PageName'].'</p>';
echo '<p class="content">'.$row_Display['PageContent'].'</p>';
echo '<div class="newsImage">';
echo '<img src="'.trim($row_Display['Image'], '/').'" />';
echo '</div>';
echo '</div>';
UPDATE:
Add here an example of my structure (i don't have the reputation for upload an image):
-----------------------
| <p>[TITLE] |
| |
| <p>[CONTENT] |
|-----------| content |
| IMAGE div | wrap |
| | around |
-----------------------
SOLUTION:
The problem was the position:absolute like Martijn said, but with some tests i manage to reach my own solution. For those who are still stuck on this issue you just need to:
Delete the position:absolute and position:relative from the CSS
Set every paragraph <p> to <div> with the same classes or id
Now put in HTML code the <div 'title'> on top and set float:left
Create under the previous an emtpy <div class='clear'></div> and set the CSS .clear{clear:both;}
Now the image's div goes INTO the content/text's div, make sure to put the <img src='' /> just before the text so the image can float free.
And then you can set the CSS with .img{float:right;} and .content/text{float:left;}. Doing this the text will wrap perfectly around the image
For those who voted negative i'm sry if my previous post wasn't that clear and complete and excuse me for my english.
Hope this can help someone.
Regards.
Try to avoid position absolute. This only complicates things in the long run, maintanance-wise.
Then, what you first need to do is create a more table like structure. Create two columns (your title+content and the image) and proceed from there:
-----------------------
| [TITLE] | IMAGE |
|------------| IMAGE |
| [CONTENT] | IMAGE |
-----------------------
The thing you're looking for is display: inline-block;, this allows multiple elements to be on one line (inline) and still give it dimentions (block). This does require the element to touch eachother, no spaces between them (see in the example provided below).
I've made a simple example for you
I'm not a float fan. IMO they're always complicating stuff more than they fix.
Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like
---------------------
| ---- ---- |
| | | | D2 | |
| | D1 | | | |
| | | ---- |
| | | |
| ---- |
---------------------
Here is my code ,
html
<div class="wrapper">
<textarea rows="12" cols="8" class="divOne">
Division One
</textarea>
<table>
<tr>
<td>
<textarea rows="6" cols="8" class="divOne">
Division Two
</textarea>
</td>
</tr>
</table>
</div>
Css
.wrapper
{
border: 1px solid #999999;
position: relative;
margin: 0px;
padding: 10px;
width: 600px;
background-color: #FCFCFC;
min-height: 50px;
color: black;
border-radius: 8px;
-moz-border-radius: 8px;
line-height:normal;
}
.divOne
{
float:left;
}
http://jsfiddle.net/fNhet/1/
.wrapper {
display: inline-block;
}
The issue over there is that you are using floats but you aren't clearing
.wrapper:after { /* Using a clearfix */
display: table;
content: "";
clear: both;
}
Demo
So, the parent takes the height of the non floated elements... and thus the background doesn't increase.
For more information on float and clear, read my answers here and here.
In your css try addding to your .wrapper
CSS:-
overflow:hidden;
DEMO.This will do the trick.
use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect
Add display:inline-block; to wrapper div then you can get the result.....
I have a calendar and I am trying to add events to it. Each event has a style and will have a link associated with it. It seems to be doing OK when there is only one event per day, but the issue comes when I am trying to add 2 events inside a single day. I have played around with absolute and relative position but it doesn't seem to be working. I would like it to look like this:
example Image
but it actuallty looks like this: actual html
Here is my Code:
CSS
.calendarDay {
position: relative;
clear: none;
width: 14.2851%;
height: 142px;
background-image: url(images/calendarDayBG.png);
background-repeat: no-repeat;
background-size: cover;
font-family: "Stag Sans book", "Arial";
font-size: 45pt;
vertical-align: top;
color: #4d4f53;
overflow: hidden;
top: 40px;
text-align: left;
}
.calendarDay h1 {
font-family: "Stag Sans light", "Arial";
font-size: 45pt;
text-overflow:clip;
vertical-align: top;
}
/* event styles */
surgicalCare {
display: inline;
alignment-baseline:baseline;
background-color: #d75f17;
position: absolute;
}
surgicalCareStacked {
display: inline;
background-color: #d75f17;
position: absolute;
}
strategicaccounts {
display: block;
alignment-baseline:baseline;
background-color: #5e249e;
}
HTML
<li class="fluid calendarDay zeroMargin_desktop">17<a href="EAST/msn.html"><div class="fluid surgicalCareStacked">
<p>E.A.S.T.</p>
</div></a>
<a href="EAST/sponsorship_EAST.html"><div class="fluid surgicalCare">
<p>E.A.S.T.</p>
</div></a></li>
I was thinking that I may need to use different styles: one for multiple events in a day "stacked," and one with a single event...but I could be totally wrong!
Thanks!!
Your images are not available for some reason. If I understand your question correctly, this is what you are looking for:
______________________
| Parent div |
| __________________ |
| | Child div 1 | |
| | | |
| |__________________| |
| __________________ |
| | Child div 2 | |
| | | |
| |__________________| |
|______________________|
Something like this would work:
HTML
<div id="parent">
<div id="child1">
<!-- Stuff here -->
</div>
<div id="child2">
<!-- Stuff here -->
</div>
</div>
CSS
#div1 {
width: 250px; // Or whatever width you need
}
This works because divs are block elements by default, so they span the whole width of their parent element, and force other elements down.