I want to create a CSS grid with columns that have auto widths so that it fits the data in a way that makes the most sense automatically.
My problem is that I don't know have the same automatic columns widths for each column when looping through a list of items that produces a grid with 4 columns.
Temporarily, I set the first 2 columns to a set pixel amount, but I would like them to all be matching automatic widths.
HTML
<div repeat.for="milestone of milestoneHistory">
<div class="grid">
<div>${milestone.statusDescription}</div>
<div>${milestone.quantity}</div>
<div>${milestone.milestoneDate | dateTime}</div>
<div>${milestone.createDate | dateTimeFromUtc}</div>
</div>
</div>
SASS
.grid {
display: grid;
grid-template-columns: 100px 75px auto auto;
//grid-template-columns: auto auto auto auto; //This is how the first picture is styled
border-bottom: 1px solid lightgrey;
&.header {
font-weight: 600;
border-bottom: 2px solid #black;
margin-bottom: 3px;
}
}
I want it to go from this:
To something more like this this:
Related
I have a web table, which is showing some data based on some search filter criteria. So in actual we have total-50 rows. But after applying filter only 1 is visible on the table.
Here the problem is, in DOM it's showing all 50 rows including that 1 which is visible.
<table-row style="height: 32px; line-height: 32px; transform: translateY(0px);">
<table-row style="height: 12px; line-height: 12px; transform: translateY(32px); display:none;">
<table-row style="height: 12px; line-height: 12px; transform: translateY(38px); display:none;">
<table-row style="height: 12px; line-height: 12px; transform: translateY(41px); display:none;">
Now the only option i have is to use this display part of attribute-"style"I As i want only those rows, which doesn't contain this display option none in their style attribute am trying a xpath like-
below but it's not working`
//table-row[not(contains(#style,'%display: none%')]
You need to remove those leading and trailing % symbols and add closing bracket:
//table-row[not(contains(#style,'display:none;'))]
I'm trying to horizontally align two absolute positioned elements inside a flex item.
This is my current CodePen
HTML :
<div class="stepper-wrapper">
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
</div>
CSS :
.stepper-wrapper {
display: flex;
flex-direction: row;
}
ul {
border: 1px solid grey;
height: 0px;
position: relative;
top: 40%;
min-width: 100px;
flex: 1;
li.step__bubble {
display: inline-block;
vertical-align: middle;
}
li.step__bubble::before {
content: "";
position: absolute;
top: -9px;
left: calc(50%);
display: block;
width: 16px;
height: 16px;
border: 2px solid grey;
border-radius: 50%;
background: white;
}
li.step__circle {
width: 8px;
height: 8px;
border: 1px solid red;
border-radius: 50%;
display: block;
position: absolute;
top: -4px;
left: calc(50% + 1px);
}
}
What I want to do is :
Having the grey circle vertically and horizontally aligned over the
line. Vertically is not really a pb, I'm able to set a fixed value as the height of the .stepper-wrapper will be fixed. Horizontally needs to be adaptative and it's where I'm stuck.
Having the red circle right inside the grey circle
I tried to use the calc() function and set it to (50% - width_of_element_in_px/2) for both circles, but I don't know why, each px seems to be ~10px.
Thx for your help
Welcome to the club of the LESS users pwned by calc() and string interpolation
I've been using LESS since 5 years and it still happens from time to time :(
Sooo tl;dr calc() was and is a LESS function that its compiler will happily output as some result (probably 50% + 10(stripped) => 60%).
If you want LESS compiler to output calc() the CSS Level 3 function, you need to escape it, that is wrap it in ~"calc(50% + 5px)"!
Codepen
EDIT: also see https://stackoverflow.com/a/17904128/137626
EDIT2: couldn't find an entry about calc in LESS documentation oO but the problem is explained in http://lesscss.org/usage/#command-line-usage-options (search "calc" in text). strict-math is a cool option but you'll have to make sure everybody else has it activated (won't be the case by default)
Rendering a table, with boarders, to PDF using phantomjs leaves each individual cell bordered but with a gap between each cell. The table is displayed correctly, without such gaps, on a web page.
in my CSS I've tried setting:
border-collapse: collapse;
border-spacing: 0px 0px;
to no avail, I need to get rid of those gaps between cells in my PDF.
Any ideas would be gratefully received.
Yours Allan
Be sure to add the border-spacing and border-collapse rules to the <table> and not the <td>. This is my phantomjs-specific rules:
.table {
border: 1px solid black;
border-spacing: 0px 0px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 5px;
border: 1px solid black;
margin: 0;
}
Note that this is a bit different than 'normal' (not phantomjs-pdf) css where your border-collapse can be located on the <td> element.
I am using twitter bootstrap 3 with horizontal forms and form groups in my ASP.Net MVC razor app:
<form action="SomeAction" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-lg-3 control-label">
#* label *#
</div>
<div class="col-lg-9">
#* textbox *#
#* validation *#
</div>
</div>
I also have the following in my layout template because every view will be a form and I don't want to have to style every control or view separately:
$('input[type=text]').addClass('form-control');
With text inputs, this is what I get:
The first 1-2 characters are hidden until I click in the control, which then shows them:
I am using IE 10. It doesn't happen in google chrome:
Not sure how to resolve this so any help is appreciated
I found out what was causing it. I have the following javascript in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
Once I removed it and applied the class in the control it rendered properly:
#Html.TextBoxFor(model => model.Manufacturer, new { style = "width: 400px;", #maxlength="50", #class = "form-control" })
Text inputs seem to be the only one with this problem. textarea and select don't have the same behavior.
I wanted to avoid having to put the bootstrap class in every single control in every single view. If anyone knows of a better way please let me know.
Update
It turns out the padding style (12px) in the bootstrap.css (version 3.0.0, line 1712) is causing the problem:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px; /* this line is causing the problem */
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Hate to alter the bootstrap css. I am overriding it temporarily in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
$('input[type=text]').css('padding', '6px 0');
I have a dashboard in which I'd like a scrolling ticker. (We'll know if the UI sucks or not once it's been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it's implemented.
This is some exemplary markup, but we're free to change it as needed, although I'd prefer to keep it relatively semantic if possible:
<div class="ticker">
<div class="itemDiv">
<img src="x">
<div class="itemBodyDiv">
<span>Upper Box</span>
<span>Lorem ipsum dolor sit amet</span>
<span>Lower Box has longer text</span>
</div>
</div>
</div>
This is the layout I'd like to achieve:
The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.
The problem I'm having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I've tried several permutations of display: inline and inline-block that didn't work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can't be absolute since they wouldn't have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn't preserve normal flow spacing that would handle cases like this, but I'm not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.
By request, this is my current non-working CSS at the state of my last experiment:
.itemDiv {
display: inline;
vertical-align: middle;
}
.itemDiv > img {
margin: 10px 10px 10px 30px;
vertical-align: middle;
height: 48px;
width: 48px;
/* border: 1px solid red; */
}
.itemBodyDiv {
display: inline;
vertical-align: middle;
}
.itemDiv span:nth-child(1) {
font-size: small;
clear:left;
vertical-align: top;
color: green;
}
.itemDiv span:nth-child(2) {
font-size: x-large;
vertical-align: middle;
color: white;
}
.itemDiv span:nth-child(3) {
font-size: smaller;
vertical-align: bottom;
color: gray;
}
Any suggestions?
You should wrap the entire scrolling message in a a div with its position set to relative. That way, you're free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:
.message
{
position: relative;
}
.upper-box
{
position: absolute;
top: 5px;
left: 10px;
}
.lower-box
{
position: absolute;
bottom: 5px;
left: 10px;
}