I have created a drop down with the functions of codeigniter and I want to change it's direction to upwards. any idea ?
<div class="col-lg-8 validate-parent">
<?php echo form_dropdown('approved_by" id="approved_by" required class="form-control text-left chosen-select"', $employee); ?>
</div>
I have tried with css but no result
Related
Picture
Hi, this is my design right now and i want to expand it more but something is limiting me.
<div className="position-absolute start-50 translate-middle-x">
<div className="d-flex">
<div className="me-2">
<Posts />
</div>
<div className="col">
<GroupPage />
</div>
</div>
</div>
I use d-flex to add element by : by.
I want to expand it to almost whole screen but no luck.
I have a laravel project. it has a table that I want to fill with data from a form. Currently it populates the form with any data that may exist in the table.
I'm using #foreach to iterate through the data object. This works fine when there is data in the table, but when there's no data obviously the #foreach data object will be empty.. How do folk handle this so that the form still shows with default values?
#foreach($pricing as $price)
<div class="form-row align-items-center">
<div class="col-12">
<p><strong>Rate</strong></p>
</div>
<div class="col-12">
<div class="row">
<div class="col-md-2">
<label for="hirePrice" class="">Hire Price</label>
</div>
<div class="col-md-4">
<input type="text" name="hire" class="form-control" placeholder="1200" aria-label="hireprice" id="hirePrice" value="{{ $price->hire}}">
Currently, if I empty the table, the page just displays the header and none of the html above, including the form fields.
edit: The table will always only have 1 ROW !! not sure if this makes it any easier.
You can use
#isset($pricing)
#foreach($pricing as $price)
<div class="form-row align-items-center">
<div class="col-12">
<p><strong>Rate</strong></p>
.................................
//your code
#endforeach
#endisset
Or, You can use if else condition like this:
#if($pricing != Null)
#foreach($pricing as $price)
<div class="form-row align-items-center">
<div class="col-12">
<p><strong>Rate</strong></p>
.....................
//code
#endforeach
#else
<div>No data</div>
#endif
Though i can not get your actual scenario,i can give some advice.
You can add one line condition inside of input tag like this:
HTML:
<input type="text" #if($data->variable) value="{{ $data->variable }}" #else value=" " #endif >
Otherwise, You can put same code within foreach loop into else condition. So, when data exists in the table, it shows the data in the form otherwise same form with empty value will appear.
So I have built the script below to take an array, group them by one of the fields, which then generates the accordion headings. The data within the array is then build as rows within the accordion.
What I would like to do is have the containing card be of fixed height, so that which ever accordion is clicked, then has the data scroll within the area of the card....
Bootstrap is standard for the card class.
<div class="card" style="height: 80%; width: 100%">
<div class="card-header">Service History for <?php echo $vesseldata['vesselTag']; echo $own;?></div>
<div id="accordion">
<?php $newArray=array();
foreach($history as $val){
$key=$val['component'];
$grouped[$key][]=$val;
}
foreach($grouped as $group){?>
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#<?php echo str_replace(' ', '',$group[0]['component']);?>">
<?php echo $group[0]['component']; ?>
</a>
</div>
<div id="<?php echo str_replace(' ', '',$group[0]['component']); ?>" class="collapse" data-parent="#accordion">
<div class="card w-100">
<?php foreach ($group as $occurance){?>
<div class="row no-gutters">
<div class="col-md-2 col-lg-2 d-flex">
<input type="text" class="form-control text-primary" disabled value="<?php echo $occurance['date'];?>">
</div>
<div class="col-md-2 col-lg-2">
<input type="text" class="form-control" disabled value="<?php echo $occurance['engineer'];?>">
</div>
<div class="col-md-4 col-lg-4">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['comment'];?></textarea>
</div>
<div class="col-md-3 col-lg-3">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['parts'];?></textarea>
</div>
<div class="col-md-1 col-lg-1 d-flex align-items-center justify-content-center">
<img src="small-globe.jpg" alt="Map" style="width:20px;height:20px;border:0;">
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php }?>
</div>
Hope someone is able to help.
Your card has its height set to 80%. You are using relative units which means the card will be 80% of it's parent's height. You have it fixed to be 80% of its parent and I'm not sure if that's what you want.
However, to enable scrolling within your card when content is too big to fit inside the card, add this property within your style attribute:
overflow: scroll;
I'm using Twitter bootstrap 3 and CodeIgniter. In my website I have a list of posts on the left and a sidebar column of the right. In this sidebar I have a search box with input field and a dropdown, another box with a list of 10 popular posts, and another box with a list of categories.
I would like to move only the search box of the sidebar to the top of the site in smaller screen devices. Because it's a search box I would like it to show first and then the posts in mobile view.
I am having trouble doing this. I've managed to reorder the columns, but it's not the result is that the entire column shows first, and I want the search box on top.
Any suggestions?
pull-left and pull-right did not work for me, or I was unable to make it work. Would using classes with hidden and show values be a better approach?
This is my template for post view
<div class="container">
<div class="row">
<div class="col-sm-8">
<div id="content" class="content-page">
<h2><?php echo $title; ?></h2>
<?php echo $content; ?>
</div> <!-- // content -->
</div><!-- // col-sm-8 -->
<div class="col-lg-4">
<?php $this->load->view('templates/posts_sidebar');?>
</div><!-- // col-lg-4 -->
</div><!-- // row -->
<hr>
</div><!-- // container -->
Sidebar search view is:
<div class="well post_search">
<?php $attributes = array('id' => 'search', 'role' => 'form', 'autocomplete' => 'off'); ?>
<?php echo form_open('posts/filter', $attributes); ?>
<div class="form-group">
<h4><label for="title"><i class="fa fa-search"></i> <?php echo $text_posts_sidebar_search; ?></label></h4>
<div class="input-group">
<?php echo form_input('title', set_value('title', $this->input->get('title')), 'class="form-control" id="title" placeholder="'.$text_posts_sidebar_search_placeholder.'"'); ?>
<span class="input-group-btn">
<?php echo bt_submit('', '<span class="fa fa-search"></span>', 'btn btn-default'); ?>
</span>
</div>
</div>
<div class="form-group">
<label for="parent_id"><i class="fa fa-folder-open-o"></i> <?php echo $text_posts_sidebar_search_in; ?></label>
<?php echo form_dropdown('parent_id', $dropdown_postcategories, $this->input->get('parent_id') ? $this->input->get('parent_id') : '', 'id="parent_id" class="form-control"'); ?>
</div>
<!-- // input-group -->
<?php echo form_close(); ?>
</div><!-- /well -->
Okay, I sorted my issue.
Just in case this is helpfull for someone else.
In my template I actually have two search forms now.
One visible and one hidden.
Depending on screen resolution, using media querys I show or hide what I need.
I'm used to using Joomla 1.5, and am trying to switch to 2.5.
I have 2 modules in the right position, I expect that there would be 2 boxes (which is what I want), one box for each module. But for some reason it's just adding the second module to the first box.
It's not copying the divs (main_top_box, main_mid_box, main_bottom_box) inside the if statement: <?php if($this->countModules('right')) { ?>, instead it's just putting the <jdoc:include type="modules" name="right"/> commands side by side.
You were able to do this with the code I've used in Joomla 1.5. Have they removed this functionality?
Here's what I see:
Here's what I should see:
Joomla Code:
<?php if($this->countModules('right')) { ?>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<jdoc:include type="modules" name="right"/>
</div>
</div>
</div>
<?php } ?>
Code Output(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<div class="custom" >
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
<p> </p>
</div>
<div class="custom" >
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
</div>
Should Be(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
</div>
</div>
</div>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
You can do this by these to methods
Either Change the order of display the module in the same position in the module manager.
Create separate module position for both the modules and assign them accordingly.