I am currently working on a project of making a web.But after using bootstrap I got some error in spaces in between the pictures its not also responsive in web as well as in app.
The content is divided into two category Y and C the Y is fine in its space the problem is coming from C section.The category label is also not responsive .If you can fix the error please provide me with a layout which is perfect in web and app using bootstrap.
Thanks in advance!
<div class=" secondbtn" style="align-items: center;">
<h4>The Y category</h4>
</div>
<div class="filtr-container galleryContainer d">
<!-- item -->
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Y" data-sort="">
<img src="images/animals/animals (1).jpg" alt="">
<span class="col-md-3 col-lg-3 item-desc" style="position: initial;">Malavian Cichlids</span>
</div>
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Tanganyikan,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;">plecos</span>
</div>
</div>
<div class="second" >
<h4><span>The C category</span></h4>
</div>
<section class="container-fluid ">
<div class="layout_M filtr-container galleryContainer d">
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;" >Barbs</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Cory Cats</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Freshwater Plants</span>
</div>
</div>
</section>
</div>
</div>
To make t responsive try to wrap your columns in a div with class name row.
Related
The text doesn't change line properly, I thought it should run in the column and auto change to next line, so they are stay in the column. That's what I saw in the video but is not working.
Thanks for helping.
Here are pictures.
https://ppt.cc/fr1JQx , https://ppt.cc/fPDr2x
Here is my code.
<style type="text/css">
.item:first-letter{
font-size: 50px;
float: left;
}
.item{
background-color: rgb(62, 116, 163);
}
</style>
</head>
<body>
<div class="container">
<div class="row g-5">
<div class="col-3 mb-4" >
<div class="item h-100 width-10">
A abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcd</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
B abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd</div>
</div>
</div>
</div>
Two options to fix:
I found this answer which explains in a bit more detail, but if this is really your content (I doubt it) you need to add this to your CSS:
word-wrap:break-word;
Otherwise I've slightly tweaked your layout and added some real content:
<div class="container">
<div class="row">
<div class="col-3 mb-4">
<p class="h-100 item">
A This is some normal text. I don't know the difference?
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
B You need to use a normal paragraph structure, testing testing testing testing
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
</div>
</div>
You can see that the columns with garbage content are still broken, but the ones I changed work fine.
So I have a local project running ExpressJS and I'm using ejs as my template engine. Whenever I start the server and go to the home page the index.html file renders properly, but every subsequent load of the index gives me the un-rendered index.html file and the status is 304. All other pages render fine everytime. If I restart the server, the first time I hit the home page it is rendered correctly, but still serves the un-rendered file after every page load after that. If I put a breakpoint in the route (I'm using WebStorm) I can hit the break point the first time, but never again. I assume this is because of the 304. I also have app.disable('etag'). Any help is much appreciated.
UPDATE
This is what is the browser will display when receiving a 304 status.
<%- include('includes/header.html'); %>
<%- include('includes/navigation.html'); %>
<!-- Top Slider and Booking form -->
<div id="home-top-section">
<!-- Main Slider -->
<div id="main-slider">
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/1.jpg" alt="3"/><!-- Change the URL section based on your image\'s name -->
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/3.jpg" alt="3"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/4.jpg" alt="4"/>
</a>
</div>
<div class="items">
<a href="http://google.com">
<img src="assets/img/slider/2.jpg" alt="2"/>
</a>
</div>
</div>
<!-- Booking Form -->
<div class="booking-form-container container">
<div class="booking-form-inner-container">
<div id="main-booking-form" class="style-2">
<h2>Find A <span>Room</span></h2>
<form class="booking-form clearfix" action="#"><!-- Do Not remove the classes -->
<div class="input-daterange clearfix">
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check in date" class="datepicker-fields check-in" type="text" name="start" /><!-- Date Picker field ( Do Not remove the "datepicker-fields" class ) -->
<i class="fa fa-calendar"></i><!-- Date Picker Icon -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<input placeholder="Choose check out date" class="datepicker-fields check-out" type="text" name="end" />
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="booking-fields col-xs-6 col-md-12">
<!-- Select boxes ( you can change the items and its value based on your project's needs ) -->
<select name="room-type">
<option value="">How Many Adult?</option><!-- Select box items ( you can change the items and its value based on your project's needs ) -->
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
</select>
<!-- End of Select boxes -->
</div>
<div class="booking-fields col-xs-6 col-md-12">
<select name="guest">
<option value="">How Many Children ?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="booking-button-container">
<input class="btn btn-default" value="Check Availability" type="submit"/><!-- Submit button -->
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of Top Slider and Booking form -->
<!-- Luxury Rooms -->
<div id="luxury-rooms">
<!-- Heading box -->
<div class="heading-box">
<h2>Luxury <span>Rooms</span></h2><!-- Title -->
<div class="subtitle">Best rooms with Best services</div><!-- Subtitle -->
</div>
<!-- Room Box Container -->
<div class="room-container container">
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/1.jpg" alt="King Suit" class="room-img"><!-- Room Image -->
<div class="room-details col-xs-6 col-md-4">
<div class="title">King Suit</div><!-- Room title -->
<div class="description"><!-- Room Description -->
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details<!-- Detail link -->
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$550</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes right">
<img src="assets/img/rooms/2.jpg" alt="Royal Suit" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Royal Suit</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$490</span>
- Per Night
</div>
</div>
</div>
<!-- Room box -->
<div class="room-boxes">
<img src="assets/img/rooms/3.jpg" alt="Deluxe Two-bedroom Suite" class="room-img">
<div class="room-details col-xs-6 col-md-4">
<div class="title">Deluxe Two-bedroom Suite</div>
<div class="description">
Short description of rooms will be located in this section that you can describe some special features and equipment of rooms. Visitors can get more information about this rooms by clicking on "Details" button.
</div>
Details
</div>
<div class="price-container col-xs-6 col-md-8">
<div class="price">
<span>$370</span>
- Per Night
</div>
</div>
</div>
</div>
</div>
<!-- End of Luxury Rooms -->
<!-- Special Packages -->
<div id="special-packages" class="container">
<!-- Heading box -->
<div class="heading-box">
<h2>Special <span>Packages</span></h2><!-- Title -->
<div class="subtitle">Choose one of our special offers</div><!-- Subtitle -->
</div>
<!-- Package Container -->
<div class="package-container clearfix">
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4">
<div class="package-inner">
<div class="title">Diamond</div>
<div class="price"><span>$450</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch / Dinner )</li>
<li>Music Concert</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="0.5s">
<div class="package-inner">
<div class="title">Gold</div>
<div class="price"><span>$340</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( Lunch )</li>
<li>Music Concert ( 50% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
<!-- Package Box -->
<div class="package-box wow fadeInUp col-sm-6 col-md-4" data-wow-delay="1s">
<div class="package-inner">
<div class="title">Silver</div>
<div class="price"><span>$230</span>per night</div>
<div class="package-details">
<ul>
<li>Flight Ticket</li>
<li>Restaurant ( 20% off Lunch )</li>
<li>Music Concert ( 30% off )</li>
<li>Airport Pick-up</li>
<li>Sport Activities</li>
</ul>
</div>
Select Package
</div>
</div>
</div>
</div>
<!-- End of Special Packages -->
<!-- Gallery -->
<div id="gallery">
<!-- Heading box -->
<div class="heading-box">
<h2>Pinar <span>Gallery</span></h2><!-- Title -->
</div>
<!-- Gallery Container -->
<div class="gallery-container">
<div class="sort-section">
<div class="sort-section-container">
<div class="sort-handle">Filters</div>
<ul class="list-inline">
<li>All</li>
<li>Restaurant</li>
<li>Bars</li>
<li>Pool</li>
<li>Rooms</li>
<li>Lobby</li>
</ul>
</div>
</div>
<ul class="image-main-box clearfix">
<li class="item col-xs-6 col-md-3 lobby">
<figure>
<img src="assets/img/gallery/1.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Great</span> View</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/2.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Outdoor</span> Pool</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 bars">
<figure>
<img src="assets/img/gallery/3.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Delicious</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 restaurant">
<figure>
<img src="assets/img/gallery/4.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>International</span> Foods</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/5.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Cozy</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 rooms">
<figure>
<img src="assets/img/gallery/6.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Comfortable </span> Rooms</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-3 pool">
<figure>
<img src="assets/img/gallery/7.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Relaxation</span> Spaces</h4>
</figcaption>
</figure>
</li>
<li class="item col-xs-6 col-md-6 pool">
<figure>
<img src="assets/img/gallery/8.jpg" alt="11"/>
Enlarge
<figcaption>
<h4><span>Indoor</span> Pool</h4>
</figcaption>
</figure>
</li>
</ul>
More ...
</div>
</div>
<!-- End of Gallery -->
<%- include('includes/footer.html'); %>
instead of the rendered version. Notice the includes at the top and bottom of the page.
So, the issue was simply because I was using .html templates instead of .ejs. Word to the wise, if you buy a template that has static .html files and want to use a templating engine such as .ejs, make sure you change .html to .ejs or you will run into all types of issues.
I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.
<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class=""></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<a class="carousel-buttonleft" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-buttonright" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" role="listbox" style="height:300px">
<div class="item active" align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>NORMAL SKIN</p>
</div>
</a>
</div>
<div class="item ">
<div align="center" class="carousel-image">
<img src="../images/saumon.png" alt="saumon1" />
</div>
<div class="carousel-caption">
<p>SILVER SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>DEEP SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>WITH SKIN</p>
</div>
</div>
</div>
</div>
Thanks.
sorry i'm currently using my phone. You must select by className.
In css :
.carousel-inner .item .active
In jQuery :
$('.carousel-inner .item .active')
then... .attr('id') and for the value .val() or .text()
In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target :
StackOverflow
So in upgrading from DevExpress to DevExtreme, DE seems to have gone out of their way to block any automation engine but their own.
Select boxes are build as a layer of custom DIV tags with a read-only input tag in the middle.
When selected, the dropdown list is generated as a DIV list structure tied to the /body/ level of the page source.
This list unloads when the dropdown list closes.
Waitr can see and interact with the list the first time it appears on the page, but once it unloads I cannot get it to find it again.
I have tried Page Object references, native Watir dynamic references, nothing works.
Interestingly I do not get the common 'no longer attached to the DOM' error, just an empty string.
All of the workarounds from DevExpress have been deactivated or blocked.
Has anyone found a way to automate these controls besides exposed JS calls?
Select Box:
<div class="dx-texteditor dx-dropdowneditor-button-visible dx-widget dx-textbox dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="Active_Y_or_N" typeof="drpdown" validations="[{"type":"required"}]" value="1" items="[{"Value":1.0,"Text":"Yes","DropDownType":"Active Y or N"},{"Value":2.0,"Text":"No","DropDownType":"Active Y or N"}]" originalvalue="1">
<div onclick="void(0)" class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<div class="dx-texteditor-container">
<input id="Active_Y_or_N_1" aria-expanded="false" role="combobox" tabindex="0" spellcheck="false" readonly="" aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="dx-texteditor-input" type="text">
<div class="dx-placeholder dx-state-invisible" data-dx_placeholder="Select..."></div>
<div class="dx-texteditor-buttons-container">
<div role="button" onclick="void(0)" class="dx-widget dx-button-normal dx-dropdowneditor-button">
<div class="dx-dropdowneditor-icon"></div>
</div>
</div>
</div>
</div>
List:
<div style="width: 212px; height: 61px; z-index: 1001; margin: 0px; left: 0px; top: 0px; transform: translate(264px, 365px); transition: none 0s ease 0s ; visibility: visible; opacity: 1;" class="dx-overlay-content dx-popup-normal dx-popup-draggable dx-resizable">
<div style="height: 60px;" id="2ceea1a1-35ca-5e1d-72c1-17ca0c70daa9" class="dx-popup-content">
<div aria-activedescendant="3cc4c726-d65a-4248-b16c-6cd8ed666d08" tabindex="-1" role="listbox" class="dx-scrollable dx-scrollview dx-scrollable-customizable-scrollbars dx-scrollable-vertical dx-scrollable-simulated dx-visibility-change-handler dx-list dx-widget dx-collection" id="2779756d-884a-7d65-dd53-5ab194255698">
<div class="dx-scrollable-container">
<div style="transform: translate(0px, 0px);" class="dx-scrollable-content">
<div class="dx-scrollview-top-pocket">
<div style="display: none;" class="dx-scrollview-pull-down">
<div class="dx-scrollview-pull-down-image"></div>
<div class="dx-scrollview-pull-down-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-pull-down-text">
<div style="opacity: 1;">Pull down to refresh...</div>
<div style="opacity: 0;">Release to refresh...</div>
<div style="opacity: 0;">Refreshing...</div>
</div>
</div>
</div>
<div onclick="void(0)" class="dx-scrollview-content">
<div id="3cc4c726-d65a-4248-b16c-6cd8ed666d08" aria-selected="false" role="option" class="dx-item dx-list-item dx-state-focused">
<div class="dx-item-content dx-list-item-content">Yes</div>
</div>
<div aria-selected="false" role="option" class="dx-item dx-list-item">
<div class="dx-item-content dx-list-item-content">No</div>
</div>
</div>
<div class="dx-scrollview-bottom-pocket">
<div style="display: none;" class="dx-scrollview-scrollbottom">
<div class="dx-scrollview-scrollbottom-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content">
</div>
</div>
</div>
</div>
<div class="dx-scrollview-scrollbottom-text">Loading...</div>
</div>
</div>
</div>
<div style="display: none;" class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical dx-scrollbar-hoverable">
<div style="transform: translate(0px, 0px); height: 58px;" class="dx-scrollable-scroll dx-state-invisible">
<div class="dx-scrollable-scroll-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-loadpanel dx-overlay dx-widget dx-visibility-change-handler dx-state-invisible dx-loadpanel">
<div aria-hidden="true" style="width: 222px; height: 90px;" class="dx-overlay-content"></div>
</div>
code (one version anyway):
self.send("#{field}_element").div(:class => 'dx-dropdowneditor-icon').click
drpdwn = #browser.div(:class => 'dx-scrollview-content')
if drpdwn.text.include? value
drpdwn.div(:text => value).click
else
fail "value (#{value}) not found in list (#{self.drop_list_element.text})"
end
It is very hard to answer because I can't see your code and I have no example. So maybe it's a wrong answer. But if your statement:
On the second load of the list, Watir can see it as existing, but not visible.
is correct. Then you can force watir to work with not visible elements using:
browser.hidden(id: "your_element").click
Try it please.
I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.