I cant seem to justify my links and have my logo in the navbar. My links and logo will overlap on the left hand side. I want to make it so my links will justify to the right of my logo.
%body
%nav.navbar.navbar-inverse.navbar-fixed-top
.container-fluid
.navbar-header
%button.navbar-toggle.collapsed{"aria-controls" => "navbar", "aria-expanded" => "false", "data-target" => "#navbar", "data-toggle" => "collapse", :type => "button"}
%span.sr-only Toggle navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar
.container-fluid
.navbar-header
%a.navbar-brand{:href => "#"}
%img{:alt => "IMage", :height => "50", :src => "/assets/logo.png"}
%ul.nav.navbar-nav.nav-justified
%li
%a{:href => "#"} link
%li
%a{:href => "#"} Link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
%li
%a{:href => "#"} link
css
.navbar {
position: relative;
background-color: #004170;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-size: 18px;
}
.navbar-nav.nav-justified > li{
float:none;
}
Try remove .navbar-nav class from navbar code.
%ul.nav.navbar-nav.nav-justified
to
%ul.nav.nav-justified
If your navigation slightly move down then you can set below properties :
.nav-justified {
width: 98%;
}
.nav-justified > li {
float: none;
}
It works for me.
Related
I am using images in svg format for the first time. and they aren't displayed my project. I tried with png and it works. I also tried changing the size, color etc.. Thank you!
Data file where the images and their title are stored (
I don't think that's the problem because when I replace the links with .jpg pictures, it works)
<?php
namespace App;
class Data{
public static function getSkills()
{
return [
// array data
array("name" => "HTML5", "icon" => '/home/student/Bureau/Portfolio/public/images/skills/bootstrap.svg'),
array("name" => "CSS3", "icon" => 'public/images/skills/css.svg' ),
array("name" => "Sass", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Bootstrap", "icon" => 'public/images/skills/html5.svg'),
array("name" => "JavaScript", "icon" => 'public/images/skills/html5.svg'),
array("name" => "MySQL", "icon" => 'public/images/skills/html5.svg'),
array("name" => "PHP", "icon" => 'public/images/skills/html5.svg'),
array("name" => "React JS", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Redux", "icon" => 'public/images/skills/html5.svg'),
array("name" => "GitHub", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Trello", "icon" => 'public/images/skills/html5.svg'),
array("name" => "VSCode", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Linux Ubuntu", "icon" => 'public/images/skills/html5.svg'),
];
}
}
Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Data;
class SkillsController extends Controller
{
public function index()
{
return view('competences', [
'competences' => Data::getSkills()
]);
}
}
competences.blade.php
#include('layouts/navbar')
<div class="skills">
<h1 class="skills-title text-center"> <span class="the-span "> Compétences </span></h1>
<h2 class="subtitle text-center"> <span class="the-span "> •Les langages, outils et frameworks que j’utilise </span></h2>
<ul class="skills-list text-center m-auto">
#foreach ($competences as $competence)
<li class="skills-list-skill" key="{{$competence['icon']}}">
<embedy src="{{$competence['icon']}}" alt="" class="skills-list-skill-icon" />
<p class="skills-list-skill-title">{{$competence['name']}}</p>
</li>
#endforeach
</ul>
</div>
#include ('layouts/footer')
Scss file
// Variables
#import 'variables';
.skills {
margin-bottom: 10em;
margin: 3em 0 2em 1em;
&-list {
display: flex;
flex-wrap: wrap;
#media screen and (min-width: 1440px) {
width: 60%;
}
#media screen and (min-width: 1024px) {
width: 70%;
}
&-skill {
width: 7em;
#media screen and (max-width: 320px) {
width: 5em;
}
background-color: $second-font-color;
margin: 3em 3em 1em 0;
min-height: 7em;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1em;
border-radius: .5em;
font-size: .8em;
text-align: center;
&:nth-child(odd) {
img {
color: $font-color;
}
}
&:nth-child(even) {
img {
color: $second-font-color;
}
}
&:hover {
transition: .8s;
box-shadow: 0px 0px 20px 2px rgba(255, 255, 255, 0.4);
}
&-icon {
padding: 1em 2em;
width: 40px;
height: 40px;
color : white;
}
}
}
}
I don't know what is <embedy> tag for, you can simply try load your svg icon with img tag
<img src="{{$competence['icon']}}" alt="" class="skills-list-skill-icon" />
also you dont need to add complete address to getaddress method ,you can just add icon name and in code load with asset
<img src="{{asset('/images/skills/'.$competence['icon'].')}}" alt="" class="skills-list-skill-icon" />
My files are as follows. The class/div only inherit from the main body file, and I'm not sure why. How exactly do I need to format the CSS to make the styling work correctly?
The files are linked correctly, but the form still doesn't show a stylized version. Buttons work fine, only the list is broken.
/* Style the list items */
#add_step_item > form > ul > li{
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
font-size: 18px;
transition: 0.2s;
}
/* Set all odd list items to a different color (zebra-stripes) */
#add_step_item > form > ul > li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
#add_step_item > form > ul > li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
#add_step_item > form > ul > li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
#add_step_item > form > ul > li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
Index.haml
- if #user.teacher?
#add_step_item
= form_for '', :remote => true do |f|
%input{:name => "fixed_date", :type => "hidden", :value => ""}
%input{:name => "student_id", :type => "hidden", :value => #student.id}
%input{:name => "description", :type => "hidden", :value => "このステップをやり直してください！"}
%input{:name => "difficulty", :type => "hidden", :value => "0"}
%h1 弱点
%ul
%li With a class attached,
%li I can style this one
%li differently than others.
%button{:type => "button", :value => "キャンセル"} キャンセル
%button{:type => "submit", :value => "addstep"} 追加する
%button{:type => "submit", :value => "change"} 変更する
I am using CGridView with 'raw' cell type. The cell contains text field generated using CHtml::textField. Here I cannot change the width of the column using headerHtmlOptions or htmlOptions. Please help.
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'mbook-grid',
'itemsCssClass'=>'table table-bordered table-condensed table-hover table-striped dataTable',
'dataProvider'=>$model->search(),
'afterAjaxUpdate'=>'calcquantity',
'enablePagination' => true,
'pagerCssClass'=>'dataTables_paginate paging_bootstrap table-pagination',
'pager' => array('header'=>'','htmlOptions'=>array('class'=>'pagination')),
'columns' => array(
array(
'class' => 'CCheckBoxColumn',
'id'=>'project_estimate_id',
'htmlOptions'=>array('style' => 'display:none'),
'headerHtmlOptions'=>array('style' => 'display:none'),
'selectableRows'=>2,
'value'=>'$data["project_estimate_id"]',
'checked'=>'true',
),
array('name'=>'description','value'=>'CHtml::textField("ProjectMBookGrid[description_".$data["project_estimate_id"]."]",$data["description"],array("class"=>"gridfield"))','type'=>'raw','header'=>'Description','headerHtmlOptions'=>array('style'=>'width: 5%;')),
array('name'=>'length','value'=>'CHtml::textField("ProjectMBookGrid[length_".$data["project_estimate_id"]."]",$data["length"],array("class"=>"gridfield","style"=>"text-align: right"))','type'=>'raw','header'=>'Length','headerHtmlOptions'=>array('style'=>'width:5%')),
array('name'=>'breadth','value'=>'CHtml::textField("ProjectMBookGrid[breadth_".$data["project_estimate_id"]."]",$data["breadth"],array("class"=>"gridfield","style"=>"text-align: right"))','type'=>'raw','header'=>'Breadth','htmlOptions'=>array('style'=>'text-align: right')),
array('name'=>'quantity','value'=>'CHtml::textField("ProjectMBookGrid[quantity_".$data["project_estimate_id"]."]",$data["quantity"],array("class"=>"gridfield","style"=>"text-align: right"))','type'=>'raw','header'=>'Quantity','htmlOptions'=>array('style'=>'text-align: right')),
),
'htmlOptions'=>array('class'=>'grid-view table-responsive hide-x-scroll'),
))
Below is the CSS
.table.dataTable {
clear: both;
margin-bottom: 10px;
}
.table-bordered.dataTable {
border-top: 1px solid #ddd;
}
table {
background-color: transparent;
max-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.hide-x-scroll {
overflow-x: scroll;
}
.grid-view {
padding: 15px 0;
}
I added
"style"=>"width:100%"
in CHtml::textField htmlOptions and was able to change the width of column
I want to decrease the size of a detail view. I was able to decrease font-size through css, but can not decrease row size or padding of the generated table.
<div class="col-md-3">
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'jmn',
'pri',
'rci',
'adr',
'tel',
'eml',
],
]) ?>
</div>
css
.detail-view {
font-size: 10px; -> this works
}
td {
padding: 0px; -> this doesnt do anything
margin: 0px; -> this doesnt do anything
background:green; -> this works (a test :-)
}
tr { line-height: 30px; } -> this doesnt do anything
Add style in the interessed field e.g.
<div class="col-md-3">
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'jmn',
....
[
'attribute' => 'attribute_name',
....
'options' => ['style' => 'width:90px;'],
.....
],
....
]) ?>
</div>
First, try to put !important at the end of last css line:
td { padding:0px !important; height: 5px !important; }
Also it's better to be more specific in css selector. So something like this is better:
#your-table-id tr { line-height: 30px !important; }
If did not work, try to add css style inside the widget in this way:
<?= DetailView::widget([
'model' => $model,
'attributes' => [
[
'label' => 'ID',
'value' => $model->id,
'options' => ['style' => ' line-height: 30px']
],
...
],
]) ?>
In my active admin page i have link for manage users. In manage users page I have email option for some categories. Name of the category and email or displayed in the next line. I want them to be display nearly.
Example:
send new item arrival
email yes
no
yes and no has radio button.
I want this to be displayed as
send new item arrival email yes
no
manage_user.html.erb
<%= form.label :"send new item arrival" %>
<% if email %>
<%= form.input :send new item arrival_has_email", :label => 'email', :as => :radio, :collection => {:Yes => true, :No => false}%>
<% end %>
EDITED code
<style>
body.active_admin .user ol {
margin-left: 50px;
}
body.active_admin .user ol label{
text-align: left;
font-size: 1.0em;
font-weight: bold;
color: #5e6469;
display: inline;
}
body.active_admin .user ol li ol {
margin: 0;
padding: 0 0 0 10%;
display: inline;
}
body.active_admin .user ol li ol li{
margin: 0.1em 3.5em 0.5em 0;
display: inline-block;
}
body.active_admin form .actions{
position: fixed;
bottom: 0;
background: #fff;
width: 100%;
margin: 0;
padding: 20px 0
}
body.active_admin .user ol label.title {
background: #087B85;
color: #ffffff;
}
</style>
By this i got
send new item arrival
email yes no
It is CSS issue.
Just make something like
<div class="pull-left">
<%= form.label :"send new item arrival" %>
</div>
<div class="pull-right">
<% if email %>
<%= form.input :send new item arrival_has_email", :label => 'email', :as => :radio, :collection => {:Yes => true, :No => false}%>
<% end %>
</div>
And user proper CSS styles