I am trying to go along with bootstrap and Codeigniter, but I am having a little problem, I cant seem to figure out how to align 3 simple elements into one row, so they are aligned perfectly next to each other.
I want my H3 tag, input field and my submit button from my form to be next to each other. I have already tried the span4 on the 3 objects within divs, then also display:inline, but nothing works correctly. I dont know why, but If I want them to be perfectly next to each other, I just have to put there margin-top: -7px and other margins on the other objects but this looks like a not a good approach on this matter at all. Could you please help me ? !
My code:
<div class="well">
<h3>My superb h3 tag!</h3>
<?php echo form_open('search/quick_search'); ?>
<?php echo form_error('search_query'); ?>
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<?php echo form_submit('submit_quick_search','Search','class="btn"'); ?>
<?php echo form_close(); ?>
How does it look
This is how I've been using then together (Horizontal form)
<?php echo form_open('search/quick_search', 'class="form-horizontal');?>
<div class="control-group <?php echo form_error('search_query')? 'error' : ''; ?>">
<label class="control-label" for="search_query">Search Term:</label>
<div class="controls">
<?php echo form_input('search_query','','placeholder="Search query"'); ?>
<span class="help-inline"><?php echo form_error('search_query'); ?></span>
<span class="help-block"></span>
</div>
</div>
<div class="form-actions">
<?php echo form_submit('submit_quick_search', 'Search', 'class="btn"'); ?>
</div>
<?php echo form_close(); ?>
Related
I am struggling with this problem, I am writing a code for a dashboard but It's not coming together. This is the code currently have:
<?= $this->Html->link('Edit', array('#' => 'container edit', $server->id)) ?>
This is the link to the div right down here, it's working when i don't give the server-id to the specific row. With the ID it doesn't redirect correctly.
<div class="container admin-section admin-sub edit" id="admin-edit">
<nav class="col col-xs-12 col-md-4 columns" id="actions-sidebar">
<ul class="side-nav">
<li class="heading"><?= __('Actions') ?></li>
<li data-target="admin-overview">Server List</li>
<li><?= $this->Form->postLink(
__('Delete'),
['action' => 'delete', $servers->id],
['confirm' => __('Are you sure you want to delete # {0}?', $servers->id)]
)
?></li>
</ul>
</nav>
<div class="servers form col col-xs-12 col-md-8 columns content">
<?= $this->Form->create($servers) ?>
<fieldset>
<legend><?= __('Edit Server') ?></legend>
<?php
echo $this->Form->input('url', ['class'=> 'form-control']);
echo $this->Form->input('description', ['class'=> 'form-control']);
?>
</fieldset>
<?= $this->Form->button(__('Submit'), ['class'=> 'btn btn-primary']) ?>
<?= $this->Form->end() ?>
</div>
</div>
Instead it'll go to http://dashboard/pages/1#container%20add which it shouldn't be doing. How can I make sure it'll only go to the div and not a different page?
You can do this with Url->Build
exemple:
toto
You can do it by using controller and action name.
Example :
echo $this->Html->link('Title', array(
'controller'=>'pages',
'action'=>'index',
$server->id,
'container edit'
)
);
Above code will produce -
pages/{serverId}#container%20add
pages/index/{serverId}#container%20add
I have a Zend form created using Zend\Form\Annotation. I am using following code to generate the HTML:
echo $this->form()->openTag($form);
echo $this->formCollection($form);
echo $this->form()->closeTag();
The problem is labels are placed just before the input text fields like this:
Label: Input text Box
I want to do like this:
Label:
Input Text Box
How can I format my labels to get my desired position?
What I am going to do is use individual elements print instead of using formCollection method like below:
<dl class="zend_form">
<?php echo $this->formElementErrors($form->get('identity')) ?>
<dt><?php echo $this->formLabel($form->get('identity')) ?></dt>
<dd><?php echo $this->formInput($form->get('identity')) ?></dd>
<dt><?php echo $this->formLabel($form->get('credential')) ?></dt>
<dd><?php echo $this->formInput($form->get('credential')) ?></dd>
<?php if ($this->redirect): ?>
<input type="hidden" name="redirect" value="<?php echo $this->redirect ?>" />
<?php endif ?>
<dd><?php echo $this->formButton($form->get('submit')) ?></dd>
</dl>
You just could use css:
label {
display: block;
}
just give the elements an id in your annotation like #Annotation\Attributes({"id" : "id"})
I created a custom viewscript for a zend form. In the form, there is a file element. When I run the code echo $this->element->elementname->renderViewHelper() it works fine on all elements except the file element. When I run the following code on my file element within my custom viewscript, i get the following error: Uncaught exception 'Zend_Form_Element_Exception' with message 'Decorator by name ViewHelper does not exist'
<?php if($this->element->avatarimage->hasErrors()):?>
<div class="control-group error">
<?php else: ?>
<div class="control-group">
<?php endif;?>
<label for="avatarimage" class="control-label">Avatar Image</label>
<div class="controls">
<?php echo $this->element->avatarimage->renderViewHelper();?>
<?php if($this->element->avatarimage->hasErrors()):
$messages = $this->element->avatarimage->getMessages();
$messages = array_values($messages);
$message = $messages[0];
echo '<span class="help-inline">'.$message.'</span>';
endif;
?>
</div>
</div>
How can I incorporate my file element into my custom form viewscript?
This should definitely work.
<? echo $this->element->avatarimage->renderFile(); ?>
Try like this:
<?php echo $this->element->avatarimage;?>
Hi i want to put two div in a zend view. After i want to have the two div in different position. My problem is that i want to have the normal content adn i want to add another div that rapresent the side menu
For example my view is:
<div id="view-menuscritte">
List menu
</div>
<div id="view-content">
<?php
echo $this->errorMessage;
echo $this->form;
?>
</div>
When I use in my layout
<div id="menu">
<img id="menusopra" src=<?php echo $this->baseUrl().'/img/menusopra.jpg'; ?> >
<div id="menuscrittegenerale">
<?php echo $this->layout()->menuscritte; ?>
</div>
<img id="menusotto" src=<?php echo $this->baseUrl().'/img/menusotto.jpg'; ?>
</div>
<div id="contentgenerale">
<?php echo $this->layout()->content; ?>
</div>
The problem is that the two div (->content and ->menuscritte) are in the same div.
view-menuscritte is not in menuscrittegenerale where it could be.
Inside folder of layout.phtml , create menu.phtml
cut and paste following content from your view into menu.phtml
<div id="view-menuscritte">
List menu
</div>
Now in your layout.phtml replace
<?php echo $this->layout()->menuscritte; ?>
with
<?php echo $this->partial('menu.phtml);?>
first of all I have very little experience with CSS/HTML, I'm not a webdesigner/coder, basically I have no clue what I'm doing.
I'm also close to kill myself because nothing helped. I really appreciate everyone who's trying to help me.
When you go on pawelpietryka.com and hover on the image it slides in a div via webkit transition and basically everything works.
I'm also using a webkit inset shadow which is animated too. I had big issues with this shadow because it always appeared behind the image (not in front) ... I hacked it with these changes
#demo-5 img { z-index: -1; position: relative; vertical-align: top; }
As soon as I put the z-index: -1; in it doesn't work on iPad/iPhone anymore, I'm tapping on the container and nothing happens.
(I'm assuming it doesn't have a hover state and when I'm trying to tap it it's somehow BEHIND the main layer.)
I've seen this on other page and the ideal scenario would be: 1) First tap box slides in 2) Second tap jump to destination.
Thanks!
If you think of your div nesting as a pyramid such as...
<pyramid>
<section level="1">
<section level="2">
</section>
</section>
</pyramid>
You can't get level 2 to appear under level 1, because level 1 contains level 2. If you would want level 2 to appear over level 2, usually they would be siblings, i.e
<pyramid>
<section level="1"></section>
<section level="2"></section>
</pyramid>
But in your specific case, I would recommend putting the image as the background of the div
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>">
<div class="rel" id="demo-5" style="background: transparent url(<?php the_post_thumbnail('homepage-thumb'); ?>) top left no-repeat">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
Trying to post it here, the formatting is odd on comments
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<a href="<?php the_permalink(); ?>"><div class="rel" id="demo-5" style="background-image:<?php the_post_thumbnail('homepage-thumb'); ?>">
<div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div>
<?php endif ?>
</div></a>
</div>
<?php endwhile; ?>
</div>
And this is the code 'unchanged'
<div id="boxes">
<?php while ( have_posts() ) : the_post(); ?>
<div class="box">
<div class="rel" id="demo-5">
<?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?>
<?php if ($imbalance2_theme_options['images_only'] == 0): ?>
<a href="<?php the_permalink(); ?>"><div class="detailsausgeblendet">
<h1><?php the_title(); ?></h1>
<?php the_excerpt() ?>
</div></a>
<?php endif ?>
</div>
</div>