Posts Tagged with css

Displaying 1-10 of 18 results.
Wiki: Css3 spin icon with originwiki
posted by admin on November 7, 2016
HTML:

<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h1>

<h3 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h3>

<h6 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h6>

CSS3:

.spin {
-webkit-animation: spin .2s infinite linear;
-moz-animation: spin .2s infinite linear;
-o-animation: spin .2s infinite linear;
animation: spin .2s infinite linear;
-webkit-transform-origin: 50% 58%;
transform-origin:50% 58%;
-ms-transform-origin:50% 58%; /* IE 9 */
}

@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Read more
Resolved: Css pre last child
posted by admin on November 7, 2016
I want to get pre-last child of children elements
Example:

<table>
<tr><td>1<td><td>2<td><td>3<td><td>...<td><td>n-1<td><td>n<td></tr><!-- 1 -->
<tr><td>1<td><td>2<td><td>3<td><td>...<td><td>n-1<td><td>n<td></tr><!-- 2 -->
<tr><td>1<td><td>2<td><td>3<td><td>...<td><td>n-1<td><td>n<td></tr><!-- 3 -->
...//<!-- ... -->
<tr><td>1<td><td>2<td><td>3<td><td>...<td><td>n-1<td><td>n<td></tr><!-- m -->
<tr><td>1<td><td>2<td><td>3<td><td>...<td><td>n-1<td><td>n<td></tr><!-- m - 1 -->
</table>

I want to get all pre td elements selector in css styles, like

table tr td:last-child(-1){
/* to do */
}
Read more
Wiki: Yii 1.1: CGridView. Add custom class to table rows preserving original odd and evenwiki
posted by admin on November 3, 2016
Lets say we have such a CGridView widget showing a list of users for administrator. Users have status „active“ or „disabled“. Grid widget puts class „odd“ or „even“ to rows and we want to preserve this. So we want to add a class „disabled“ to rows with disabled users.
Implementation

<?php
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'user-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'rowCssClassExpression' => '
( $row%2 ? $this->rowCssClass[1] : $this->rowCssClass[0] ) .
( $data->status ? null : " disabled" )
',
'columns'=>array(
'username',
array(
'name' => 'status',
'value' => '$data->status0->title',
),
array(
'class'=>'CButtonColumn',
'header' => Yii::t( 'app', 'Tools' ),
),
),
));
?>

Comments
$model here is a User model pushed to view from controller. $data->status0->title here is User's property from relation to other model (why it is $data and not $model see bellow).
rowCssClassExpression
All „magic“ we do in „rowCssClassExpression“ property. Its value is a PHP expression. Expression is evaluated for every data row. Result of evaluation is used as the CSS class name. Note, that PHP expression is string.
cssClassExpression
We put „rowCssClassExpression“ property to „top“ CGridView properties – thus class will be aplied to row. If we put another „cssClassExpression“ property to some column – we can set a class for single cell. E.g.:

<?php
array(
'name' => 'status',
'value' => '$data->status0->title',
'cssClassExpression' => '"foo" . (2+3) ."bar"',
),
));
?>

as result we will have

<td class="foo5bar">

(note the difference between „rowCssClassExpression“ and „cssClassExpression“) From widget you can access such a variables:
  • $row : the row number (zero-based)
  • $data : the data model for the row
  • $this : the column object. As you can see we use all of them.

Expressions
This

( $row%2 ? $this->rowCssClass[1] : $this->rowCssClass[0] ) .

evaluates to 0,1,0,1... as rows are processed and original „odd“ or „even“ values are returned. CGridView::rowCssClass property is array containing default class values (in means of html element attribute). This property is ignored in widget because of rowCssClassExpression property is used. But values are accessible :) This expressions then is concatenated (note dot at the end) with:

( $data->status ? null : " disabled" )

$data here is User model and „status“ is its property (0 or 1 in this case). You can't access $model variable from those string expressions.Read more
Resolved: HTML Hyphen dot string table new row
posted by admin on October 20, 2016
I have table like

<table>
<tr>
<th>id</th>
<th>name</th>
<th>etc...</th>
</tr>
<tr>
<td>C-7788</td>
<td>Arthur</td>
<th>etc...</th>
</tr>
<tr>
<td>C-7w88</td>
<td>John</td>
<th>etc...</th>
</tr>
<tr>
<td>C-7789</td>
<td>King</td>
<th>etc...</th>
</tr>
</table>


In output I got result like:

id | name | etc...
C-
7788 |Arthur | etc
C-
7w88 |John | etc
C-
7789 |King | etc

But I want to see without line breaking result

id | name | etc...
C-7788 |Arthur | etc
C-7w88 |John | etc
C-7789 |King | etc
Read more
Wiki: Bootstrap CSS Style colors classeswiki
posted by admin on October 12, 2016
Text
Add meaning through text-colors with the classes below. Links will darken on hover:
Class Description

.text-muted Text styled with class "text-muted"
.text-primary Text styled with class "text-primary"
.text-success Text styled with class "text-success"
.text-info Text styled with class "text-info"
.text-warning Text styled with class "text-warning"
.text-danger Text styled with class "text-danger"

Background
Add meaning through background-colors with the classes below. Links will darken on hover just like text classes:
Class Description

.bg-primary Table cell is styled with class "bg-primary"
.bg-success Table cell is styled with class "bg-success"
.bg-info Table cell is styled with class "bg-info"
.bg-warning Table cell is styled with class "bg-warning"
.bg-danger Table cell is styled with class "bg-danger"
Read more
Resolved: How do I auto-hide placeholder text upon focus using css or jquery?
posted by admin on August 16, 2016
This is done automatically for every browser except Chrome.

I'm guessing I have to specifically target Chrome.

Any solutions?

If not with CSS then jQuery?Read more
Resolved: Laravel 5.1 CSS and JS files directory
posted by admin on August 10, 2016
I want to create my custom css and js files.
I want to know "WHERE" in directory tree.Read more
Resolved: How to align 3 divs (left/center/right) inside another div?
posted by admin on July 18, 2016

[[LEFT] [CENTER] [RIGHT]]

Container div is 100% wide (no set width), and center div should remain in center after resizing the container.

So I set:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Read more
Resolved: HTML CSS youtube vimeo video width 100 perccent
posted by admin on May 22, 2016
I want to stretch my youtube and vimeo video embed or iframe.Read more
Resolved: CSS html textarea with 100 % percent right part goes beyond the scope of the block
posted by admin on May 22, 2016
HTML

<div>
<textarea></textarea>
</div>


CSS

textarea{
with: 100%;
}
div{
width: 500px;
}


Textarea bigger than div. How to resolve it?Read more